mdas-jsview-sdk 1.0.21-uat.0 → 1.0.26-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
@@ -2510,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;
 }
 
 /* ========================================
@@ -2806,8 +2863,36 @@
 }
 `;
 
+    /**
+     * @deprecated SharedStyles is deprecated and will be removed in a future version.
+     *
+     * Please migrate to BaseStyles + CommonWidgetPatterns:
+     *
+     * BEFORE:
+     * import { SharedStyles } from './styles/index.js';
+     * export const MyWidgetStyles = `${SharedStyles} ...widget styles...`;
+     *
+     * AFTER:
+     * import { BaseStyles } from './styles/BaseStyles.js';
+     * import { getLoadingOverlayStyles, getErrorStyles } from './styles/CommonWidgetPatterns.js';
+     * export const MyWidgetStyles = `
+     *   ${BaseStyles}
+     *   ${getLoadingOverlayStyles('my-widget')}
+     *   ${getErrorStyles('my-widget')}
+     *   ...widget-specific styles...
+     * `;
+     *
+     * Benefits of migration:
+     * - Proper CSS scoping (no global conflicts)
+     * - Reduced code duplication
+     * - Better maintainability
+     * - Smaller bundle size
+     *
+     * See STYLING_CUSTOMIZATION_GUIDE.md for details.
+     */
     const SharedStyles = `
     /* ========================================
+       ⚠️ DEPRECATED - Use BaseStyles.js instead
        FONT SIZE SYSTEM - CSS Variables
        Adjust --mdas-base-font-size to scale all fonts
        ======================================== */
@@ -4483,99 +4568,46 @@
         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) {
-        console.log('DEBUG', 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;
@@ -4661,126 +4693,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 {
@@ -5285,7 +5197,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(() => {
@@ -5302,38 +5227,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') {
@@ -5353,6 +5246,7 @@
       }
       handleData(message) {
         console.log('DEBUG NIGHT', message);
+
         //message = message.data || message.Data
 
         if (this.loadingTimeout) {
@@ -5360,64 +5254,41 @@
           this.loadingTimeout = null;
         }
 
-        // Handle error messages from server (plain text converted to structured format)
-        if (message.type === 'error' || message.error == true) {
+        // 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.data)) {
           // First, try to find data matching our symbol regardless of MarketName
           const symbolData = message.data.find(item => item.Symbol === this.symbol);
@@ -6318,36 +6189,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;
-          }
-          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
-              });
-            }
+        // 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];
           }
-        } 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
@@ -6817,6 +6672,15 @@
                     </select>
                     <button class="fetch-button" disabled>Search</button>
                 </div>
+                <div class="filter-section">
+                    <label for="strike-filter" class="filter-label">Display:</label>
+                    <select class="strike-filter" id="strike-filter">
+                        <option value="5">Near the money (±5 strikes)</option>
+                        <option value="10">Near the money (±10 strikes)</option>
+                        <option value="15">Near the money (±15 strikes)</option>
+                        <option value="all">All strikes</option>
+                    </select>
+                </div>
             </div>
 
             <!-- Data Grid Section -->
@@ -6873,11 +6737,383 @@
     </div>
 `;
 
