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

package/dist/mdas-sdk.esm.js

@@ -406,6 +406,85 @@ class BaseWidget {
       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
@@ -1277,6 +1356,24 @@ const ONBBOLevel2Template = `
                 <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>
 
@@ -1951,6 +2048,38 @@ const ONBBOLevel2Styles = `
     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
    ======================================== */
@@ -2335,6 +2464,11 @@ const ONBBOLevel2Styles = `
     .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) {
@@ -2353,6 +2487,19 @@ const ONBBOLevel2Styles = `
         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;
@@ -2436,28 +2583,6 @@ const TimeSalesStyles = `
     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;
 }
 
 /* ========================================
@@ -4409,105 +4534,53 @@ class MarketDataWidget extends BaseWidget {
     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);
       }
@@ -4586,126 +4659,6 @@ class MarketDataWidget extends BaseWidget {
       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 {
@@ -5210,7 +5163,20 @@ class NightSessionWidget extends BaseWidget {
     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(() => {
@@ -5227,38 +5193,6 @@ class NightSessionWidget extends BaseWidget {
 
     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') {
@@ -5277,71 +5211,53 @@ class NightSessionWidget extends BaseWidget {
     // 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);
@@ -5381,34 +5297,35 @@ class NightSessionWidget extends BaseWidget {
       }
     }
     // 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) {
@@ -6238,36 +6155,20 @@ class OptionsWidget extends BaseWidget {
     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
@@ -38624,7 +38525,20 @@ class IntradayChartWidget extends BaseWidget {
   }
   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();
@@ -38632,38 +38546,6 @@ class IntradayChartWidget extends BaseWidget {
     // 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) {
@@ -39085,21 +38967,14 @@ class IntradayChartWidget extends BaseWidget {
     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');
@@ -40056,8 +39931,10 @@ class ONBBOLevel2Widget extends BaseWidget {
     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;
 
@@ -40158,13 +40035,22 @@ class ONBBOLevel2Widget extends BaseWidget {
         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
@@ -40191,7 +40077,19 @@ class ONBBOLevel2Widget extends BaseWidget {
     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(() => {
@@ -40203,41 +40101,52 @@ class ONBBOLevel2Widget extends BaseWidget {
     }, 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) {
@@ -40245,8 +40154,14 @@ class ONBBOLevel2Widget extends BaseWidget {
       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);
@@ -40255,16 +40170,54 @@ class ONBBOLevel2Widget extends BaseWidget {
       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);
@@ -40272,7 +40225,7 @@ class ONBBOLevel2Widget extends BaseWidget {
       }
 
       // 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}`);
@@ -40286,32 +40239,31 @@ class ONBBOLevel2Widget extends BaseWidget {
       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;
@@ -40409,6 +40361,43 @@ class ONBBOLevel2Widget extends BaseWidget {
       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) {
@@ -40455,9 +40444,17 @@ class ONBBOLevel2Widget extends BaseWidget {
       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
@@ -40622,6 +40619,7 @@ class TimeSalesWidget extends BaseWidget {
     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;
@@ -40633,6 +40631,7 @@ class TimeSalesWidget extends BaseWidget {
 
     // Create widget structure
     this.createWidgetStructure();
+    this.initializeSymbolEditor();
 
     // Initialize the widget
     this.initialize();
@@ -40649,7 +40648,26 @@ class TimeSalesWidget extends BaseWidget {
       }
     }
     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
@@ -40672,6 +40690,8 @@ class TimeSalesWidget extends BaseWidget {
       // 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;
@@ -40774,7 +40794,19 @@ class TimeSalesWidget extends BaseWidget {
     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(() => {
@@ -40787,36 +40819,6 @@ class TimeSalesWidget extends BaseWidget {
 
     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'],
@@ -40832,6 +40834,9 @@ class TimeSalesWidget extends BaseWidget {
       clearTimeout(this.loadingTimeout);
       this.loadingTimeout = null;
     }
+    if (message.type != 'queryonbbotimesale') {
+      return;
+    }
 
     // Handle error messages
     if (message.type === 'error') {
@@ -40844,30 +40849,16 @@ class TimeSalesWidget extends BaseWidget {
     }
 
     // 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);
     }
@@ -41094,7 +41085,15 @@ class ApiService {
     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) {
@@ -41583,6 +41582,7 @@ class WebSocketManager {
     }
   }
   handleMessage(event) {
+    //console.log('EVENT', event)
     try {
       // Update activity tracking - connection is alive!
       this.lastMessageReceived = Date.now();
@@ -41607,22 +41607,20 @@ class WebSocketManager {
           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
           };
         }
       }
@@ -41630,9 +41628,16 @@ class WebSocketManager {
         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', {
@@ -41771,7 +41776,31 @@ class WebSocketManager {
             }
           } 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);
+                  }
+                }
+              });
             }
           }
         });
@@ -41823,14 +41852,9 @@ class WebSocketManager {
    * 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
@@ -41838,13 +41862,12 @@ class WebSocketManager {
       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
+        } : {})
       };
     }
 
@@ -41862,92 +41885,30 @@ class WebSocketManager {
         // 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`);
@@ -41990,42 +41951,49 @@ class WebSocketManager {
   _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);
@@ -42034,22 +42002,28 @@ class WebSocketManager {
   _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);
     }
   }
 
@@ -42093,12 +42067,11 @@ class WebSocketManager {
       }
     }
   }
-  _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,
@@ -42192,7 +42165,7 @@ class WebSocketManager {
   _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]);
@@ -42258,25 +42231,15 @@ class WebSocketManager {
     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