mdas-jsview-sdk 1.0.17-uat.0 → 1.0.23-uat.0

package/dist/mdas-sdk.js

@@ -412,6 +412,85 @@
           console.log(`[${this.constructor.name}] Connection failed after ${status.maxAttempts} attempts`);
         }
       }
+
+      /**
+       * Validate initial symbol with the API and handle access/permission errors
+       * This is a reusable method for all widgets that need to validate symbols on initialization
+       *
+       * @param {string} apiMethod - The API method name to call (e.g., 'quotel1', 'quoteOptionl1')
+       * @param {string} symbol - The symbol to validate
+       * @param {Function} onSuccess - Callback when validation succeeds with data, receives (data, result)
+       * @returns {boolean} - Returns false if access denied (stops initialization), true otherwise
+       */
+      async validateInitialSymbol(apiMethod, symbol) {
+        let onSuccess = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        try {
+          const apiService = this.wsManager?.getApiService();
+          if (!apiService) {
+            if (this.debug) {
+              console.log(`[${this.constructor.name}] API service not available for initial validation`);
+            }
+            return true; // Continue without validation
+          }
+          if (!apiService[apiMethod]) {
+            console.error(`[${this.constructor.name}] API method ${apiMethod} does not exist`);
+            return true; // Continue without validation
+          }
+          const result = await apiService[apiMethod](symbol);
+          if (result && result.data && result.data.length > 0) {
+            if (this.debug) {
+              console.log(`[${this.constructor.name}] Initial symbol validated:`, {
+                symbol,
+                method: apiMethod,
+                dataCount: result.data.length
+              });
+            }
+
+            // Call success callback if provided
+            if (onSuccess && typeof onSuccess === 'function') {
+              onSuccess(result.data, result);
+            }
+            return true; // Validation successful
+          }
+
+          // No data returned - might be access issue, but continue anyway
+          if (this.debug) {
+            console.log(`[${this.constructor.name}] No data returned from ${apiMethod} for ${symbol}`);
+          }
+          return true; // Continue anyway, WebSocket might still work
+        } catch (error) {
+          if (this.debug) {
+            console.warn(`[${this.constructor.name}] Initial symbol validation failed:`, error);
+          }
+
+          // Check if it's an access/permission error
+          const errorMessage = (error.message || '').toLowerCase();
+          const isAccessError = errorMessage.includes('400') ||
+          // Bad Request (often used for access issues)
+          errorMessage.includes('401') ||
+          // Unauthorized
+          errorMessage.includes('403') ||
+          // Forbidden
+          errorMessage.includes('forbidden') || errorMessage.includes('unauthorized') || errorMessage.includes('no access') || errorMessage.includes('no opra access') ||
+          // Specific OPRA access denial
+          errorMessage.includes('permission denied') || errorMessage.includes('access denied');
+          if (isAccessError) {
+            // Hide loading and show access error
+            this.hideLoading();
+
+            // Extract more specific error message if available
+            let userMessage = `Access denied: You don't have permission to view data for ${symbol}`;
+            if (errorMessage.includes('no opra access')) {
+              userMessage = `Access denied: You don't have OPRA access for option ${symbol}`;
+            }
+            this.showError(userMessage);
+            return false; // Stop initialization
+          }
+
+          // For other errors, continue with WebSocket (might still work)
+          return true;
+        }
+      }
     }
 
     // src/models/MarketDataModel.js
@@ -1283,6 +1362,24 @@
                 <span class="l2-market-name"></span>
             </div>
             <span class="symbol editable-symbol">--</span>
+            <div class="level1-info">
+                <div class="l1-item">
+                    <span class="l1-label">Last:</span>
+                    <span class="l1-value l1-last-px">--</span>
+                </div>
+                <div class="l1-item">
+                    <span class="l1-label">Low:</span>
+                    <span class="l1-value l1-low-px">--</span>
+                </div>
+                <div class="l1-item">
+                    <span class="l1-label">High:</span>
+                    <span class="l1-value l1-high-px">--</span>
+                </div>
+                <div class="l1-item">
+                    <span class="l1-label">Volume:</span>
+                    <span class="l1-value l1-volume">--</span>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -1957,6 +2054,38 @@
     color: #111827;
 }
 