+    // src/widgets/styles/BaseStyles.js
+
+    /**
+     * Base Styles - CSS Variables and Universal Utilities
+     *
+     * This file contains:
+     * 1. CSS Custom Properties (variables) for consistent theming
+     * 2. Responsive font sizing system
+     * 3. Optional utility classes
+     *
+     * Usage:
+     * import { BaseStyles } from './styles/BaseStyles';
+     * export const MyWidgetStyles = `${BaseStyles} ...widget styles...`;
+     */
+
+    const BaseStyles = `
+/* ============================================
+   MDAS WIDGET CSS VARIABLES
+   ============================================ */
+
+:root {
+    /* --- FONT SIZE SYSTEM --- */
+    /* Base font size - all other sizes are relative to this */
+    --mdas-base-font-size: 14px;
+
+    /* Component-specific font sizes (em units scale with base) */
+    --mdas-small-text-size: 0.79em;      /* 11px at 14px base */
+    --mdas-medium-text-size: 0.93em;     /* 13px at 14px base */
+    --mdas-large-text-size: 1.14em;      /* 16px at 14px base */
+
+    /* Widget element sizes */
+    --mdas-company-name-size: 1.43em;    /* 20px at 14px base */
+    --mdas-symbol-size: 1.79em;          /* 25px at 14px base */
+    --mdas-price-size: 2.29em;           /* 32px at 14px base */
+    --mdas-change-size: 1.14em;          /* 16px at 14px base */
+
+    /* Data display sizes */
+    --mdas-label-size: 0.86em;           /* 12px at 14px base */
+    --mdas-value-size: 1em;              /* 14px at 14px base */
+    --mdas-footer-size: 0.79em;          /* 11px at 14px base */
+
+    /* Chart-specific sizes */
+    --mdas-chart-title-size: 1.29em;     /* 18px at 14px base */
+    --mdas-chart-label-size: 0.93em;     /* 13px at 14px base */
+    --mdas-chart-value-size: 1.43em;     /* 20px at 14px base */
+
+    /* --- COLOR PALETTE (for future theming support) --- */
+    /* Primary colors */
+    --mdas-primary-color: #3b82f6;
+    --mdas-primary-hover: #2563eb;
+
+    /* Status colors */
+    --mdas-color-positive: #059669;
+    --mdas-color-positive-bg: #d1fae5;
+    --mdas-color-negative: #dc2626;
+    --mdas-color-negative-bg: #fee2e2;
+    --mdas-color-neutral: #6b7280;
+
+    /* Background colors */
+    --mdas-bg-primary: #ffffff;
+    --mdas-bg-secondary: #f9fafb;
+    --mdas-bg-tertiary: #f3f4f6;
+
+    /* Text colors */
+    --mdas-text-primary: #111827;
+    --mdas-text-secondary: #6b7280;
+    --mdas-text-tertiary: #9ca3af;
+
+    /* Border colors */
+    --mdas-border-primary: #e5e7eb;
+    --mdas-border-secondary: #d1d5db;
+
+    /* --- SPACING SYSTEM --- */
+    --mdas-spacing-xs: 4px;
+    --mdas-spacing-sm: 8px;
+    --mdas-spacing-md: 16px;
+    --mdas-spacing-lg: 24px;
+    --mdas-spacing-xl: 32px;
+
+    /* --- EFFECTS --- */
+    --mdas-border-radius: 8px;
+    --mdas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --mdas-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --mdas-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+
+    /* --- Z-INDEX LAYERS --- */
+    --mdas-z-base: 1;
+    --mdas-z-sticky: 10;
+    --mdas-z-overlay: 100;
+    --mdas-z-modal: 10000;
+}
+
+/* ============================================
+   RESPONSIVE FONT SCALING
+   ============================================ */
+
+/* Tablet breakpoint - slightly smaller fonts */
+@media (max-width: 768px) {
+    :root {
+        --mdas-base-font-size: 13px;
+    }
+}
+
+/* Mobile breakpoint - smaller fonts for small screens */
+@media (max-width: 480px) {
+    :root {
+        --mdas-base-font-size: 12px;
+    }
+}
+
+/* ============================================
+   OPTIONAL UTILITY CLASSES
+   Use these classes for consistent styling
+   ============================================ */
+
+/* Widget card styling - apply to widget root element */
+.mdas-card {
+    background: var(--mdas-bg-primary);
+    border-radius: var(--mdas-border-radius);
+    padding: var(--mdas-spacing-lg);
+    box-shadow: var(--mdas-shadow-md);
+    border: 1px solid var(--mdas-border-primary);
+}
+
+/* Responsive container */
+.mdas-container {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Text utilities */
+.mdas-text-primary {
+    color: var(--mdas-text-primary);
+}
+
+.mdas-text-secondary {
+    color: var(--mdas-text-secondary);
+}
+
+.mdas-text-muted {
+    color: var(--mdas-text-tertiary);
+}
+
+/* Status colors */
+.mdas-positive {
+    color: var(--mdas-color-positive);
+}
+
+.mdas-negative {
+    color: var(--mdas-color-negative);
+}
+
+.mdas-neutral {
+    color: var(--mdas-color-neutral);
+}
+`;
+
+    // src/widgets/styles/CommonWidgetPatterns.js
+
+    /**
+     * Common Widget Patterns - Reusable Style Functions
+     *
+     * These functions generate properly scoped CSS for common widget patterns.
+     * Each function takes a widget class name and returns scoped CSS.
+     *
+     * Benefits:
+     * - Eliminates code duplication
+     * - Ensures proper scoping (no global conflicts)
+     * - Consistent styling across widgets
+     * - Easy to maintain and update
+     *
+     * Usage:
+     * import { getLoadingOverlayStyles } from './CommonWidgetPatterns';
+     * const styles = `${getLoadingOverlayStyles('my-widget')} ...other styles...`;
+     */
+
+    /**
+     * Generate loading overlay styles for a widget
+     * @param {string} widgetClass - Widget class name (e.g., 'option-chain-widget')
+     * @returns {string} Scoped CSS for loading overlay
+     */
+    const getLoadingOverlayStyles = widgetClass => `
+/* Loading Overlay for ${widgetClass} */
+.${widgetClass} .widget-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(2px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--mdas-z-overlay, 100);
+    border-radius: var(--mdas-border-radius, 12px);
+}
+
+.${widgetClass} .widget-loading-overlay.hidden {
+    display: none;
+}
+
+.${widgetClass} .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.${widgetClass} .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--mdas-border-primary, #e5e7eb);
+    border-top-color: var(--mdas-primary-color, #3b82f6);
+    border-radius: 50%;
+    animation: ${widgetClass}-spin 1s linear infinite;
+}
+
+.${widgetClass} .loading-text {
+    color: var(--mdas-text-secondary, #6b7280);
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    font-weight: 500;
+}
+
+@keyframes ${widgetClass}-spin {
+    to { transform: rotate(360deg); }
+}
+`;
+
+    /**
+     * Generate widget error display styles
+     * @param {string} widgetClass - Widget class name
+     * @returns {string} Scoped CSS for error display
+     */
+    const getErrorStyles = widgetClass => `
+/* Error Display for ${widgetClass} */
+.${widgetClass} .widget-error {
+    padding: 16px 20px;
+    background: var(--mdas-color-negative-bg, #fee2e2);
+    border: 1px solid #fecaca;
+    border-radius: var(--mdas-border-radius, 8px);
+    color: var(--mdas-color-negative, #dc2626);
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    margin: 16px;
+    text-align: center;
+}
+
+.${widgetClass} .widget-error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 24px;
+}
+`;
+
+    /**
+     * Generate widget footer styles
+     * @param {string} widgetClass - Widget class name
+     * @returns {string} Scoped CSS for widget footer
+     */
+    const getFooterStyles = widgetClass => `
+/* Footer for ${widgetClass} */
+.${widgetClass} .widget-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background: var(--mdas-bg-secondary, #f9fafb);
+    border-top: 1px solid var(--mdas-border-primary, #e5e7eb);
+    font-size: var(--mdas-footer-size, 0.79em);
+    color: var(--mdas-text-secondary, #6b7280);
+}
+
+.${widgetClass} .widget-footer .last-update {
+    color: var(--mdas-text-tertiary, #9ca3af);
+}
+
+.${widgetClass} .widget-footer .data-source {
+    color: var(--mdas-text-secondary, #6b7280);
+    font-weight: 500;
+}
+`;
+
+    /**
+     * Generate no-data state styles
+     * @param {string} widgetClass - Widget class name
+     * @returns {string} Scoped CSS for no-data state
+     */
+    const getNoDataStyles = widgetClass => `
+/* No Data State for ${widgetClass} */
+.${widgetClass} .no-data-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--mdas-text-secondary, #6b7280);
+}
+
+.${widgetClass} .no-data-content {
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.${widgetClass} .no-data-icon {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.5;
+}
+
+.${widgetClass} .no-data-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+.${widgetClass} .no-data-title {
+    font-size: var(--mdas-large-text-size, 1.14em);
+    font-weight: 600;
+    color: var(--mdas-text-primary, #111827);
+    margin: 0;
+}
+
+.${widgetClass} .no-data-description {
+    font-size: var(--mdas-medium-text-size, 0.93em);
+    color: var(--mdas-text-secondary, #6b7280);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.${widgetClass} .no-data-description strong {
+    color: var(--mdas-text-primary, #111827);
+    font-weight: 600;
+}
+
+.${widgetClass} .no-data-guidance {
+    font-size: var(--mdas-small-text-size, 0.79em);
+    color: var(--mdas-text-tertiary, #9ca3af);
+    margin: 0;
+}
+
+/* Error variant of no-data state */
+.${widgetClass} .no-data-state.error-access {
+    color: var(--mdas-color-negative, #dc2626);
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-title {
+    color: var(--mdas-color-negative, #dc2626);
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-icon {
+    opacity: 0.8;
+}
+
+.${widgetClass} .no-data-state.error-access .no-data-icon svg circle[fill] {
+    fill: var(--mdas-color-negative, #dc2626);
+}
+`;
+
     // src/widgets/styles/OptionChainStyles.js
     const OptionChainStyles = `
-${SharedStyles}
+${BaseStyles}
+${getLoadingOverlayStyles('option-chain-widget')}
+${getErrorStyles('option-chain-widget')}
+${getFooterStyles('option-chain-widget')}
+${getNoDataStyles('option-chain-widget')}
 
-/* Base styles remain the same until responsive section */
+/* Option Chain Widget Specific Styles */
 .option-chain-widget {
     border: 1px solid #e5e7eb;
     border-radius: 8px;
@@ -6902,8 +7138,22 @@ ${SharedStyles}
     flex-wrap: wrap;
 }
 
+.option-chain-widget .filter-section {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.option-chain-widget .filter-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+}
+
 .option-chain-widget .symbol-input,
-.option-chain-widget .date-select {
+.option-chain-widget .date-select,
+.option-chain-widget .strike-filter {
     padding: 8px 12px;
     border: 1px solid #d1d5db;
     border-radius: 4px;
@@ -6924,6 +7174,12 @@ ${SharedStyles}
     background: white;
 }
 
+.option-chain-widget .strike-filter {
+    min-width: 200px;
+    background: white;
+    cursor: pointer;
+}
+
 .option-chain-widget .fetch-button {
     padding: 8px 16px;
     background: #3b82f6;
@@ -7079,10 +7335,22 @@ ${SharedStyles}
     min-height: 32px;
 }
 
+/* In-the-money highlighting */
+.option-chain-widget .calls-data.in-the-money span,
+.option-chain-widget .puts-data.in-the-money span {
+    background-color: #fffbeb;
+}
+
 .option-chain-widget .option-row:hover {
     background: #f9fafb;
 }
-    .option-chain-widget .option-row:hover .calls-data span,
+
+.option-chain-widget .option-row:hover .calls-data.in-the-money span,
+.option-chain-widget .option-row:hover .puts-data.in-the-money span {
+    background-color: #fef3c7;
+}
+
+.option-chain-widget .option-row:hover .calls-data span,
 .option-chain-widget .option-row:hover .puts-data span,
 .option-chain-widget .option-row:hover .strike-data {
     background: #f9fafb;
@@ -7106,14 +7374,32 @@ ${SharedStyles}
 .option-chain-widget .puts-data span {
     padding: 6px 4px;
     text-align: center;
-    font-size: 12px; /* Changed from 12px to 14px */
-    font-weight: 400; /* Added to match data values in other widgets */
-    color: #111827; /* Changed from #374151 to match other widgets */
+    font-size: 12px;
+    font-weight: 400;
+    color: #111827;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+/* Override color for change values with positive/negative classes */
+.option-chain-widget .calls-data span.positive,
+.option-chain-widget .puts-data span.positive {
+    color: #059669 !important;
+    font-weight: 500;
+}
+
+.option-chain-widget .calls-data span.negative,
+.option-chain-widget .puts-data span.negative {
+    color: #dc2626 !important;
+    font-weight: 500;
+}
+
+.option-chain-widget .calls-data span.neutral,
+.option-chain-widget .puts-data span.neutral {
+    color: #6b7280 !important;
+}
+
 .option-chain-widget .contract-cell {
     font-size: 10px;
     color: #6b7280;
@@ -7125,78 +7411,42 @@ ${SharedStyles}
     white-space: nowrap;
 }
 
-.option-chain-widget .positive {
-    color: #059669;
-}
-
-.option-chain-widget .negative {
-    color: #dc2626;
-}
-
-.option-chain-widget .neutral {
-    color: #6b7280;
-}
-
-.option-chain-widget .widget-footer {
-    background: #f9fafb;
-    padding: 8px 16px;
-    border-top: 1px solid #e5e7eb;
-    text-align: center;
-    font-size: 11px;
-    color: #6b7280;
+.option-chain-widget .contract-cell.clickable {
+    color: #3b82f6;
+    cursor: pointer;
+    text-decoration: underline;
+    transition: all 0.2s ease;
 }
 
-.option-chain-widget .widget-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
+.option-chain-widget .contract-cell.clickable:hover {
+    color: #2563eb;
+    background-color: #eff6ff;
 }
 
-.option-chain-widget .widget-loading-overlay.hidden {
-    display: none;
+.option-chain-widget .contract-cell.clickable:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 
-.option-chain-widget .loading-content {
-    text-align: center;
+.option-chain-widget .contract-cell.clickable:active {
+    color: #1e40af;
+    background-color: #dbeafe;
 }
 
-.option-chain-widget .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #e5e7eb;
-    border-top: 3px solid #3b82f6;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 12px;
+.option-chain-widget .positive {
+    color: #059669;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.option-chain-widget .negative {
+    color: #dc2626;
 }
 
-.option-chain-widget .no-data-state {
-    padding: 40px;
-    text-align: center;
+.option-chain-widget .neutral {
     color: #6b7280;
 }
 
-.option-chain-widget .widget-error {
-    padding: 20px;
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-    margin: 16px;
-    border-radius: 4px;
-    text-align: center;
-}
+/* Loading, Error, Footer, and No-Data styles provided by CommonWidgetPatterns */
 
 /* RESPONSIVE STYLES */
 
@@ -7207,13 +7457,19 @@ ${SharedStyles}
         align-items: stretch;
         gap: 8px;
     }
-    
+
+    .option-chain-widget .filter-section {
+        flex-direction: row;
+        margin-top: 0;
+    }
+
     .option-chain-widget .symbol-input,
-    .option-chain-widget .date-select {
+    .option-chain-widget .date-select,
+    .option-chain-widget .strike-filter {
         width: 100%;
         max-width: none;
     }
-    
+
     .option-chain-widget .fetch-button {
         width: 100%;
     }
@@ -7369,6 +7625,121 @@ ${SharedStyles}
         padding: 2px 1px;
     }
 }
+
+/* Modal Styles */
+.option-chain-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    padding: 20px;
+    animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.option-chain-modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    max-width: 800px;
+    width: 100%;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.option-chain-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.option-chain-modal-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+}
+
+.option-chain-modal-close {
+    background: none;
+    border: none;
+    font-size: 28px;
+    line-height: 1;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.option-chain-modal-close:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+.option-chain-modal-close:active {
+    background: #e5e7eb;
+}
+
+.option-chain-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+}
+
+/* Responsive modal */
+@media (max-width: 768px) {
+    .option-chain-modal {
+        max-width: 95%;
+        max-height: 95vh;
+    }
+
+    .option-chain-modal-header {
+        padding: 16px;
+    }
+
+    .option-chain-modal-header h3 {
+        font-size: 16px;
+    }
+
+    .option-chain-modal-body {
+        padding: 16px;
+    }
+}
 `;
 
     class OptionChainWidget extends BaseWidget {
@@ -7383,7 +7754,18 @@ ${SharedStyles}
         this.data = null;
         this.isDestroyed = false;
         this.unsubscribe = null;
+        this.unsubscribeUnderlying = null; // For underlying stock price
+        this.underlyingPrice = null; // Current price of underlying stock
         this.loadingTimeout = null;
+        this.renderDebounceTimeout = null; // For debouncing re-renders
+
+        // Separate cache for option chain data and underlying price
+        this.cachedOptionChainData = null;
+        this.cachedUnderlyingPrice = null;
+
+        // Modal for Options widget
+        this.optionsModal = null;
+        this.optionsWidgetInstance = null;
 
         // INPUT VALIDATION: Validate initial symbol if provided
         if (options.symbol) {
@@ -7399,6 +7781,7 @@ ${SharedStyles}
         }
         this.date = '';
         this.availableDates = {};
+        this.strikeFilterRange = 5; // Default: show ±10 strikes from ATM
 
         // RATE LIMITING: Create rate limiter for fetch button (1 second between fetches)
         this.fetchRateLimiter = createRateLimitValidator(1000);
@@ -7429,6 +7812,7 @@ ${SharedStyles}
         this.dateSelect = this.container.querySelector('.date-select');
         this.fetchButton = this.container.querySelector('.fetch-button');
         this.dataGrid = this.container.querySelector('.option-chain-data-grid');
+        this.strikeFilterSelect = this.container.querySelector('.strike-filter');
 
         // Set initial symbol value if provided in options
         if (this.symbol) {
@@ -7503,6 +7887,22 @@ ${SharedStyles}
           }
           this.loadAvailableDates(symbolValidation.sanitized);
         });
