mdas-jsview-sdk 1.0.21-uat.0 → 1.0.26-uat.0

package/dist/mdas-sdk.esm.js

@@ -406,6 +406,85 @@ class BaseWidget {
       console.log(`[${this.constructor.name}] Connection failed after ${status.maxAttempts} attempts`);
     }
   }
+
+  /**
+   * Validate initial symbol with the API and handle access/permission errors
+   * This is a reusable method for all widgets that need to validate symbols on initialization
+   *
+   * @param {string} apiMethod - The API method name to call (e.g., 'quotel1', 'quoteOptionl1')
+   * @param {string} symbol - The symbol to validate
+   * @param {Function} onSuccess - Callback when validation succeeds with data, receives (data, result)
+   * @returns {boolean} - Returns false if access denied (stops initialization), true otherwise
+   */
+  async validateInitialSymbol(apiMethod, symbol) {
+    let onSuccess = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    try {
+      const apiService = this.wsManager?.getApiService();
+      if (!apiService) {
+        if (this.debug) {
+          console.log(`[${this.constructor.name}] API service not available for initial validation`);
+        }
+        return true; // Continue without validation
+      }
+      if (!apiService[apiMethod]) {
+        console.error(`[${this.constructor.name}] API method ${apiMethod} does not exist`);
+        return true; // Continue without validation
+      }
+      const result = await apiService[apiMethod](symbol);
+      if (result && result.data && result.data.length > 0) {
+        if (this.debug) {
+          console.log(`[${this.constructor.name}] Initial symbol validated:`, {
+            symbol,
+            method: apiMethod,
+            dataCount: result.data.length
+          });
+        }
+
+        // Call success callback if provided
+        if (onSuccess && typeof onSuccess === 'function') {
+          onSuccess(result.data, result);
+        }
+        return true; // Validation successful
+      }
+
+      // No data returned - might be access issue, but continue anyway
+      if (this.debug) {
+        console.log(`[${this.constructor.name}] No data returned from ${apiMethod} for ${symbol}`);
+      }
+      return true; // Continue anyway, WebSocket might still work
+    } catch (error) {
+      if (this.debug) {
+        console.warn(`[${this.constructor.name}] Initial symbol validation failed:`, error);
+      }
+
+      // Check if it's an access/permission error
+      const errorMessage = (error.message || '').toLowerCase();
+      const isAccessError = errorMessage.includes('400') ||
+      // Bad Request (often used for access issues)
+      errorMessage.includes('401') ||
+      // Unauthorized
+      errorMessage.includes('403') ||
+      // Forbidden
+      errorMessage.includes('forbidden') || errorMessage.includes('unauthorized') || errorMessage.includes('no access') || errorMessage.includes('no opra access') ||
+      // Specific OPRA access denial
+      errorMessage.includes('permission denied') || errorMessage.includes('access denied');
+      if (isAccessError) {
+        // Hide loading and show access error
+        this.hideLoading();
+
+        // Extract more specific error message if available
+        let userMessage = `Access denied: You don't have permission to view data for ${symbol}`;
+        if (errorMessage.includes('no opra access')) {
+          userMessage = `Access denied: You don't have OPRA access for option ${symbol}`;
+        }
+        this.showError(userMessage);
+        return false; // Stop initialization
+      }
+
+      // For other errors, continue with WebSocket (might still work)
+      return true;
+    }
+  }
 }
 
 // src/models/MarketDataModel.js