+/* ========================================
+   LEVEL 1 INFO (INSIDE HEADER)
+   ======================================== */
+
+.onbbo-level2-widget .level1-info {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-top: 10px;
+}
+
+.onbbo-level2-widget .l1-item {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.onbbo-level2-widget .l1-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.onbbo-level2-widget .l1-value {
+    font-size: 15px;
+    font-weight: 700;
+    color: #111827;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
 /* ========================================
    ORDER BOOK CONTAINER
    ======================================== */
@@ -2341,6 +2470,11 @@
     .onbbo-level2-widget .orderbook-panel:last-child {
         border-bottom: none;
     }
+
+    .onbbo-level2-widget .level1-info {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 6px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -2359,6 +2493,19 @@
         text-align: left;
     }
 
+    .onbbo-level2-widget .level1-info {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+    }
+
+    .onbbo-level2-widget .l1-label {
+        font-size: 9px;
+    }
+
+    .onbbo-level2-widget .l1-value {
+        font-size: 11px;
+    }
+
     .onbbo-level2-widget .panel-header {
         font-size: 10px;
         padding: 6px 2px;
@@ -2442,28 +2589,6 @@
     font-size: 1.71em;
     font-weight: 700;
     color: #111827;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.time-sales-widget .symbol.editable-symbol:hover {
-    opacity: 0.8;
-    transform: scale(1.02);
-}
-
-.time-sales-widget .symbol.editable-symbol:hover::after {
-    content: "✎";
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background: #3b82f6;
-    color: white;
-    font-size: 10px;
-    padding: 2px 4px;
-    border-radius: 4px;
-    opacity: 0.8;
-    pointer-events: none;
 }
 
 /* ========================================
@@ -4415,105 +4540,53 @@
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
-        this.subscribeToData();
-      }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[MarketDataWidget] API service not available for initial validation');
-            }
-            return;
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting data
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Store for use in updateWidget
+          if (data && data[0]) {
+            this.initialValidationData = data[0];
           }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Store for use in updateWidget
-            this.initialValidationData = symbolData;
-            if (this.debug) {
-              console.log('[MarketDataWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: symbolData.comp_name,
-                exchangeName: symbolData.market_name
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[MarketDataWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
         }
+        this.subscribeToData();
       }
       subscribeToData() {
         // Subscribe with symbol for routing
         this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryl1'], this.handleMessage.bind(this), this.symbol // Pass symbol for routing
         );
-
-        // Send subscription message
-        /* this.wsManager.send({
-            type: 'queryl1',
-            symbol: this.symbol
-        }); */
       }
+      handleData(message) {
+        //console.log('DEBUG', message)
 
-      /* handleMessage(messageWrapper) {
-          if (this.isDestroyed) return;
-           try {
-              const { event, data } = messageWrapper;
-               if (this.debug) {
-                  console.log('[MarketDataWidget] Received:', event, data);
-              }
-               if (event === 'connection') {
-                  this.handleConnectionStatus(data);
-                  return;
-              }
-               if (event === 'data') {
-                  this.handleData(data);
-              }
-               if (event === 'session_revoked') {
-                  if (data.status === 'attempting_relogin') {
-                      this.showLoading();
-                  } else if (data.status === 'relogin_failed') {
-                      this.showError(data.error);
-                  } else if (data.status === 'relogin_successful') {
-                      this.hideLoading();
-                  }
-                  return;
-              }
-          } catch (error) {
-              console.error('[MarketDataWidget] Error handling message:', error);
-              this.showError('Error processing data');
+        // Check for error: false and display message if present
+        if (message.error === true) {
+          if (this.debug) {
+            console.log('[MarketDataWidget] Received error response:', message.message);
           }
-      } */
+          const errorMsg = message.message || message.Message;
 
-      /* handleConnectionStatus(status) {
-          if (status.status === 'connected') {
-              if (this.debug) {
-                  console.log('[MarketDataWidget] Connected to WebSocket');
-              }
-              // Re-send subscription when reconnected
-              this.wsManager.send({
-                  type: 'queryl1',
-                  symbol: this.symbol
-              });
-          } else if (status.status === 'disconnected') {
-              this.showError('Disconnected from data service');
-          } else if (status.status === 'error') {
-              this.showError(status.error || 'Connection error');
+          // If there's a message field, show it as an error
+          if (errorMsg) {
+            this.hideLoading();
+            this.showError(errorMsg);
+            return;
           }
-      } */
-
-      handleData(message) {
+        } else if (message.Data && typeof message.Data === 'string') {
+          this.hideLoading();
+          this.showError(message.Message);
+          return;
+        }
         if (this.loadingTimeout) {
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
 
         // Handle error messages from server (plain text converted to structured format)
-        if (message.type === 'error' && message.noData) {
+        if (message.type === 'error') {
           if (this.debug) {
             console.log('[MarketDataWidget] Received no data message:', message.message);
           }
@@ -4592,126 +4665,6 @@
           this.showConnectionQuality(); // Show cache indicator
         }
       }
-      showNoDataState() {
-        let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        if (this.isDestroyed) return;
-        try {
-          // Hide loading overlay
-          this.hideLoading();
-
-          // Clear any existing errors
-          this.clearError();
-
-          // Update header with dimmed styling and basic info from data
-          const symbol = data.Symbol || this.symbol;
-
-          // Add null checks for all DOM elements
-          const symbolElement = this.container.querySelector('.symbol');
-          if (symbolElement) {
-            symbolElement.textContent = symbol;
-          }
-          const companyNameElement = this.container.querySelector('.company-name');
-          if (companyNameElement) {
-            companyNameElement.textContent = `${symbol} Inc`;
-          }
-
-          // Set price to $0.00 and add dimmed class
-          const currentPriceElement = this.container.querySelector('.current-price');
-          if (currentPriceElement) {
-            currentPriceElement.textContent = '$0.00';
-          }
-          const changeElement = this.container.querySelector('.price-change');
-          if (changeElement) {
-            const changeValueElement = changeElement.querySelector('.change-value');
-            const changePercentElement = changeElement.querySelector('.change-percent');
-            if (changeValueElement) {
-              changeValueElement.textContent = '+0.00';
-            }
-            if (changePercentElement) {
-              changePercentElement.textContent = ' (0.00%)';
-            }
-            changeElement.classList.remove('positive', 'negative');
-            changeElement.classList.add('neutral');
-          }
-
-          // Add dimmed styling to header
-          const widgetHeader = this.container.querySelector('.widget-header');
-          if (widgetHeader) {
-            widgetHeader.classList.add('dimmed');
-          }
-
-          // Replace the data grid with no data message
-          this.showNoDataMessage(symbol, data);
-
-          // Update footer with current timestamp
-          const lastUpdateElement = this.container.querySelector('.last-update');
-          if (lastUpdateElement) {
-            const timestamp = formatTimestampET();
-            lastUpdateElement.textContent = `Checked: ${timestamp}`;
-          }
-          const dataSourceElement = this.container.querySelector('.data-source');
-          if (dataSourceElement) {
-            dataSourceElement.textContent = 'Source: No data available';
-          }
-        } catch (error) {
-          console.error('Error showing no data state:', error);
-          this.showError('Error displaying no data state');
-        }
-      }
-      showNoDataMessage(symbol) {
-        const dataGrid = this.container.querySelector('.data-grid');
-
-        // Hide the data grid if it exists
-        if (dataGrid) {
-          dataGrid.style.display = 'none';
-        }
-
-        // Remove existing no data message if present
-        const existingNoData = this.container.querySelector('.no-data-state');
-        if (existingNoData) {
-          existingNoData.remove();
-        }
-
-        // Create no data message element - safely without XSS risk
-        const noDataElement = createElement('div', '', 'no-data-state');
-        const noDataContent = createElement('div', '', 'no-data-content');
-
-        // Create icon
-        const iconDiv = document.createElement('div');
-        iconDiv.className = 'no-data-icon';
-        iconDiv.innerHTML = `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="12" r="10" stroke="#9ca3af" stroke-width="2"/>
-            <path d="M12 8v4" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"/>
-            <circle cx="12" cy="16" r="1" fill="#9ca3af"/>
-        </svg>`;
-        noDataContent.appendChild(iconDiv);
-
-        // Create title
-        const title = createElement('h3', 'No Market Data', 'no-data-title');
-        noDataContent.appendChild(title);
-
-        // Create description with sanitized symbol
-        const description = createElement('p', '', 'no-data-description');
-        description.appendChild(document.createTextNode('Market data for '));
-        const symbolStrong = createElement('strong', sanitizeSymbol(symbol));
-        description.appendChild(symbolStrong);
-        description.appendChild(document.createTextNode(' was not found'));
-        noDataContent.appendChild(description);
-
-        // Create guidance
-        const guidance = createElement('p', 'Please check the symbol spelling or try a different symbol', 'no-data-guidance');
-        noDataContent.appendChild(guidance);
-        noDataElement.appendChild(noDataContent);
-
-        // Insert before footer, with null check
-        const footer = this.container.querySelector('.widget-footer');
-        if (footer && footer.parentNode) {
-          footer.parentNode.insertBefore(noDataElement, footer);
-        } else {
-          // Fallback: append to container if footer not found
-          this.container.appendChild(noDataElement);
-        }
-      }
       updateWidget(data) {
         if (this.isDestroyed) return;
         try {
@@ -5216,7 +5169,20 @@
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+            this.mic = data[0].mic || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -5233,38 +5199,6 @@
 
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[NightSessionWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            this.mic = symbolData.mic || '';
-            if (this.debug) {
-              console.log('[NightSessionWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName,
-                mic: this.mic
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[NightSessionWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         let subscriptionType;
         if (this.source === 'bruce') {
@@ -5283,71 +5217,53 @@
         // to avoid duplicate timeouts
       }
       handleData(message) {
+        console.log('DEBUG NIGHT', message);
+
+        //message = message.data || message.Data
+
         if (this.loadingTimeout) {
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
 
-        // Handle error messages from server (plain text converted to structured format)
-        if (message.type === 'error' && message.noData) {
+        // Check for error: false and display message if present
+        if (message.error === true) {
           if (this.debug) {
-            console.log('[NightSessionWidget] Received no data message:', message.message);
+            console.log('[Nigh] Received error response:', message.message);
           }
-          // Only show no data state if we don't have cached data
-          if (!this.data) {
-            this.showNoDataState({
-              Symbol: this.symbol,
-              NotFound: true,
-              message: message.message
-            });
-          } else {
+          const errorMsg = message.message || message.Message;
+
+          // If there's a message field, show it as an error
+          if (errorMsg) {
             this.hideLoading();
-            if (this.debug) {
-              console.log('[NightSessionWidget] No new data, keeping cached data visible');
-            }
+            this.showError(errorMsg);
+            return;
           }
+        } else if (message.Data && typeof message.Data === 'string') {
+          this.hideLoading();
+          this.showError(message.Message);
           return;
         }
 
-        // Handle general error messages - CHECK IF IT'S ACCESS RELATED
+        // Handle error messages from server (plain text converted to structured format)
         if (message.type === 'error') {
-          const errorMsg = message.message || 'Server error';
-
-          // If it's an access/permission error, show as no-data state instead of separate error
-          if (errorMsg.toLowerCase().includes('access') || errorMsg.toLowerCase().includes('permission') || errorMsg.toLowerCase().includes('denied')) {
-            // Only show no data state if we don't have cached data
-            if (!this.data) {
-              this.showNoDataState({
-                Symbol: this.symbol,
-                NotFound: true,
-                isAccessError: true,
-                message: errorMsg
-              });
-            } else {
-              this.hideLoading();
-              if (this.debug) {
-                console.log('[NightSessionWidget] Access error but keeping cached data');
-              }
-            }
+          if (this.debug) {
+            console.log('[NightSessionWidget] Received no data message:', message.message);
+          }
+          // Only show no data state if we don't have cached data
+          if (!this.data) {
+            this.showError(errorMsg);
           } else {
-            // Only show error if we don't have cached data
-            if (!this.data) {
-              console.log('errorMsg', errorMsg);
-              this.showError(errorMsg);
-            } else {
-              this.hideLoading();
-              if (this.debug) {
-                console.log('[NightSessionWidget] Error received but keeping cached data:', errorMsg);
-              }
+            this.hideLoading();
+            if (this.debug) {
+              console.log('[MarketDataWidget] Error received but keeping cached data:', errorMsg);
             }
           }
           return;
         }
-
-        // Filter for night session data
-        if (Array.isArray(message)) {
+        if (Array.isArray(message.data)) {
           // First, try to find data matching our symbol regardless of MarketName
-          const symbolData = message.find(item => item.Symbol === this.symbol);
+          const symbolData = message.data.find(item => item.Symbol === this.symbol);
           if (symbolData) {
             if (this.debug) {
               console.log('[NightSessionWidget] Found data for symbol:', symbolData);
@@ -5387,34 +5303,35 @@
           }
         }
         // Handle wrapped format
-        else if (message.type === 'queryblueoceanl1' || message.type === 'querybrucel1' || message.type === 'queryonbbol1') {
-          if (message['0']?.Symbol === this.symbol) {
-            // For onbbo source, skip MarketName check
-            const isOnbbo = message.type === 'queryonbbol1';
-            const shouldShowNoData = message['0'].NotFound === true || !isOnbbo && (!message['0'].MarketName || message['0'].MarketName !== 'BLUE');
-            if (shouldShowNoData) {
-              // Only show no data state if we don't have cached data
-              if (!this.data) {
-                this.showNoDataState(message['0']);
-              } else {
-                this.hideLoading();
-                if (this.debug) {
-                  console.log('[NightSessionWidget] No new data, keeping cached data visible');
+        /* else if (message.type === 'queryblueoceanl1' || message.type === 'querybrucel1' || message.type === 'queryonbbol1') {
+            if (message.data['0']?.Symbol === this.symbol) {
+                // For onbbo source, skip MarketName check
+                const isOnbbo = message.type === 'queryonbbol1';
+                const shouldShowNoData = message['0'].NotFound === true ||
+                    (!isOnbbo && (!message['0'].MarketName || message['0'].MarketName !== 'BLUE'));
+                 if (shouldShowNoData) {
+                    // Only show no data state if we don't have cached data
+                    if (!this.data) {
+                        this.showNoDataState(message['0']);
+                    } else {
+                        this.hideLoading();
+                        if (this.debug) {
+                            console.log('[NightSessionWidget] No new data, keeping cached data visible');
+                        }
+                    }
+                } else {
+                    const model = new NightSessionModel(message['0']);
+                    this.data = model; // Store for caching
+                    this.updateWidget(model);
                 }
-              }
             } else {
-              const model = new NightSessionModel(message['0']);
-              this.data = model; // Store for caching
-              this.updateWidget(model);
-            }
-          } else {
-            // No matching symbol - keep cached data if available
-            if (this.debug) {
-              console.log('[NightSessionWidget] No matching symbol in response, keeping cached data');
+                // No matching symbol - keep cached data if available
+                if (this.debug) {
+                    console.log('[NightSessionWidget] No matching symbol in response, keeping cached data');
+                }
+                this.hideLoading();
             }
-            this.hideLoading();
-          }
-        }
+        } */
         if (message._cached) ;
       }
       updateWidget(data) {
@@ -6244,36 +6161,20 @@
         this.showLoading();
 
         // Validate initial symbol via API to get symbol info
-        await this.validateInitialSymbol();
-        this.subscribeToData();
-      }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[OptionsWidget] API service not available for initial validation');
-            }
-            return;
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting data
+        const validationSuccess = await super.validateInitialSymbol('quoteOptionl1', this.symbol, data => {
+          // Store for use in updateWidget
+          // Note: quoteOptionl1 returns array directly, not wrapped in data field
+          if (data && data[0] && !data[0].error && !data[0].not_found) {
+            this.initialValidationData = data[0];
           }
-          const result = await apiService.quoteOptionl1(this.symbol);
-          if (result && result[0] && !result[0].error && !result[0].not_found) {
-            const symbolData = result[0];
-            // Store for use in updateWidget
-            this.initialValidationData = symbolData;
-            if (this.debug) {
-              console.log('[OptionsWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                underlying: symbolData.Underlying || symbolData.RootSymbol
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[OptionsWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
         }
+        this.subscribeToData();
       }
       subscribeToData() {
         // Subscribe with symbol for routing
@@ -38630,7 +38531,20 @@ ${SharedStyles}
       }
       async initialize() {
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+            this.mic = data[0].mic || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Update company name in the header
         this.updateCompanyName();
@@ -38638,38 +38552,6 @@ ${SharedStyles}
         // Load chart data
         await this.loadChartData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[IntradayChartWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            this.mic = symbolData.mic || '';
-            if (this.debug) {
-              console.log('[IntradayChartWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName,
-                mic: this.mic
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[IntradayChartWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with chart data
-        }
-      }
       updateCompanyName() {
         const companyNameElement = this.container.querySelector('.intraday-company-name');
         if (companyNameElement) {
@@ -39091,21 +38973,14 @@ ${SharedStyles}
         let priceData = null;
 
         // Handle array format (standard night session format)
-        if (Array.isArray(message)) {
+        if (Array.isArray(message.data)) {
           console.log('[IntradayChartWidget] Processing array format, length:', message.length);
-          const symbolData = message.find(item => item.Symbol === this.symbol);
+          const symbolData = message.data.find(item => item.Symbol === this.symbol);
           console.log('[IntradayChartWidget] Found symbol data:', symbolData);
           if (symbolData && !symbolData.NotFound) {
             priceData = symbolData;
           }
         }
-        // Handle wrapped format
-        else if (message.type === 'queryblueoceanl1' || message.type === 'querybrucel1') {
-          console.log('[IntradayChartWidget] Processing wrapped format');
-          if (message['0']?.Symbol === this.symbol && !message['0'].NotFound) {
-            priceData = message['0'];
-          }
-        }
         // Handle direct data format
         else if (message.Symbol === this.symbol && !message.NotFound) {
           console.log('[IntradayChartWidget] Processing direct format');
@@ -40062,8 +39937,10 @@ ${SharedStyles}
         this.styled = options.styled !== undefined ? options.styled : true;
         this.maxLevels = options.maxLevels || 10; // Number of levels to display
         this.data = null;
+        this.level1Data = null; // Store Level 1 data separately
         this.isDestroyed = false;
-        this.unsubscribe = null;
+        this.unsubscribeL2 = null;
+        this.unsubscribeL1 = null;
         this.symbolEditor = null;
         this.loadingTimeout = null;
 
@@ -40164,13 +40041,22 @@ ${SharedStyles}
             this.showError(`No data received for ${upperSymbol}. Please try again.`);
           }, 10000);
 
-          // Unsubscribe from old symbol
-          if (this.unsubscribe) {
+          // Unsubscribe from old symbol's L2 and L1 data
+          if (this.unsubscribeL2) {
             if (this.debug) {
-              console.log(`[ONBBOLevel2Widget] Unsubscribing from ${this.symbol}`);
+              console.log(`[ONBBOLevel2Widget] Unsubscribing from ${this.symbol} L2`);
             }
-            this.unsubscribe();
-            this.unsubscribe = null;
+            this.wsManager.sendUnsubscribe('queryonbbol2', this.symbol);
+            this.unsubscribeL2();
+            this.unsubscribeL2 = null;
+          }
+          if (this.unsubscribeL1) {
+            if (this.debug) {
+              console.log(`[ONBBOLevel2Widget] Unsubscribing from ${this.symbol} L1`);
+            }
+            this.wsManager.sendUnsubscribe('queryonbbol1', this.symbol);
+            this.unsubscribeL1();
+            this.unsubscribeL1 = null;
           }
 
           // Update internal symbol
@@ -40197,7 +40083,19 @@ ${SharedStyles}
         this.showLoading();
 
         // Fetch company info for initial symbol
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -40209,41 +40107,52 @@ ${SharedStyles}
         }, 10000);
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[ONBBO L2] API service not available for initial validation');
-            }
+      subscribeToData() {
+        // Subscribe to ONBBO Level 2 data (order book)
+        // Use separate widget IDs to avoid "already active" duplicate detection
+        this.unsubscribeL2 = this.wsManager.subscribe(`${this.widgetId}-l2`, ['queryonbbol2'], messageWrapper => {
+          const {
+            event,
+            data
+          } = messageWrapper;
+
+          // Handle connection events
+          if (event === 'connection') {
+            this.handleConnectionStatus(data);
             return;
           }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            if (this.debug) {
-              console.log('[ONBBO L2] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName
-              });
-            }
+
+          // For data events, add type context
+          if (event === 'data') {
+            data._dataType = 'level2';
+            this.handleMessage({
+              event,
+              data
+            });
           }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[ONBBO L2] Initial symbol validation failed:', error);
+        }, this.symbol);
+
+        // Subscribe to ONBBO Level 1 data (statistics: LastPx, LowPx, HighPx, Volume)
+        this.unsubscribeL1 = this.wsManager.subscribe(`${this.widgetId}-l1`, ['queryonbbol1'], messageWrapper => {
+          const {
+            event,
+            data
+          } = messageWrapper;
+
+          // Connection already handled by L2 subscription
+          if (event === 'connection') {
+            return;
           }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
-      subscribeToData() {
-        // Subscribe to ONBBO Level 2 data
-        this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryonbbol2'],
-        // ONBBO Level 2 subscription type
-        this.handleMessage.bind(this), this.symbol);
+
+          // For data events, add type context
+          if (event === 'data') {
+            data._dataType = 'level1';
+            this.handleMessage({
+              event,
+              data
+            });
+          }
+        }, this.symbol);
       }
       handleData(message) {
         if (this.loadingTimeout) {
@@ -40251,8 +40160,14 @@ ${SharedStyles}
           this.loadingTimeout = null;
         }
 
+        // Extract data type from metadata (added by subscription callback)
+        const dataType = message._dataType;
+        if (this.debug) {
+          console.log(`[ONBBOLevel2Widget] handleData called with type: ${dataType}`, message);
+        }
+
         // Handle error messages
-        if (message.type === 'error') {
+        if (message.type === 'error' || message.error == true) {
           const errorMsg = message.message || 'Server error';
           if (this.debug) {
             console.log('[ONBBOLevel2Widget] Error:', errorMsg);
@@ -40261,16 +40176,54 @@ ${SharedStyles}
           return;
         }
 
+        // Handle Level 1 data (statistics: LastPx, LowPx, HighPx, Volume)
+        if (message.type === 'queryonbbol1') {
+          if (this.debug) {
+            console.log('[ONBBOLevel2Widget] Processing Level 1 data:', message);
+          }
+
+          // Handle array format (new format with Data wrapper)
+          if (message.data && Array.isArray(message.data)) {
+            const l1Data = message.data.find(d => d.Symbol === this.symbol);
+            if (l1Data) {
+              this.level1Data = {
+                lastPx: l1Data.LastPx || 0,
+                lowPx: l1Data.LowPx || 0,
+                highPx: l1Data.HighPx || 0,
+                volume: l1Data.Volume || 0
+              };
+              this.updateLevel1Display();
+            }
+          }
+          // Handle direct array format (standard format)
+          else if (Array.isArray(message)) {
+            const l1Data = message.find(d => d.Symbol === this.symbol);
+            if (l1Data) {
+              this.level1Data = {
+                lastPx: l1Data.LastPx || 0,
+                lowPx: l1Data.LowPx || 0,
+                highPx: l1Data.HighPx || 0,
+                volume: l1Data.Volume || 0
+              };
+              this.updateLevel1Display();
+            }
+          }
+
+          // Clean up metadata
+          delete message._dataType;
+          return;
+        }
+
         // Handle Level 2 data - Array of MMID quotes
-        if (Array.isArray(message)) {
+        if (Array.isArray(message.data)) {
           // Check if it's an array of MMID objects (ONBBO format)
-          if (message.length > 0 && message[0].MMID) {
+          if (message.data.length > 0 && message.data[0].MMID) {
             if (this.debug) {
               console.log('[ONBBOLevel2Widget] Received MMID array:', message);
             }
 
             // Create model from MMID array
-            const model = new ONBBOLevel2Model(message);
+            const model = new ONBBOLevel2Model(message.data);
             model.symbol = this.symbol; // Set symbol from widget
             this.data = model;
             this.updateWidget(model);
@@ -40278,7 +40231,7 @@ ${SharedStyles}
           }
 
           // Try to find symbol in array (alternative format)
-          const symbolData = message.find(item => item.Symbol === this.symbol);
+          const symbolData = message.data.find(item => item.Symbol === this.symbol);
           if (symbolData) {
             if (symbolData.NotFound === true) {
               this.showError(`No Level 2 data available for ${this.symbol}`);
@@ -40292,32 +40245,31 @@ ${SharedStyles}
           this.showError(`No Level 2 data available for ${this.symbol}`);
         }
         // Handle wrapped format
-        else if (message.type === 'queryonbbol2') {
-          // Check if wrapped data contains MMID array
-          if (message['0'] && Array.isArray(message['0'])) {
-            if (this.debug) {
-              console.log('[ONBBOLevel2Widget] Received wrapped MMID array:', message['0']);
+        /* else if (message.type === 'queryonbbol2') {
+            // Check if wrapped data contains MMID array
+            if (message['0'] && Array.isArray(message['0'])) {
+                if (this.debug) {
+                    console.log('[ONBBOLevel2Widget] Received wrapped MMID array:', message['0']);
+                }
+                 const model = new ONBBOLevel2Model(message['0']);
+                model.symbol = this.symbol;
+                this.data = model;
+                this.updateWidget(model);
+                return;
             }
-            const model = new ONBBOLevel2Model(message['0']);
-            model.symbol = this.symbol;
-            this.data = model;
-            this.updateWidget(model);
-            return;
-          }
-
-          // Check for symbol match in wrapped format
-          if (message['0']?.Symbol === this.symbol) {
-            if (message['0'].NotFound === true) {
-              this.showError(`No Level 2 data available for ${this.symbol}`);
+             // Check for symbol match in wrapped format
+            if (message['0']?.Symbol === this.symbol) {
+                if (message['0'].NotFound === true) {
+                    this.showError(`No Level 2 data available for ${this.symbol}`);
+                } else {
+                    const model = new ONBBOLevel2Model(message['0']);
+                    this.data = model;
+                    this.updateWidget(model);
+                }
             } else {
-              const model = new ONBBOLevel2Model(message['0']);
-              this.data = model;
-              this.updateWidget(model);
+                this.showError(`No Level 2 data available for ${this.symbol}`);
             }
-          } else {
-            this.showError(`No Level 2 data available for ${this.symbol}`);
-          }
-        }
+        } */
       }
       updateWidget(data) {
         if (this.isDestroyed) return;
@@ -40415,6 +40367,43 @@ ${SharedStyles}
           askBody.appendChild(row);
         });
       }
+      updateLevel1Display() {
+        if (!this.level1Data) return;
+        const formatPrice = price => {
+          return price ? price.toFixed(2) : '--';
+        };
+        const formatVolume = volume => {
+          if (!volume) return '--';
+          return volume.toLocaleString();
+        };
+
+        // Update Last Price
+        const lastPxElement = this.container.querySelector('.l1-last-px');
+        if (lastPxElement) {
+          lastPxElement.textContent = formatPrice(this.level1Data.lastPx);
+        }
+
+        // Update Low Price
+        const lowPxElement = this.container.querySelector('.l1-low-px');
+        if (lowPxElement) {
+          lowPxElement.textContent = formatPrice(this.level1Data.lowPx);
+        }
+
+        // Update High Price
+        const highPxElement = this.container.querySelector('.l1-high-px');
+        if (highPxElement) {
+          highPxElement.textContent = formatPrice(this.level1Data.highPx);
+        }
+
+        // Update Volume
+        const volumeElement = this.container.querySelector('.l1-volume');
+        if (volumeElement) {
+          volumeElement.textContent = formatVolume(this.level1Data.volume);
+        }
+        if (this.debug) {
+          console.log('[ONBBOLevel2Widget] Updated Level 1 display:', this.level1Data);
+        }
+      }
       showLoading() {
         const loadingOverlay = this.container.querySelector('.widget-loading-overlay');
         if (loadingOverlay) {
@@ -40461,9 +40450,17 @@ ${SharedStyles}
           this.clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
-        if (this.unsubscribe) {
-          this.unsubscribe();
-          this.unsubscribe = null;
+
+        // Unsubscribe from L2 data
+        if (this.unsubscribeL2) {
+          this.unsubscribeL2();
+          this.unsubscribeL2 = null;
+        }
+
+        // Unsubscribe from L1 data
+        if (this.unsubscribeL1) {
+          this.unsubscribeL1();
+          this.unsubscribeL1 = null;
         }
 
         // Destroy the symbol editor
@@ -40628,6 +40625,7 @@ ${SharedStyles}
         this.styled = options.styled !== undefined ? options.styled : true;
         this.maxTrades = options.maxTrades || 20; // Maximum number of trades to display
         this.data = new TimeSalesModel([], this.maxTrades);
+        this.data.symbol = this.symbol; // Set the symbol in the data model
         this.isDestroyed = false;
         this.unsubscribe = null;
         this.symbolEditor = null;
@@ -40639,6 +40637,7 @@ ${SharedStyles}
 
         // Create widget structure
         this.createWidgetStructure();
+        this.initializeSymbolEditor();
 
         // Initialize the widget
         this.initialize();
@@ -40655,7 +40654,26 @@ ${SharedStyles}
           }
         }
         this.addStyles();
-        this.setupSymbolEditor();
+        //this.setupSymbolEditor();
+      }
+      initializeSymbolEditor() {
+        // Initialize symbol editor with stock symbol validation
+        this.symbolEditor = new SymbolEditor(this, {
+          maxLength: 10,
+          placeholder: 'Enter symbol...',
+          //validator: this.validateStockSymbol.bind(this),
+          onSymbolChange: this.handleSymbolChange.bind(this),
+          debug: this.debug,
+          autoUppercase: true,
+          symbolType: 'quotel1'
+        });
+
+        // Set initial symbol
+        const symbolElement = this.container.querySelector('.symbol');
+        if (symbolElement) {
+          symbolElement.textContent = this.symbol;
+          symbolElement.dataset.originalSymbol = this.symbol;
+        }
       }
       addStyles() {
         // Inject styles from the styles file into document head
@@ -40678,6 +40696,8 @@ ${SharedStyles}
           // Keep editor open when clicking buttons
           symbolType: 'quotel1' // Use standard quote validation
         });
+
+        //console.log('SETUP COMPLETE')
       }
       async handleSymbolChange(newSymbol, oldSymbol) {
         let validationData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -40780,7 +40800,19 @@ ${SharedStyles}
         this.showLoading();
 
         // Validate initial symbol via API to get company info
-        await this.validateInitialSymbol();
+        // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+        const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+          // Extract company info from first data item
+          if (data && data[0]) {
+            this.companyName = data[0].comp_name || '';
+            this.exchangeName = data[0].market_name || '';
+          }
+        });
+
+        // If validation failed due to access/permission issues, stop initialization
+        if (validationSuccess === false) {
+          return; // Error is already shown, don't continue
+        }
 
         // Set timeout to detect no data on initial load
         this.loadingTimeout = setTimeout(() => {
@@ -40793,36 +40825,6 @@ ${SharedStyles}
 
         this.subscribeToData();
       }
-      async validateInitialSymbol() {
-        try {
-          const apiService = this.wsManager.getApiService();
-          if (!apiService) {
-            if (this.debug) {
-              console.log('[TimeSalesWidget] API service not available for initial validation');
-            }
-            return;
-          }
-          const result = await apiService.quotel1(this.symbol);
-          if (result && result.data && result.data[0]) {
-            const symbolData = result.data[0];
-            // Extract company info
-            this.companyName = symbolData.comp_name || '';
-            this.exchangeName = symbolData.market_name || '';
-            if (this.debug) {
-              console.log('[TimeSalesWidget] Initial symbol validated:', {
-                symbol: this.symbol,
-                companyName: this.companyName,
-                exchangeName: this.exchangeName
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[TimeSalesWidget] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         // Subscribe to Time & Sales data (using queryonbbotimesale)
         this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryonbbotimesale'],
@@ -40838,6 +40840,9 @@ ${SharedStyles}
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
+        if (message.type != 'queryonbbotimesale') {
+          return;
+        }
 
         // Handle error messages
         if (message.type === 'error') {
@@ -40850,30 +40855,16 @@ ${SharedStyles}
         }
 
         // Handle Time & Sales data - Array of trades
-        if (Array.isArray(message)) {
+        if (Array.isArray(message.data)) {
           if (this.debug) {
             console.log('[TimeSalesWidget] Received trades array:', message);
           }
 
           // Add new trades to existing data
-          this.data.addTrades(message);
+          this.data.addTrades(message.data);
           this.updateWidget();
           return;
         }
-
-        // Handle wrapped format
-        if ((message.type === 'queryonbbotimesale' || message.type === 'querytns') && message['0']) {
-          if (Array.isArray(message['0'])) {
-            if (this.debug) {
-              console.log('[TimeSalesWidget] Received wrapped trades array:', message['0']);
-            }
-
-            // Add new trades to existing data
-            this.data.addTrades(message['0']);
-            this.updateWidget();
-            return;
-          }
-        }
         if (this.debug) {
           console.log('[TimeSalesWidget] Unexpected message format:', message);
         }
@@ -41100,7 +41091,15 @@ ${SharedStyles}
         try {
           const response = await fetch(url, config);
           if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
+            // Try to get response body for error details
+            let errorBody = '';
+            try {
+              errorBody = await response.text();
+              console.error(`[ApiService] HTTP ${response.status} - Response body:`, errorBody);
+            } catch (e) {
+              console.error(`[ApiService] Could not read error response body:`, e);
+            }
+            throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
           }
           return await response.json();
         } catch (error) {
@@ -41589,6 +41588,7 @@ ${SharedStyles}
         }
       }
       handleMessage(event) {
+        //console.log('EVENT', event)
         try {
           // Update activity tracking - connection is alive!
           this.lastMessageReceived = Date.now();
@@ -41613,22 +41613,20 @@ ${SharedStyles}
               return;
             }
 
-            // Determine target type based on error content
-            const targetType = this._getTargetTypeFromErrorMessage(textMessage);
+            // Determine type based on error content, default to 'error'
+            const errorType = this._getTargetTypeFromErrorMessage(textMessage) || 'error';
             if (textMessage.toLowerCase().includes('no night session') || textMessage.toLowerCase().includes('no data')) {
               message = {
-                type: 'error',
+                type: errorType,
                 message: textMessage,
-                error: textMessage,
-                noData: true,
-                targetType: targetType // Will be 'querynightsession' for night session errors
+                error: true,
+                noData: true
               };
             } else {
               message = {
-                type: 'error',
+                type: errorType,
                 message: textMessage,
-                error: textMessage,
-                targetType: targetType // Could be null for general errors
+                error: true
               };
             }
           }
@@ -41636,9 +41634,16 @@ ${SharedStyles}
             console.log('[WebSocketManager] Processed message:', message);
           }
 
-          // Handle new message format with type and data fields (case-insensitive)
-          const normalizedMessage = this._normalizeMessage(message);
-          this._routeMessage(normalizedMessage);
+          // Extract data field for night session messages to avoid nested structure
+          // Night session format: { type: 'queryonbbol1', error: false, data: [...] }
+          // We want to send just the data array to widgets
+          let dataToRoute = message;
+          /* if (message.data !== undefined && message.type !== undefined) {
+              // This is night session format - extract the data
+              dataToRoute = message.data;
+          } */
+
+          this._routeMessage(dataToRoute);
         } catch (error) {
           console.error('[WebSocketManager] Error handling message:', error);
           this._notifyWidgets('error', {
@@ -41777,7 +41782,31 @@ ${SharedStyles}
                 }
               } else {
                 if (this.config.debug) {
-                  console.log(`[WebSocketManager] Subscription ${subscriptionKey} already active, skipping`);
+                  console.log(`[WebSocketManager] Subscription ${subscriptionKey} already active, skipping server subscription`);
+                }
+
+                // Subscription already active, but send cached data to newly subscribing widgets
+                const cachedMessage = this.lastMessageCache.get(subscriptionKey);
+                console.log('LAST', this.lastMessageCache);
+                if (cachedMessage) {
+                  if (this.config.debug) {
+                    console.log(`[WebSocketManager] Sending cached data to newly subscribing widgets for ${subscriptionKey}`);
+                  }
+
+                  // Find all widgets subscribed to this type:symbol combination
+                  this.subscriptions.forEach((subscription, widgetId) => {
+                    if (subscription.types.has(type) && subscription.symbol === symbol) {
+                      try {
+                        subscription.callback({
+                          event: 'data',
+                          data: cachedMessage,
+                          widgetId
+                        });
+                      } catch (error) {
+                        console.error(`[WebSocketManager] Error sending cached data to widget ${widgetId}:`, error);
+                      }
+                    }
+                  });
                 }
               }
             });
@@ -41829,14 +41858,9 @@ ${SharedStyles}
        * The data field structure varies based on the type
        */
       _normalizeMessage(message) {
-        // If message already has targetType (error messages), return as is
-        if (message.targetType) {
-          return message;
-        }
-
         // Check for error field (case-insensitive)
-        const errorField = message.error || message.Error;
-        const typeField = message.type || message.Type;
+        const errorField = message.error;
+        const typeField = message.type;
         const messageField = message.message || message.Message;
 
         // Handle explicit error messages - route based on type field
@@ -41844,13 +41868,12 @@ ${SharedStyles}
           if (this.config.debug) {
             console.log(`[WebSocketManager] Detected error message with type: ${typeField}`);
           }
-
-          // Set targetType for routing to specific widget types
           return {
             ...message,
-            targetType: typeField,
-            type: typeField,
-            isError: true
+            // Only add type if message doesn't already have one
+            ...(!message.type && !message.Type && typeField ? {
+              type: typeField
+            } : {})
           };
         }
 
@@ -41868,92 +41891,30 @@ ${SharedStyles}
             // Treat as error and route based on type
             return {
               ...message,
-              targetType: typeField,
-              type: typeField,
-              isError: true,
-              error: true // Mark as error even if it was false
+              // Only add type if message doesn't already have one
+              ...(!message.type && !message.Type && typeField ? {
+                type: typeField
+              } : {}),
+              error: true // Mark as error since it was detected as implicit error
             };
           }
         }
 
-        // Check for new format: has 'type'/'Type' AND 'data'/'Data' fields
-        const dataField = message.data || message.Data;
-        if (typeField && dataField !== undefined) {
-          if (this.config.debug) {
-            console.log(`[WebSocketManager] Detected new message format with type: ${typeField}`);
-          }
-
-          // Extract the actual data and add the type to it for routing
-          let normalizedData;
-          if (Array.isArray(dataField)) {
-            // If data is an array, process each item
-            normalizedData = dataField;
-            // Add type info to the structure for routing
-            if (normalizedData.length > 0) {
-              normalizedData._messageType = typeField;
-            }
-          } else if (typeof dataField === 'object' && dataField !== null) {
-            // If data is an object, use it directly
-            normalizedData = dataField;
-            // Add type info for routing
-            normalizedData._messageType = typeField;
-          } else {
-            // Primitive value, wrap it
-            normalizedData = {
-              value: dataField,
-              _messageType: typeField
-            };
-          }
-
-          // Also preserve the original type at the root level for backward compatibility
-          if (typeof normalizedData === 'object' && !normalizedData.type) {
-            normalizedData.type = typeField;
-          }
-          return normalizedData;
-        }
-
         // Old format or no type/data structure, return as is
         return message;
       }
       _routeMessage(message) {
         //console.log('message', message);
 
-        if (Array.isArray(message) && message.length === 0) {
-          if (this.config.debug) {
-            console.log('[WebSocketManager] Received empty array, ignoring');
-          }
-          return; // Don't route empty arrays
-        }
+        // IMPORTANT: Don't filter out empty arrays here - route them based on message.type
+        // Widgets need to receive empty arrays to clear loading states and show "no data" messages
+        // The message structure is: { type: 'queryoptionchain', data: [] }
+        // We need to route based on the 'type' field, not the data content
 
         // Cache the message for later use by new subscribers
         this._cacheMessage(message);
 
-        // Check if message has a specific target type (like night session errors)
-        if (message.targetType) {
-          const targetWidgets = this.typeSubscriptions.get(message.targetType);
-          if (targetWidgets && targetWidgets.size > 0) {
-            if (this.config.debug) {
-              console.log(`[WebSocketManager] Routing ${message.targetType} error to specific widgets:`, [...targetWidgets]);
-            }
-            targetWidgets.forEach(widgetId => {
-              const subscription = this.subscriptions.get(widgetId);
-              if (subscription) {
-                try {
-                  subscription.callback({
-                    event: 'data',
-                    data: message,
-                    widgetId
-                  });
-                } catch (error) {
-                  console.error(`[WebSocketManager] Error in widget ${widgetId} callback:`, error);
-                }
-              }
-            });
-            return; // Don't fall through to broadcast
-          }
-        }
-
-        //console.log('here');
+        // Get relevant widgets based on message type and symbol
         const relevantWidgets = this._getRelevantWidgets(message);
         if (this.config.debug && relevantWidgets.size > 0) {
           console.log(`[WebSocketManager] Routing message to ${relevantWidgets.size} relevant widgets`);
@@ -41996,42 +41957,49 @@ ${SharedStyles}
       _cacheMessage(message) {
         try {
           // Extract symbol and message type to create cache key
-          const symbol = this._extractSymbol(message);
-          const messageType = this._extractMessageType(message);
+          // This allows new widgets to get instant data when subscribing
+          // check in message.data or message.Data
+          let data;
+          if (message.data) {
+            data = message.data;
+          } else if (message.Data) {
+            data = message.Data;
+          } else {
+            data = message;
+          }
+          const symbol = this._extractSymbol(data);
+          const messageType = message.type;
+          if (this.config.debug) {
+            console.log(`[WebSocketManager] _cacheMessage - extracted symbol: "${symbol}", messageType: "${messageType}"`);
+          }
+
+          // Cache by type:symbol combination
           if (messageType && symbol) {
             const cacheKey = `${messageType}:${symbol}`;
             this.lastMessageCache.set(cacheKey, message);
             if (this.config.debug) {
               console.log(`[WebSocketManager] Cached message for ${cacheKey}`);
             }
-          }
-
-          // Also handle array messages (for night session / blueocean data)
-          if (Array.isArray(message) && message.length > 0 && message[0].Symbol) {
-            const firstItem = message[0];
-            const symbol = firstItem.Symbol;
-            const messageType = this._extractMessageType(message);
-            if (messageType && symbol) {
-              const cacheKey = `${messageType}:${symbol}`;
-              this.lastMessageCache.set(cacheKey, message);
+          } else {
+            // If we can't extract symbol from message, try to cache by type only
+            // This helps with data like ONBBO L2 which doesn't have symbol in the message
+            if (messageType) {
               if (this.config.debug) {
-                console.log(`[WebSocketManager] Cached array message for ${cacheKey}`);
+                console.log(`[WebSocketManager] No symbol found in message, attempting to infer from subscriptions for type: ${messageType}`);
               }
-            }
-          }
 
-          // Handle Data array format (for queryl1 data)
-          if (message.Data && Array.isArray(message.Data)) {
-            message.Data.forEach(dataItem => {
-              if (dataItem.Symbol) {
-                const cacheKey = `queryl1:${dataItem.Symbol}`;
-                // Cache the whole message, not just the item
-                this.lastMessageCache.set(cacheKey, message);
-                if (this.config.debug) {
-                  console.log(`[WebSocketManager] Cached data item for ${cacheKey}`);
+              // Find active subscriptions for this message type and cache for each
+              this.activeSubscriptions.forEach(activeKey => {
+                const [type, sym] = activeKey.split(':');
+                if (type === messageType && sym) {
+                  const cacheKey = activeKey;
+                  this.lastMessageCache.set(cacheKey, message);
+                  if (this.config.debug) {
+                    console.log(`[WebSocketManager] Cached message for ${cacheKey} (inferred from active subscription)`);
+                  }
                 }
-              }
-            });
+              });
+            }
           }
         } catch (error) {
           console.error('[WebSocketManager] Error caching message:', error);
@@ -42040,22 +42008,28 @@ ${SharedStyles}
       _getRelevantWidgets(message) {
         const relevantWidgets = new Set();
 
+        // OPTIMIZATION: Extract message type once from the entire message, not from each data item
+        // Message structure: { type: 'queryoptionchain', data: [] }
+        let dataField = message.Data || message.data;
+        const messageType = message.type || this._extractMessageType(dataField);
+
         // Handle array messages
-        this._addRelevantWidgetsForItem(message, relevantWidgets);
+        this._addRelevantWidgetsForItem(message, relevantWidgets, messageType);
         return relevantWidgets;
       }
-      _addRelevantWidgetsForItem(item, relevantWidgets) {
+      _addRelevantWidgetsForItem(item, relevantWidgets, messageType) {
         // If item has Data array, process it
         if (item.Data && Array.isArray(item.Data)) {
           //console.log('Data array found with length:', item.Data.length);
           item.Data.forEach(dataItem => {
-            this._processDataItem(dataItem, relevantWidgets);
+            // Pass messageType from parent message, don't extract from each data item
+            this._processDataItem(dataItem, relevantWidgets, messageType);
           });
         } else if (item && item[0] && item[0].Strike !== undefined && item[0].Expire && !item[0].underlyingSymbol) {
           this._processOptionChainData(item, relevantWidgets);
         } else {
-          // Process single item
-          this._processDataItem(item, relevantWidgets);
+          // Process single item - messageType already extracted from message
+          this._processDataItem(item, relevantWidgets, messageType);
         }
       }
 
@@ -42099,12 +42073,11 @@ ${SharedStyles}
           }
         }
       }
-      _processDataItem(dataItem, relevantWidgets) {
+      _processDataItem(dataItem, relevantWidgets, messageType) {
         // Process individual data items and route to appropriate widgets
         // Option chain arrays are handled separately by _processOptionChainData
 
         const symbol = this._extractSymbol(dataItem);
-        const messageType = this._extractMessageType(dataItem);
         if (this.config.debug) {
           console.log('[WebSocketManager] Processing data item:', {
             symbol,
@@ -42198,7 +42171,7 @@ ${SharedStyles}
       _extractSymbol(item) {
         // Handle new format where symbol might be in nested data structure
         // Check if this is an array with data that has _messageType (normalized new format)
-        if (Array.isArray(item) && item._messageType) {
+        if (Array.isArray(item)) {
           // The data is an array, check first item for symbol
           if (item.length > 0 && item[0]) {
             return this._extractSymbolFromItem(item[0]);
@@ -42264,25 +42237,15 @@ ${SharedStyles}
         return symbolMappings[extracted] || extracted;
       }
       _extractMessageType(item) {
-        // Check for _messageType field added by normalization (from new format)
-        if (item._messageType) {
-          return item._messageType;
-        }
-
-        // Determine message type based on content
-        if (item.type) return item.type;
-
-        // Infer type from data structure
+        // FALLBACK: Infer type from data structure (for legacy/malformed messages)
 
         // IMPORTANT: Check for MMID field FIRST to distinguish ONBBO L2 from L1
         // Level 2 ONBBO data - array of MMID objects or object with MMID field
         if (Array.isArray(item) && item.length > 0 && item[0].MMID !== undefined) {
           return 'queryonbbol2';
         }
-
-        // Check for single MMID object
-        if (item.MMID !== undefined) {
-          return 'queryonbbol2';
+        if (Array.isArray(item) && item.length > 0 && item[0].Strike !== undefined) {
+          return 'queryoptionchain';
         }
 
         // Check for Source field AFTER MMID check