+
+        // MEMORY LEAK FIX: Use BaseWidget's addEventListener
+        // Strike filter dropdown
+        this.addEventListener(this.strikeFilterSelect, 'change', e => {
+          const value = e.target.value;
+          if (value === 'all') {
+            this.strikeFilterRange = 'all';
+          } else {
+            this.strikeFilterRange = parseInt(value, 10);
+          }
+
+          // Re-render with new filter if we have data
+          if (this.data) {
+            this.displayOptionChain(this.data);
+          }
+        });
       }
       async loadAvailableDates(symbol) {
         if (!symbol) return;
@@ -7518,7 +7918,9 @@ ${SharedStyles}
           // Use API service from wsManager
           const apiService = this.wsManager.getApiService();
           const data = await apiService.getOptionChainDates(symbol);
-          console.log("Available dates:", data.dates_dictionary);
+          if (this.debug) {
+            console.log('[OptionChainWidget] Available dates:', data.dates_dictionary);
+          }
           this.availableDates = data.dates_dictionary || {};
           this.populateDateOptions();
 
@@ -7612,11 +8014,15 @@ ${SharedStyles}
             this.showError(`No data received for ${this.symbol} on ${this.date}. Please try again.`);
           }, 10000); // 10 second timeout
 
-          // Unsubscribe from previous subscription if exists
+          // Unsubscribe from previous subscriptions if they exist
           if (this.unsubscribe) {
             this.unsubscribe();
             this.unsubscribe = null;
           }