@@ -2504,28 +2583,6 @@ const TimeSalesStyles = `
     font-size: 1.71em;
     font-weight: 700;
     color: #111827;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.time-sales-widget .symbol.editable-symbol:hover {
-    opacity: 0.8;
-    transform: scale(1.02);
-}
-
-.time-sales-widget .symbol.editable-symbol:hover::after {
-    content: "✎";
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background: #3b82f6;
-    color: white;
-    font-size: 10px;
-    padding: 2px 4px;
-    border-radius: 4px;
-    opacity: 0.8;
-    pointer-events: none;
 }
 
 /* ========================================
@@ -2800,8 +2857,36 @@ const TimeSalesStyles = `
 }
 `;
 
+/**
+ * @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
        ======================================== */
@@ -4477,99 +4562,46 @@ class MarketDataWidget extends BaseWidget {
     this.showLoading();
 
     // Validate initial symbol via API to get company info
-    await this.validateInitialSymbol();
-    this.subscribeToData();
-  }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[MarketDataWidget] API service not available for initial validation');
-        }
-        return;
+    // Uses BaseWidget's validateInitialSymbol method with callback for extracting data
+    const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+      // Store for use in updateWidget
+      if (data && data[0]) {
+        this.initialValidationData = data[0];
       }
-      const result = await apiService.quotel1(this.symbol);
-      if (result && result.data && result.data[0]) {
-        const symbolData = result.data[0];
-        // Store for use in updateWidget
-        this.initialValidationData = symbolData;
-        if (this.debug) {
-          console.log('[MarketDataWidget] Initial symbol validated:', {
-            symbol: this.symbol,
-            companyName: symbolData.comp_name,
-            exchangeName: symbolData.market_name
-          });
-        }
-      }
-    } catch (error) {
-      if (this.debug) {
-        console.warn('[MarketDataWidget] Initial symbol validation failed:', error);
-      }
-      // Don't throw - let the widget continue with WebSocket data
+    });
+
+    // If validation failed due to access/permission issues, stop initialization
+    if (validationSuccess === false) {
+      return; // Error is already shown, don't continue
     }
+    this.subscribeToData();
   }
   subscribeToData() {
     // Subscribe with symbol for routing
     this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryl1'], this.handleMessage.bind(this), this.symbol // Pass symbol for routing
     );
-
-    // Send subscription message
-    /* this.wsManager.send({
-        type: 'queryl1',
-        symbol: this.symbol
-    }); */
   }
+  handleData(message) {
+    //console.log('DEBUG', message)
 
-  /* handleMessage(messageWrapper) {
-      if (this.isDestroyed) return;
-       try {
-          const { event, data } = messageWrapper;
-           if (this.debug) {
-              console.log('[MarketDataWidget] Received:', event, data);
-          }
-           if (event === 'connection') {
-              this.handleConnectionStatus(data);
-              return;
-          }
-           if (event === 'data') {
-              this.handleData(data);
-          }
-           if (event === 'session_revoked') {
-              if (data.status === 'attempting_relogin') {
-                  this.showLoading();
-              } else if (data.status === 'relogin_failed') {
-                  this.showError(data.error);
-              } else if (data.status === 'relogin_successful') {
-                  this.hideLoading();
-              }
-              return;
-          }
-      } catch (error) {
-          console.error('[MarketDataWidget] Error handling message:', error);
-          this.showError('Error processing data');
+    // Check for error: false and display message if present
+    if (message.error === true) {
+      if (this.debug) {
+        console.log('[MarketDataWidget] Received error response:', message.message);
       }
-  } */
+      const errorMsg = message.message || message.Message;
 
-  /* handleConnectionStatus(status) {
-      if (status.status === 'connected') {
-          if (this.debug) {
-              console.log('[MarketDataWidget] Connected to WebSocket');
-          }
-          // Re-send subscription when reconnected
-          this.wsManager.send({
-              type: 'queryl1',
-              symbol: this.symbol
-          });
-      } else if (status.status === 'disconnected') {
-          this.showError('Disconnected from data service');
-      } else if (status.status === 'error') {
-          this.showError(status.error || 'Connection error');
+      // If there's a message field, show it as an error
+      if (errorMsg) {
+        this.hideLoading();
+        this.showError(errorMsg);
+        return;
       }
-  } */
-
-  handleData(message) {
-    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;
@@ -4655,126 +4687,6 @@ class MarketDataWidget extends BaseWidget {
       this.showConnectionQuality(); // Show cache indicator
     }
   }
-  showNoDataState() {
-    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (this.isDestroyed) return;
-    try {
-      // Hide loading overlay
-      this.hideLoading();
-
-      // Clear any existing errors
-      this.clearError();
-
-      // Update header with dimmed styling and basic info from data
-      const symbol = data.Symbol || this.symbol;
-
-      // Add null checks for all DOM elements
-      const symbolElement = this.container.querySelector('.symbol');
-      if (symbolElement) {
-        symbolElement.textContent = symbol;
-      }
-      const companyNameElement = this.container.querySelector('.company-name');
-      if (companyNameElement) {
-        companyNameElement.textContent = `${symbol} Inc`;
-      }
-
-      // Set price to $0.00 and add dimmed class
-      const currentPriceElement = this.container.querySelector('.current-price');
-      if (currentPriceElement) {
-        currentPriceElement.textContent = '$0.00';
-      }
-      const changeElement = this.container.querySelector('.price-change');
-      if (changeElement) {
-        const changeValueElement = changeElement.querySelector('.change-value');
-        const changePercentElement = changeElement.querySelector('.change-percent');
-        if (changeValueElement) {
-          changeValueElement.textContent = '+0.00';
-        }
-        if (changePercentElement) {
-          changePercentElement.textContent = ' (0.00%)';
-        }
-        changeElement.classList.remove('positive', 'negative');
-        changeElement.classList.add('neutral');
-      }
-
-      // Add dimmed styling to header
-      const widgetHeader = this.container.querySelector('.widget-header');
-      if (widgetHeader) {
-        widgetHeader.classList.add('dimmed');
-      }
-
-      // Replace the data grid with no data message
-      this.showNoDataMessage(symbol, data);
-
-      // Update footer with current timestamp
-      const lastUpdateElement = this.container.querySelector('.last-update');
-      if (lastUpdateElement) {
-        const timestamp = formatTimestampET();
-        lastUpdateElement.textContent = `Checked: ${timestamp}`;
-      }
-      const dataSourceElement = this.container.querySelector('.data-source');
-      if (dataSourceElement) {
-        dataSourceElement.textContent = 'Source: No data available';
-      }
-    } catch (error) {
-      console.error('Error showing no data state:', error);
-      this.showError('Error displaying no data state');
-    }
-  }
-  showNoDataMessage(symbol) {
-    const dataGrid = this.container.querySelector('.data-grid');
-
-    // Hide the data grid if it exists
-    if (dataGrid) {
-      dataGrid.style.display = 'none';
-    }
-
-    // Remove existing no data message if present
-    const existingNoData = this.container.querySelector('.no-data-state');
-    if (existingNoData) {
-      existingNoData.remove();
-    }
-
-    // Create no data message element - safely without XSS risk
-    const noDataElement = createElement('div', '', 'no-data-state');
-    const noDataContent = createElement('div', '', 'no-data-content');
-
-    // Create icon
-    const iconDiv = document.createElement('div');
-    iconDiv.className = 'no-data-icon';
-    iconDiv.innerHTML = `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="12" r="10" stroke="#9ca3af" stroke-width="2"/>
-            <path d="M12 8v4" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"/>
-            <circle cx="12" cy="16" r="1" fill="#9ca3af"/>
-        </svg>`;
-    noDataContent.appendChild(iconDiv);
-
-    // Create title
-    const title = createElement('h3', 'No Market Data', 'no-data-title');
-    noDataContent.appendChild(title);
-
-    // Create description with sanitized symbol
-    const description = createElement('p', '', 'no-data-description');
-    description.appendChild(document.createTextNode('Market data for '));
-    const symbolStrong = createElement('strong', sanitizeSymbol(symbol));
-    description.appendChild(symbolStrong);
-    description.appendChild(document.createTextNode(' was not found'));
-    noDataContent.appendChild(description);
-
-    // Create guidance
-    const guidance = createElement('p', 'Please check the symbol spelling or try a different symbol', 'no-data-guidance');
-    noDataContent.appendChild(guidance);
-    noDataElement.appendChild(noDataContent);
-
-    // Insert before footer, with null check
-    const footer = this.container.querySelector('.widget-footer');
-    if (footer && footer.parentNode) {
-      footer.parentNode.insertBefore(noDataElement, footer);
-    } else {
-      // Fallback: append to container if footer not found
-      this.container.appendChild(noDataElement);
-    }
-  }
   updateWidget(data) {
     if (this.isDestroyed) return;
     try {
@@ -5279,7 +5191,20 @@ class NightSessionWidget extends BaseWidget {
     this.showLoading();
 
     // Validate initial symbol via API to get company info
-    await this.validateInitialSymbol();
+    // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+    const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+      // Extract company info from first data item
+      if (data && data[0]) {
+        this.companyName = data[0].comp_name || '';
+        this.exchangeName = data[0].market_name || '';
+        this.mic = data[0].mic || '';
+      }
+    });
+
+    // If validation failed due to access/permission issues, stop initialization
+    if (validationSuccess === false) {
+      return; // Error is already shown, don't continue
+    }
 
     // Set timeout to detect no data on initial load
     this.loadingTimeout = setTimeout(() => {
@@ -5296,38 +5221,6 @@ class NightSessionWidget extends BaseWidget {
 
     this.subscribeToData();
   }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[NightSessionWidget] API service not available for initial validation');
-        }
-        return;
-      }
-      const result = await apiService.quotel1(this.symbol);
-      if (result && result.data && result.data[0]) {
-        const symbolData = result.data[0];
-        // Extract company info
-        this.companyName = symbolData.comp_name || '';
-        this.exchangeName = symbolData.market_name || '';
-        this.mic = symbolData.mic || '';
-        if (this.debug) {
-          console.log('[NightSessionWidget] Initial symbol validated:', {
-            symbol: this.symbol,
-            companyName: this.companyName,
-            exchangeName: this.exchangeName,
-            mic: this.mic
-          });
-        }
-      }
-    } catch (error) {
-      if (this.debug) {
-        console.warn('[NightSessionWidget] Initial symbol validation failed:', error);
-      }
-      // Don't throw - let the widget continue with WebSocket data
-    }
-  }
   subscribeToData() {
     let subscriptionType;
     if (this.source === 'bruce') {
@@ -5347,6 +5240,7 @@ class NightSessionWidget extends BaseWidget {
   }
   handleData(message) {
     console.log('DEBUG NIGHT', message);
+
     //message = message.data || message.Data
 
     if (this.loadingTimeout) {
@@ -5354,64 +5248,41 @@ class NightSessionWidget extends BaseWidget {
       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);
@@ -6312,36 +6183,20 @@ class OptionsWidget extends BaseWidget {
     this.showLoading();
 
     // Validate initial symbol via API to get symbol info
-    await this.validateInitialSymbol();
-    this.subscribeToData();
-  }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[OptionsWidget] API service not available for initial validation');
-        }
-        return;
-      }
-      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
@@ -6811,6 +6666,15 @@ const OptionChainTemplate = `
                     </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 -->