+          if (this.unsubscribeUnderlying) {
+            this.unsubscribeUnderlying();
+            this.unsubscribeUnderlying = null;
+          }
 
           // Subscribe to option chain data
           this.subscribeToData();
@@ -7626,25 +8032,62 @@ ${SharedStyles}
         }
       }
       subscribeToData() {
-        // Subscribe with symbol and date for routing
-        this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryoptionchain'], this.handleMessage.bind(this), this.symbol,
-        // Pass symbol as string
-        {
+        // Subscribe to option chain data
+        this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryoptionchain'], this.handleMessage.bind(this), this.symbol, {
           date: this.date
-        } // Pass date as additional parameter
-        );
+        });
 
-        // Send subscription message with both symbol and date
-        /* this.wsManager.send({
-            type: 'queryoptionchain',
-            underlying: this.symbol,
-            date: this.date
-        }); */
+        // Subscribe to underlying stock price for ITM highlighting
+        this.unsubscribeUnderlying = this.wsManager.subscribe(`${this.widgetId}-underlying`, ['queryl1'], this.handleMessage.bind(this), this.symbol);
+      }
+
+      /**
+       * Find the nearest strike price to the underlying price (ATM strike)
+       * @param {Array} sortedStrikes - Array of strike prices sorted ascending
+       * @param {Number} underlyingPrice - Current price of underlying stock
+       * @returns {String} - The nearest strike price
+       */
+      findNearestStrike(sortedStrikes, underlyingPrice) {
+        if (!sortedStrikes || sortedStrikes.length === 0 || !underlyingPrice) {
+          return null;
+        }
+
+        // Find strike closest to underlying price
+        let nearestStrike = sortedStrikes[0];
+        let minDifference = Math.abs(parseFloat(sortedStrikes[0]) - underlyingPrice);
+        for (const strike of sortedStrikes) {
+          const difference = Math.abs(parseFloat(strike) - underlyingPrice);
+          if (difference < minDifference) {
+            minDifference = difference;
+            nearestStrike = strike;
+          }
+        }
+        return nearestStrike;
+      }
+
+      /**
+       * Filter strikes to show only those near the money
+       * @param {Array} sortedStrikes - Array of strike prices sorted ascending
+       * @param {String} atmStrike - The at-the-money strike price
+       * @param {Number} range - Number of strikes to show above and below ATM
+       * @returns {Array} - Filtered array of strikes
+       */
+      filterNearMoneyStrikes(sortedStrikes, atmStrike, range) {
+        if (!atmStrike || !sortedStrikes || sortedStrikes.length === 0) {
+          return sortedStrikes;
+        }
+        const atmIndex = sortedStrikes.indexOf(atmStrike);
+        if (atmIndex === -1) {
+          return sortedStrikes;
+        }
+        const startIndex = Math.max(0, atmIndex - range);
+        const endIndex = Math.min(sortedStrikes.length - 1, atmIndex + range);
+        return sortedStrikes.slice(startIndex, endIndex + 1);
       }
       handleData(message) {
-        // Clear loading timeout since we received data
+        // Clear loading timeout since we received data (use BaseWidget method)
         if (this.loadingTimeout) {
-          clearTimeout(this.loadingTimeout);
+          this.clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
 
@@ -7676,7 +8119,9 @@ ${SharedStyles}
               }
             }
           } else {
-            this.data = message; // Store for caching
+            // Cache the option chain data
+            this.data = message;
+            this.cachedOptionChainData = message;
             this.displayOptionChain(message);
           }
         } else if (message.type === 'queryoptionchain' && Array.isArray(message.data)) {
@@ -7691,9 +8136,35 @@ ${SharedStyles}
               }
             }
           } else {
-            this.data = message.data; // Store for caching
+            // Cache the option chain data
+            this.data = message.data;
+            this.cachedOptionChainData = message.data;
             this.displayOptionChain(message.data);
           }
+        } else if (message.type === 'queryl1' && message.Data) {
+          if (this.debug) {
+            console.log('[OptionChainWidget] Received underlying price update');
+          }
+          const data = message.Data.find(d => d.Symbol === this.symbol);
+          if (data && data.LastPx) {
+            // Cache the underlying price
+            this.underlyingPrice = parseFloat(data.LastPx);
+            this.cachedUnderlyingPrice = parseFloat(data.LastPx);
+
+            // Debounce re-render to prevent excessive updates
+            // Clear any pending render
+            if (this.renderDebounceTimeout) {
+              this.clearTimeout(this.renderDebounceTimeout);
+            }
+
+            // Schedule a debounced re-render (500ms delay)
+            this.renderDebounceTimeout = this.setTimeout(() => {
+              if (this.data) {
+                this.displayOptionChain(this.data);
+              }
+              this.renderDebounceTimeout = null;
+            }, 500);
+          }
         }
         if (message._cached) {
           this.showConnectionQuality(); // Show cache indicator
@@ -7701,6 +8172,14 @@ ${SharedStyles}
       }
       displayOptionChain(data) {
         if (this.isDestroyed) return;
+
+        // Validate data
+        if (!data || !Array.isArray(data) || data.length === 0) {
+          if (this.debug) {
+            console.warn('[OptionChainWidget] Invalid or empty data passed to displayOptionChain');
+          }
+          return;
+        }
         try {
           // Hide loading overlay
           this.hideLoading();
@@ -7733,9 +8212,18 @@ ${SharedStyles}
             }
           });
 
-          // Sort strikes and display
+          // Sort strikes
           const sortedStrikes = Object.keys(optionsByStrike).sort((a, b) => parseFloat(a) - parseFloat(b));