@@ -6867,11 +6731,383 @@ const OptionChainTemplate = `
     </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;
@@ -6896,8 +7132,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;
@@ -6918,6 +7168,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;
@@ -7073,10 +7329,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;
@@ -7100,14 +7368,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;
@@ -7119,78 +7405,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 */
 
@@ -7201,13 +7451,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%;
     }
@@ -7363,6 +7619,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 {
@@ -7377,7 +7748,18 @@ class OptionChainWidget extends BaseWidget {
     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) {
@@ -7393,6 +7775,7 @@ class OptionChainWidget extends BaseWidget {
     }
     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);
@@ -7423,6 +7806,7 @@ class OptionChainWidget extends BaseWidget {
     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) {
@@ -7497,6 +7881,22 @@ class OptionChainWidget extends BaseWidget {
       }
       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;
@@ -7512,7 +7912,9 @@ class OptionChainWidget extends BaseWidget {
       // 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();
 
@@ -7606,11 +8008,15 @@ class OptionChainWidget extends BaseWidget {
         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();
@@ -7620,25 +8026,62 @@ class OptionChainWidget extends BaseWidget {
     }
   }
   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;
     }
 
@@ -7670,7 +8113,9 @@ class OptionChainWidget extends BaseWidget {
           }
         }
       } 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)) {
@@ -7685,9 +8130,35 @@ class OptionChainWidget extends BaseWidget {
           }
         }
       } 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
@@ -7695,6 +8166,14 @@ class OptionChainWidget extends BaseWidget {
   }
   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();
@@ -7727,9 +8206,18 @@ class OptionChainWidget extends BaseWidget {
         }
       });
 
-      // 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
@@ -7748,7 +8236,7 @@ class OptionChainWidget extends BaseWidget {
           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;
         };
@@ -7761,7 +8249,28 @@ class OptionChainWidget extends BaseWidget {
         // 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) {
@@ -7784,7 +8293,28 @@ class OptionChainWidget extends BaseWidget {
         // 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) {
@@ -7808,14 +8338,22 @@ class OptionChainWidget extends BaseWidget {
 
       // 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}`;