-          sortedStrikes.forEach(strike => {
+
+          // Apply ATM filter if not showing all
+          let displayStrikes = sortedStrikes;
+          if (this.strikeFilterRange !== 'all' && this.underlyingPrice) {
+            const atmStrike = this.findNearestStrike(sortedStrikes, this.underlyingPrice);
+            if (atmStrike) {
+              displayStrikes = this.filterNearMoneyStrikes(sortedStrikes, atmStrike, this.strikeFilterRange);
+            }
+          }
+          displayStrikes.forEach(strike => {
             const {
               call,
               put
@@ -7754,7 +8242,7 @@ ${SharedStyles}
               const formatted = parseFloat(change).toFixed(2);
               const className = change > 0 ? 'positive' : change < 0 ? 'negative' : 'neutral';
               const sign = change > 0 ? '+' : '';
-              span.className = `option-chain-${className}`;
+              span.className = className;
               span.textContent = `${sign}${formatted}`;
               return span;
             };
@@ -7767,7 +8255,28 @@ ${SharedStyles}
             // Create calls data section
             const callsData = document.createElement('div');
             callsData.className = 'calls-data';
-            callsData.appendChild(createElement('span', call ? sanitizeSymbol(call.symbol) : '--', 'contract-cell'));
+
+            // Add ITM highlighting for calls (ITM when strike < underlying price)
+            if (this.underlyingPrice && parseFloat(strike) < this.underlyingPrice) {
+              callsData.classList.add('in-the-money');
+            }
+
+            // Make contract cell clickable
+            const callContractCell = createElement('span', call ? sanitizeSymbol(call.symbol) : '--', 'contract-cell');
+            if (call && call.symbol) {
+              callContractCell.classList.add('clickable');
+              callContractCell.setAttribute('role', 'button');
+              callContractCell.setAttribute('tabindex', '0');
+              callContractCell.setAttribute('data-symbol', call.symbol);
+              this.addEventListener(callContractCell, 'click', () => this.showOptionsModal(call.symbol));
+              this.addEventListener(callContractCell, 'keypress', e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  this.showOptionsModal(call.symbol);
+                }
+              });
+            }
+            callsData.appendChild(callContractCell);
             callsData.appendChild(createElement('span', formatPrice(call?.lastPrice)));
             const callChangeSpan = document.createElement('span');
             if (call) {
@@ -7790,7 +8299,28 @@ ${SharedStyles}
             // Create puts data section
             const putsData = document.createElement('div');
             putsData.className = 'puts-data';
-            putsData.appendChild(createElement('span', put ? sanitizeSymbol(put.symbol) : '', 'contract-cell'));
+
+            // Add ITM highlighting for puts (ITM when strike > underlying price)
+            if (this.underlyingPrice && parseFloat(strike) > this.underlyingPrice) {
+              putsData.classList.add('in-the-money');
+            }
+
+            // Make contract cell clickable
+            const putContractCell = createElement('span', put ? sanitizeSymbol(put.symbol) : '', 'contract-cell');
+            if (put && put.symbol) {
+              putContractCell.classList.add('clickable');
+              putContractCell.setAttribute('role', 'button');
+              putContractCell.setAttribute('tabindex', '0');
+              putContractCell.setAttribute('data-symbol', put.symbol);
+              this.addEventListener(putContractCell, 'click', () => this.showOptionsModal(put.symbol));
+              this.addEventListener(putContractCell, 'keypress', e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  this.showOptionsModal(put.symbol);
+                }
+              });
+            }
+            putsData.appendChild(putContractCell);
             putsData.appendChild(createElement('span', formatPrice(put?.lastPrice)));
             const putChangeSpan = document.createElement('span');
             if (put) {
@@ -7814,14 +8344,22 @@ ${SharedStyles}
 
           // Add footer - with array length check
           if (data && data.length > 0) {
-            const timestamp = formatTimestampET(data[0].quoteTime || Date.now());
+            const isDelayed = data[0].DataSource === 'OPRA-D';
+
+            // Get timestamp - subtract 20 minutes if delayed data
+            let timestampValue = data[0].quoteTime || Date.now();
+            if (isDelayed) {
+              // Subtract 20 minutes (20 * 60 * 1000 milliseconds)
+              timestampValue = timestampValue - 20 * 60 * 1000;
+            }
+            const timestamp = formatTimestampET(timestampValue);
             const lastUpdateElement = this.container.querySelector('.last-update');
             if (lastUpdateElement) {
               lastUpdateElement.textContent = `Last update: ${timestamp}`;
             }
 
             // Update footer
-            const source = data[0].DataSource === 'OPRA-D' ? '20 mins delayed' : 'Real-time';
+            const source = isDelayed ? '20 mins delayed' : 'Real-time';
             const dataSourceElement = this.container.querySelector('.data-source');
             if (dataSourceElement) {
               dataSourceElement.textContent = `Source: ${source}`;
@@ -7844,35 +8382,6 @@ ${SharedStyles}
           loadingOverlay.classList.add('hidden');
         }
       }
-
-      /* showInputError(message) {
-           const errorDiv = document.createElement('div');
-              errorDiv.className = 'symbol-error-message';
-              errorDiv.textContent = message;
-              errorDiv.style.cssText = `
-                  color: #dc2626;
-                  font-size: 12px;
-                  margin-bottom: 2px;
-                  position: absolute;
-                  background: white;
-                  z-index: 1000;
-                  transform: translateY(-100%);
-                  top: -4px;
-                  left: 0; // Align with input box
-              `;
-          
-          // Ensure the parent is positioned
-          const parent = this.symbolInput;
-          if (parent) {
-              parent.style.position = 'relative';
-              // Insert the errorDiv as the first child of the parent
-              parent.insertBefore(errorDiv, parent.firstChild);
-          }
-          
-          this.symbolInput.errorMessage = errorDiv;
-          this.symbolInput.focus(); 
-       } */
-
       showError(message) {
         this.hideLoading();
         this.clearError();
@@ -7945,19 +8454,135 @@ ${SharedStyles}
           this.container.appendChild(noDataElement);
         }
       }
+
+      /**
+       * Show Options widget in a modal for a specific option contract
+       * @param {string} optionSymbol - The option contract symbol
+       */
+      showOptionsModal(optionSymbol) {
+        if (!optionSymbol || optionSymbol === '--') {
+          return;
+        }
+
+        // Close existing modal if any
+        this.closeOptionsModal();
+
+        // Create modal overlay
+        this.optionsModal = document.createElement('div');
+        this.optionsModal.className = 'option-chain-modal-overlay';
+        this.optionsModal.innerHTML = `
+            <div class="option-chain-modal">
+                <div class="option-chain-modal-header">
+                    <h3>Option Details: ${sanitizeSymbol(optionSymbol)}</h3>
+                    <button class="option-chain-modal-close" aria-label="Close modal">&times;</button>
+                </div>
+                <div class="option-chain-modal-body">
+                    <div id="option-chain-modal-widget"></div>
+                </div>
+            </div>
+        `;
+
+        // Add to body
+        document.body.appendChild(this.optionsModal);
+
+        // Add close event
+        const closeBtn = this.optionsModal.querySelector('.option-chain-modal-close');
+        this.addEventListener(closeBtn, 'click', () => this.closeOptionsModal());
+
+        // Close on overlay click
+        this.addEventListener(this.optionsModal, 'click', e => {
+          if (e.target === this.optionsModal) {
+            this.closeOptionsModal();
+          }
+        });
+
+        // Close on Escape key
+        const escapeHandler = e => {
+          if (e.key === 'Escape') {
+            this.closeOptionsModal();
+          }
+        };
+        document.addEventListener('keydown', escapeHandler);
+        this._escapeHandler = escapeHandler;
+
+        // Create Options widget instance
+        try {
+          const widgetContainer = this.optionsModal.querySelector('#option-chain-modal-widget');
+          this.optionsWidgetInstance = new OptionsWidget(widgetContainer, {
+            symbol: optionSymbol,
+            wsManager: this.wsManager,
+            debug: this.debug,
+            styled: true
+          }, `${this.widgetId}-options-modal`);
+          if (this.debug) {
+            console.log('[OptionChainWidget] Options modal opened for:', optionSymbol);
+          }
+        } catch (error) {
+          console.error('[OptionChainWidget] Error creating Options widget:', error);
+          this.closeOptionsModal();
+          this.showError(`Failed to load option details: ${error.message}`);
+        }
+      }
+
+      /**
+       * Close the Options modal and cleanup
+       */
+      closeOptionsModal() {
+        // Destroy widget instance
+        if (this.optionsWidgetInstance) {
+          this.optionsWidgetInstance.destroy();
+          this.optionsWidgetInstance = null;
+        }
+
+        // Remove modal from DOM
+        if (this.optionsModal) {
+          this.optionsModal.remove();
+          this.optionsModal = null;
+        }
+
+        // Remove escape key handler
+        if (this._escapeHandler) {
+          document.removeEventListener('keydown', this._escapeHandler);
+          this._escapeHandler = null;
+        }
+        if (this.debug) {
+          console.log('[OptionChainWidget] Options modal closed');
+        }
+      }
       destroy() {
         this.isDestroyed = true;
+
+        // Close modal if open
+        this.closeOptionsModal();
         if (this.unsubscribe) {
           this.unsubscribe();
           this.unsubscribe = null;
         }
 
+        // Unsubscribe from underlying price
+        if (this.unsubscribeUnderlying) {
+          this.unsubscribeUnderlying();
+          this.unsubscribeUnderlying = null;
+        }
+
         // MEMORY LEAK FIX: Clear loading timeout using BaseWidget method
         if (this.loadingTimeout) {
           this.clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
 
+        // Clear debounce timeout
+        if (this.renderDebounceTimeout) {
+          this.clearTimeout(this.renderDebounceTimeout);
+          this.renderDebounceTimeout = null;
+        }
+
+        // Clear cached data
+        this.cachedOptionChainData = null;
+        this.cachedUnderlyingPrice = null;
+        this.underlyingPrice = null;
+        this.data = null;
+
         // Call parent destroy for automatic cleanup of event listeners, timeouts, intervals
         super.destroy();
       }
@@ -8043,80 +8668,81 @@ ${SharedStyles}
         font-family: Arial, sans-serif;
     }
 
-    .widget-header {
+    .data-widget .widget-header {
         display: flex;
         flex-direction: column;
         margin-bottom: 10px;
     }
 
-    .symbol {
+    .data-widget .symbol {
         font-size: 24px;
         font-weight: bold;
         margin-right: 10px;
     }
 
-    .company-info {
+    .data-widget .company-info {
         font-size: 12px;
         color: #666;
     }
 
-    .trading-info {
+    .data-widget .trading-info {
         font-size: 12px;
         color: #999;
     }
 
-    .price-section {
+    .data-widget .price-section {
         display: flex;
         align-items: baseline;
         margin-bottom: 10px;
     }
 
-    .current-price {
+    .data-widget .current-price {
         font-size: 36px;
         font-weight: bold;
         margin-right: 10px;
     }
 
-    .price-change {
+    .data-widget .price-change {
         font-size: 18px;
     }
 
-    .price-change.positive {
+    .data-widget .price-change.positive {
         color: green;
     }
 
-    .price-change.negative {
+    .data-widget .price-change.negative {
         color: red;
     }
 
-    .bid-ask-section {
+    .data-widget .bid-ask-section {
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
     }
 
-    .ask, .bid {
+    .data-widget .ask,
+    .data-widget .bid {
         display: flex;
         align-items: center;
     }
 
-    .label {
+    .data-widget .label {
         font-size: 14px;
         margin-right: 5px;
     }
 
-    .value {
+    .data-widget .value {
         font-size: 16px;
         font-weight: bold;
         margin-right: 5px;
     }
 
-    .size {
+    .data-widget .size {
         font-size: 14px;
         color: red;
     }
 
-    .widget-footer {
+    .data-widget .widget-footer {
         font-size: 12px;
         color: #333;
     }
@@ -8527,76 +9153,50 @@ ${SharedStyles}
 
         // Subscribe to regular market data (Level 1)
         // Create a wrapper to add data type context
-        this.unsubscribeMarket = this.wsManager.subscribe(`${this.widgetId}-market`, ['queryl1'], messageWrapper => {
-          const {
-            event,
-            data
-          } = messageWrapper;
-
-          // Handle connection events
-          if (event === 'connection') {
-            this.handleConnectionStatus(data);
-            return;
-          }
-
-          // For data events, add type context and use base handleMessage pattern
-          if (event === 'data') {
-            data._dataType = 'market';
-            this.handleMessage({
-              event,
-              data
-            });
-          }
-        }, this.symbol);
+        this.unsubscribeMarket = this.wsManager.subscribe(`${this.widgetId}-market`, ['queryl1'], this.handleMessage.bind(this), this.symbol);
 
         // Subscribe to night session data (BlueOcean or Bruce)
-        this.unsubscribeNight = this.wsManager.subscribe(`${this.widgetId}-night`, ['queryblueoceanl1'], messageWrapper => {
-          const {
-            event,
-            data
-          } = messageWrapper;
-
-          // Connection already handled by market subscription
-          if (event === 'connection') {
-            return;
-          }
-
-          // For data events, add type context and use base handleMessage pattern
-          if (event === 'data') {
-            data._dataType = 'night';
-            this.handleMessage({
-              event,
-              data
-            });
-          }
-        }, this.symbol);
+        this.unsubscribeNight = this.wsManager.subscribe(`${this.widgetId}-night`, ['queryblueoceanl1'], this.handleMessage.bind(this), this.symbol);
       }
       handleData(message) {
         // Extract data type from metadata
-        const dataType = message._dataType;
+        const dataType = message.type;
         if (this.debug) {
           console.log(`[CombinedMarketWidget] handleData called with type: ${dataType}`, message);
         }
 
-        // Safety check - if no data type, try to infer from structure
-        if (!dataType) {
-          if (this.debug) {
-            console.warn('[CombinedMarketWidget] No data type specified, attempting to infer from structure');
+        // Clear loading timeout since we received data (use BaseWidget method)
+        if (this.loadingTimeout) {
+          this.clearTimeout(this.loadingTimeout);
+          this.loadingTimeout = null;
+        }
+
+        // Handle option chain data
+        if (Array.isArray(message)) {
+          if (message.length === 0) {
+            // Only show no data state if we don't have cached data
+            if (!this.data) {
+              this.showNoDataState();
+            } else {
+              this.hideLoading();
+              if (this.debug) {
+                console.log('[OptionChainWidget] No new data, keeping cached data visible');
+              }
+            }
           }
-          return;
         }
 
         // Handle error messages from server
-        if (message.type === 'error' && message.noData) {
+        if (message.type === 'error' || message.error == true) {
           if (this.debug) {
             console.log(`[CombinedMarketWidget] Received no data message for ${dataType}:`, message.message);
           }
           // Keep existing cached data visible, just hide loading
-          if (dataType === 'market' && !this.marketData) {
+          if (dataType === 'queryl1' && !this.marketData) {
             if (this.debug) {
               console.log('[CombinedMarketWidget] No market data available');
             }
-          } else if (dataType === 'night' && !this.nightSessionData) {
+          } else if (dataType === 'blueoceanl1' && !this.nightSessionData) {
             if (this.debug) {
               console.log('[CombinedMarketWidget] No night session data available');
             }
@@ -9049,7 +9649,7 @@ ${SharedStyles}
         margin: 0 auto;
     }
 
-    .chart-header {
+    .intraday-chart-widget .chart-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -9058,13 +9658,13 @@ ${SharedStyles}
         border-bottom: 1px solid #e5e7eb;
     }
 
-    .chart-title-section {
+    .intraday-chart-widget .chart-title-section {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
 
-    .company-market-info {
+    .intraday-chart-widget .company-market-info {
         display: flex;
         gap: 8px;
         align-items: center;
@@ -9072,18 +9672,18 @@ ${SharedStyles}
         color: #6b7280;
     }
 
-    .intraday-company-name {
+    .intraday-chart-widget .intraday-company-name {
         font-weight: 500;
     }
 
-    .intraday-chart-symbol {
+    .intraday-chart-widget .intraday-chart-symbol {
         font-size: 1.5em;
         font-weight: 700;
         color: #1f2937;
         margin: 0;
     }
 
-    .intraday-chart-source {
+    .intraday-chart-widget .intraday-chart-source {
         font-size: 0.75em;
         padding: 4px 8px;
         border-radius: 4px;
@@ -9092,36 +9692,36 @@ ${SharedStyles}
         font-weight: 600;
     }
 
-    .chart-change {
+    .intraday-chart-widget .chart-change {
         font-size: 1.1em;
         font-weight: 600;
         padding: 6px 12px;
         border-radius: 6px;
     }
 
-    .chart-change.positive {
+    .intraday-chart-widget .chart-change.positive {
         color: #059669;
         background: #d1fae5;
     }
 
-    .chart-change.negative {
+    .intraday-chart-widget .chart-change.negative {
         color: #dc2626;
         background: #fee2e2;
     }
 
-    .chart-controls {
+    .intraday-chart-widget .chart-controls {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 15px;
     }
 
-    .chart-range-selector {
+    .intraday-chart-widget .chart-range-selector {
         display: flex;
         gap: 8px;
     }
 
-    .range-btn {
+    .intraday-chart-widget .range-btn {
         padding: 8px 16px;
         border: 1px solid #e5e7eb;
         background: white;
@@ -9133,28 +9733,28 @@ ${SharedStyles}
         transition: all 0.2s ease;
     }
 
-    .range-btn:hover {
+    .intraday-chart-widget .range-btn:hover {
         background: #f9fafb;
         border-color: #d1d5db;
     }
 
-    .range-btn.active {
+    .intraday-chart-widget .range-btn.active {
         background: #667eea;
         color: white;
         border-color: #667eea;
     }
 
-    .range-btn:focus {
+    .intraday-chart-widget .range-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
 
-    .chart-type-selector {
+    .intraday-chart-widget .chart-type-selector {
         display: flex;
         gap: 8px;
     }
 
-    .type-btn {
+    .intraday-chart-widget .type-btn {
         padding: 8px 16px;
         border: 1px solid #e5e7eb;
         background: white;
@@ -9166,23 +9766,23 @@ ${SharedStyles}
         transition: all 0.2s ease;
     }
 
-    .type-btn:hover {
+    .intraday-chart-widget .type-btn:hover {
         background: #f9fafb;
         border-color: #d1d5db;
     }
 
-    .type-btn.active {
+    .intraday-chart-widget .type-btn.active {
         background: #10b981;
         color: white;
         border-color: #10b981;
     }
 
-    .type-btn:focus {
+    .intraday-chart-widget .type-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
     }
 
-    .zoom-reset-btn {
+    .intraday-chart-widget .zoom-reset-btn {
         display: flex;
         align-items: center;
         gap: 6px;
@@ -9197,34 +9797,34 @@ ${SharedStyles}
         transition: all 0.2s ease;
     }
 
-    .zoom-reset-btn:hover {
+    .intraday-chart-widget .zoom-reset-btn:hover {
         background: #f9fafb;
         border-color: #667eea;
         color: #667eea;
     }
 
-    .zoom-reset-btn:focus {
+    .intraday-chart-widget .zoom-reset-btn:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
 
-    .zoom-reset-btn svg {
+    .intraday-chart-widget .zoom-reset-btn svg {
         flex-shrink: 0;
     }
 
-    .chart-container {
+    .intraday-chart-widget .chart-container {
         height: 500px;
         margin-bottom: 20px;
         position: relative;
     }
 
-    .chart-stats {
+    .intraday-chart-widget .chart-stats {
         padding: 15px;
         background: #f9fafb;
         border-radius: 8px;
     }
 
-    .stats-header {
+    .intraday-chart-widget .stats-header {
         font-size: 0.875em;
         font-weight: 700;
         color: #374151;
@@ -9235,19 +9835,19 @@ ${SharedStyles}
         border-bottom: 2px solid #e5e7eb;
     }
 
-    .stats-grid {
+    .intraday-chart-widget .stats-grid {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 15px;
     }
 
-    .stat-item {
+    .intraday-chart-widget .stat-item {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
 
-    .stat-label {
+    .intraday-chart-widget .stat-label {
         font-size: 0.75em;
         color: #6b7280;
         font-weight: 600;
@@ -9255,13 +9855,13 @@ ${SharedStyles}
         letter-spacing: 0.5px;
     }
 
-    .stat-value {
+    .intraday-chart-widget .stat-value {
         font-size: 1.1em;
         font-weight: 700;
         color: #1f2937;
     }
 
-    .widget-loading-overlay {
+    .intraday-chart-widget .widget-loading-overlay {
         position: absolute;
         top: 0;
         left: 0;
@@ -9280,26 +9880,26 @@ ${SharedStyles}
         backdrop-filter: blur(1px);
     }
 
-    .widget-loading-overlay.hidden {
+    .intraday-chart-widget .widget-loading-overlay.hidden {
         display: none;
     }
 
-    .loading-spinner {
+    .intraday-chart-widget .loading-spinner {
         width: 20px;
         height: 20px;
         border: 3px solid #e5e7eb;
         border-top-color: #667eea;
         border-radius: 50%;
-        animation: spin 0.8s linear infinite;
+        animation: intraday-spin 0.8s linear infinite;
     }
 
-    .loading-text {
+    .intraday-chart-widget .loading-text {
         color: #6b7280;
         font-size: 0.875em;
         font-weight: 500;
     }
 
-    @keyframes spin {
+    @keyframes intraday-spin {
         to { transform: rotate(360deg); }
     }
 
@@ -9309,26 +9909,26 @@ ${SharedStyles}
             padding: 15px;
         }
 
-        .stats-grid {
+        .intraday-chart-widget .stats-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
         }
 
-        .stats-header {
+        .intraday-chart-widget .stats-header {
             font-size: 0.8em;
             margin-bottom: 10px;
         }
 
-        .chart-container {
+        .intraday-chart-widget .chart-container {
             height: 350px;
         }
 
-        .intraday-chart-symbol {
+        .intraday-chart-widget .intraday-chart-symbol {
             font-size: 1.2em;
         }
     }
 
-    .widget-error {
+    .intraday-chart-widget .widget-error {
         padding: 15px;
         background: #fee2e2;
         border: 1px solid #fecaca;
@@ -38704,7 +39304,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();
@@ -38712,38 +39325,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) {
@@ -39167,19 +39748,12 @@ ${SharedStyles}
         // Handle array format (standard night session format)
         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');
@@ -40282,7 +40856,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(() => {
@@ -40294,36 +40880,6 @@ ${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');
-            }
-            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
-              });
-            }
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.warn('[ONBBO L2] Initial symbol validation failed:', error);
-          }
-          // Don't throw - let the widget continue with WebSocket data
-        }
-      }
       subscribeToData() {
         // Subscribe to ONBBO Level 2 data (order book)
         // Use separate widget IDs to avoid "already active" duplicate detection
@@ -40842,6 +41398,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;
@@ -40853,6 +41410,7 @@ ${SharedStyles}
 
         // Create widget structure
         this.createWidgetStructure();
+        this.initializeSymbolEditor();
 
         // Initialize the widget
         this.initialize();
@@ -40869,7 +41427,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
@@ -40892,6 +41469,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;
@@ -40994,7 +41573,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(() => {
@@ -41007,36 +41598,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'],
@@ -41052,6 +41613,9 @@ ${SharedStyles}
           clearTimeout(this.loadingTimeout);
           this.loadingTimeout = null;
         }
+        if (message.type != 'queryonbbotimesale') {
+          return;
+        }
 
         // Handle error messages
         if (message.type === 'error') {
@@ -41064,30 +41628,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);
         }
@@ -41314,7 +41864,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) {
@@ -42074,8 +42632,8 @@ ${SharedStyles}
        */
       _normalizeMessage(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
@@ -42115,54 +42673,16 @@ ${SharedStyles}
           }
         }
 
-        // 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
-            };
-          }
-
-          // Only add type field if the normalized data doesn't already have one
-          if (typeof normalizedData === 'object' && !normalizedData.type && !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);
@@ -42261,27 +42781,34 @@ ${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 if (item.data && item.data[0] && item.data[0].Strike !== undefined && item.data[0].Expire && !item.data[0].underlyingSymbol) {
+          this._processOptionChainData(item.data, relevantWidgets);
         } else {
-          // Process single item
-          this._processDataItem(item, relevantWidgets);
+          // Process single item - messageType already extracted from message
+          this._processDataItem(item, relevantWidgets, messageType);
         }
       }
 
       // Simplified option chain processing - handle entire array at once
       _processOptionChainData(optionChainArray, relevantWidgets) {
+        //console.log('PROCESSING DATA OPTIONS')
         if (!optionChainArray || optionChainArray.length === 0) return;
         // Extract underlying symbol and date from first option contract
         const firstOption = optionChainArray[0];
@@ -42320,12 +42847,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,
@@ -42485,25 +43011,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