@@ -7838,35 +8376,6 @@ class OptionChainWidget extends BaseWidget {
       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();
@@ -7939,19 +8448,135 @@ class OptionChainWidget extends BaseWidget {
       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();
   }
@@ -8037,80 +8662,81 @@ const DataStyles = `
         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;
     }
@@ -8521,76 +9147,50 @@ class CombinedMarketWidget extends BaseWidget {
 
     // 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');
         }
@@ -9043,7 +9643,7 @@ const IntradayChartStyles = `
         margin: 0 auto;
     }
 
-    .chart-header {
+    .intraday-chart-widget .chart-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -9052,13 +9652,13 @@ const IntradayChartStyles = `
         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;
@@ -9066,18 +9666,18 @@ const IntradayChartStyles = `
         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;
@@ -9086,36 +9686,36 @@ const IntradayChartStyles = `
         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;
@@ -9127,28 +9727,28 @@ const IntradayChartStyles = `
         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;
@@ -9160,23 +9760,23 @@ const IntradayChartStyles = `
         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;
@@ -9191,34 +9791,34 @@ const IntradayChartStyles = `
         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;
@@ -9229,19 +9829,19 @@ const IntradayChartStyles = `
         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;
@@ -9249,13 +9849,13 @@ const IntradayChartStyles = `
         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;
@@ -9274,26 +9874,26 @@ const IntradayChartStyles = `
         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); }
     }
 
@@ -9303,26 +9903,26 @@ const IntradayChartStyles = `
             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;
@@ -38698,7 +39298,20 @@ class IntradayChartWidget extends BaseWidget {
   }
   async initialize() {
     // Validate initial symbol via API to get company info
-    await this.validateInitialSymbol();
+    // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+    const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+      // Extract company info from first data item
+      if (data && data[0]) {
+        this.companyName = data[0].comp_name || '';
+        this.exchangeName = data[0].market_name || '';
+        this.mic = data[0].mic || '';
+      }
+    });
+
+    // If validation failed due to access/permission issues, stop initialization
+    if (validationSuccess === false) {
+      return; // Error is already shown, don't continue
+    }
 
     // Update company name in the header
     this.updateCompanyName();
@@ -38706,38 +39319,6 @@ class IntradayChartWidget extends BaseWidget {
     // Load chart data
     await this.loadChartData();
   }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[IntradayChartWidget] API service not available for initial validation');
-        }
-        return;
-      }
-      const result = await apiService.quotel1(this.symbol);
-      if (result && result.data && result.data[0]) {
-        const symbolData = result.data[0];
-        // Extract company info
-        this.companyName = symbolData.comp_name || '';
-        this.exchangeName = symbolData.market_name || '';
-        this.mic = symbolData.mic || '';
-        if (this.debug) {
-          console.log('[IntradayChartWidget] Initial symbol validated:', {
-            symbol: this.symbol,
-            companyName: this.companyName,
-            exchangeName: this.exchangeName,
-            mic: this.mic
-          });
-        }
-      }
-    } catch (error) {
-      if (this.debug) {
-        console.warn('[IntradayChartWidget] Initial symbol validation failed:', error);
-      }
-      // Don't throw - let the widget continue with chart data
-    }
-  }
   updateCompanyName() {
     const companyNameElement = this.container.querySelector('.intraday-company-name');
     if (companyNameElement) {
@@ -39161,19 +39742,12 @@ class IntradayChartWidget extends BaseWidget {
     // 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');
@@ -40276,7 +40850,19 @@ class ONBBOLevel2Widget extends BaseWidget {
     this.showLoading();
 
     // Fetch company info for initial symbol
-    await this.validateInitialSymbol();
+    // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+    const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+      // Extract company info from first data item
+      if (data && data[0]) {
+        this.companyName = data[0].comp_name || '';
+        this.exchangeName = data[0].market_name || '';
+      }
+    });
+
+    // If validation failed due to access/permission issues, stop initialization
+    if (validationSuccess === false) {
+      return; // Error is already shown, don't continue
+    }
 
     // Set timeout to detect no data on initial load
     this.loadingTimeout = setTimeout(() => {
@@ -40288,36 +40874,6 @@ class ONBBOLevel2Widget extends BaseWidget {
     }, 10000);
     this.subscribeToData();
   }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[ONBBO L2] API service not available for initial validation');
-        }
-        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
@@ -40836,6 +41392,7 @@ class TimeSalesWidget extends BaseWidget {
     this.styled = options.styled !== undefined ? options.styled : true;
     this.maxTrades = options.maxTrades || 20; // Maximum number of trades to display
     this.data = new TimeSalesModel([], this.maxTrades);
+    this.data.symbol = this.symbol; // Set the symbol in the data model
     this.isDestroyed = false;
     this.unsubscribe = null;
     this.symbolEditor = null;
@@ -40847,6 +41404,7 @@ class TimeSalesWidget extends BaseWidget {
 
     // Create widget structure
     this.createWidgetStructure();
+    this.initializeSymbolEditor();
 
     // Initialize the widget
     this.initialize();
@@ -40863,7 +41421,26 @@ class TimeSalesWidget extends BaseWidget {
       }
     }
     this.addStyles();
-    this.setupSymbolEditor();
+    //this.setupSymbolEditor();
+  }
+  initializeSymbolEditor() {
+    // Initialize symbol editor with stock symbol validation
+    this.symbolEditor = new SymbolEditor(this, {
+      maxLength: 10,
+      placeholder: 'Enter symbol...',
+      //validator: this.validateStockSymbol.bind(this),
+      onSymbolChange: this.handleSymbolChange.bind(this),
+      debug: this.debug,
+      autoUppercase: true,
+      symbolType: 'quotel1'
+    });
+
+    // Set initial symbol
+    const symbolElement = this.container.querySelector('.symbol');
+    if (symbolElement) {
+      symbolElement.textContent = this.symbol;
+      symbolElement.dataset.originalSymbol = this.symbol;
+    }
   }
   addStyles() {
     // Inject styles from the styles file into document head
@@ -40886,6 +41463,8 @@ class TimeSalesWidget extends BaseWidget {
       // Keep editor open when clicking buttons
       symbolType: 'quotel1' // Use standard quote validation
     });
+
+    //console.log('SETUP COMPLETE')
   }
   async handleSymbolChange(newSymbol, oldSymbol) {
     let validationData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -40988,7 +41567,19 @@ class TimeSalesWidget extends BaseWidget {
     this.showLoading();
 
     // Validate initial symbol via API to get company info
-    await this.validateInitialSymbol();
+    // Uses BaseWidget's validateInitialSymbol method with callback for extracting company info
+    const validationSuccess = await super.validateInitialSymbol('quotel1', this.symbol, data => {
+      // Extract company info from first data item
+      if (data && data[0]) {
+        this.companyName = data[0].comp_name || '';
+        this.exchangeName = data[0].market_name || '';
+      }
+    });
+
+    // If validation failed due to access/permission issues, stop initialization
+    if (validationSuccess === false) {
+      return; // Error is already shown, don't continue
+    }
 
     // Set timeout to detect no data on initial load
     this.loadingTimeout = setTimeout(() => {
@@ -41001,36 +41592,6 @@ class TimeSalesWidget extends BaseWidget {
 
     this.subscribeToData();
   }
-  async validateInitialSymbol() {
-    try {
-      const apiService = this.wsManager.getApiService();
-      if (!apiService) {
-        if (this.debug) {
-          console.log('[TimeSalesWidget] API service not available for initial validation');
-        }
-        return;
-      }
-      const result = await apiService.quotel1(this.symbol);
-      if (result && result.data && result.data[0]) {
-        const symbolData = result.data[0];
-        // Extract company info
-        this.companyName = symbolData.comp_name || '';
-        this.exchangeName = symbolData.market_name || '';
-        if (this.debug) {
-          console.log('[TimeSalesWidget] Initial symbol validated:', {
-            symbol: this.symbol,
-            companyName: this.companyName,
-            exchangeName: this.exchangeName
-          });
-        }
-      }
-    } catch (error) {
-      if (this.debug) {
-        console.warn('[TimeSalesWidget] Initial symbol validation failed:', error);
-      }
-      // Don't throw - let the widget continue with WebSocket data
-    }
-  }
   subscribeToData() {
     // Subscribe to Time & Sales data (using queryonbbotimesale)
     this.unsubscribe = this.wsManager.subscribe(this.widgetId, ['queryonbbotimesale'],
@@ -41046,6 +41607,9 @@ class TimeSalesWidget extends BaseWidget {
       clearTimeout(this.loadingTimeout);
       this.loadingTimeout = null;
     }
+    if (message.type != 'queryonbbotimesale') {
+      return;
+    }
 
     // Handle error messages
     if (message.type === 'error') {
@@ -41058,30 +41622,16 @@ class TimeSalesWidget extends BaseWidget {
     }
 
     // Handle Time & Sales data - Array of trades
-    if (Array.isArray(message)) {
+    if (Array.isArray(message.data)) {
       if (this.debug) {
         console.log('[TimeSalesWidget] Received trades array:', message);
       }
 
       // Add new trades to existing data
-      this.data.addTrades(message);
+      this.data.addTrades(message.data);
       this.updateWidget();
       return;
     }
-
-    // Handle wrapped format
-    if ((message.type === 'queryonbbotimesale' || message.type === 'querytns') && message['0']) {
-      if (Array.isArray(message['0'])) {
-        if (this.debug) {
-          console.log('[TimeSalesWidget] Received wrapped trades array:', message['0']);
-        }
-
-        // Add new trades to existing data
-        this.data.addTrades(message['0']);
-        this.updateWidget();
-        return;
-      }
-    }
     if (this.debug) {
       console.log('[TimeSalesWidget] Unexpected message format:', message);
     }
@@ -41308,7 +41858,15 @@ class ApiService {
     try {
       const response = await fetch(url, config);
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        // Try to get response body for error details
+        let errorBody = '';
+        try {
+          errorBody = await response.text();
+          console.error(`[ApiService] HTTP ${response.status} - Response body:`, errorBody);
+        } catch (e) {
+          console.error(`[ApiService] Could not read error response body:`, e);
+        }
+        throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
       }
       return await response.json();
     } catch (error) {
@@ -42068,8 +42626,8 @@ class WebSocketManager {
    */
   _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
@@ -42109,54 +42667,16 @@ class WebSocketManager {
       }
     }
 
-    // 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);
@@ -42255,27 +42775,34 @@ class WebSocketManager {
   _getRelevantWidgets(message) {
     const relevantWidgets = new Set();
 
+    // OPTIMIZATION: Extract message type once from the entire message, not from each data item
+    // Message structure: { type: 'queryoptionchain', data: [] }
+    let dataField = message.Data || message.data;
+    const messageType = message.type || this._extractMessageType(dataField);
+
     // Handle array messages
-    this._addRelevantWidgetsForItem(message, relevantWidgets);
+    this._addRelevantWidgetsForItem(message, relevantWidgets, messageType);
     return relevantWidgets;
   }
-  _addRelevantWidgetsForItem(item, relevantWidgets) {
+  _addRelevantWidgetsForItem(item, relevantWidgets, messageType) {
     // If item has Data array, process it
     if (item.Data && Array.isArray(item.Data)) {
       //console.log('Data array found with length:', item.Data.length);
       item.Data.forEach(dataItem => {
-        this._processDataItem(dataItem, relevantWidgets);
+        // Pass messageType from parent message, don't extract from each data item
+        this._processDataItem(dataItem, relevantWidgets, messageType);
       });
-    } else if (item && item[0] && item[0].Strike !== undefined && item[0].Expire && !item[0].underlyingSymbol) {
-      this._processOptionChainData(item, relevantWidgets);
+    } else 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];
@@ -42314,12 +42841,11 @@ class WebSocketManager {
       }
     }
   }
-  _processDataItem(dataItem, relevantWidgets) {
+  _processDataItem(dataItem, relevantWidgets, messageType) {
     // Process individual data items and route to appropriate widgets
     // Option chain arrays are handled separately by _processOptionChainData
 
     const symbol = this._extractSymbol(dataItem);
-    const messageType = this._extractMessageType(dataItem);
     if (this.config.debug) {
       console.log('[WebSocketManager] Processing data item:', {
         symbol,
@@ -42479,25 +43005,15 @@ class WebSocketManager {
     return symbolMappings[extracted] || extracted;
   }
   _extractMessageType(item) {
-    // Check for _messageType field added by normalization (from new format)
-    if (item._messageType) {
-      return item._messageType;
-    }
-
-    // Determine message type based on content
-    if (item.type) return item.type;
-
-    // Infer type from data structure
+    // FALLBACK: Infer type from data structure (for legacy/malformed messages)
 
     // IMPORTANT: Check for MMID field FIRST to distinguish ONBBO L2 from L1
     // Level 2 ONBBO data - array of MMID objects or object with MMID field
     if (Array.isArray(item) && item.length > 0 && item[0].MMID !== undefined) {
       return 'queryonbbol2';
     }
-
-    // Check for single MMID object
-    if (item.MMID !== undefined) {
-      return 'queryonbbol2';
+    if (Array.isArray(item) && item.length > 0 && item[0].Strike !== undefined) {
+      return 'queryoptionchain';
     }
 
     // Check for Source field AFTER MMID check