Fix indicator update callbacks and card display after refactor

- Bind indicators.update callback to correct this context in general.js
- Update updateDisplay to fall back to card elements when old chart elements don't exist
- Add _formatDisplayValue helper for consistent value formatting
- Remove verbose debug console.log statements
- Add FORMATIONS_PLAN.md documenting SVG overlay approach for chart formations

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/static/general.js

@@ -15,7 +15,7 @@ class User_Interface {
         this.account = new Account();
 
         // Register a callback function for when indicator updates are received from the data object
-        this.data.registerCallback_i_updates(this.indicators.update);
+        this.data.registerCallback_i_updates(this.indicators.update.bind(this.indicators));
 
         // Initialize all components after the page has loaded and Blockly is ready
         this.initializeAll();

src/static/indicators.js

@@ -111,8 +111,6 @@ class Indicator {
     }
 
     setLine(lineName, data, value_name) {
-        console.log('indicators[68]: setLine takes:(lineName, data, value_name)');
-        console.log(lineName, data, value_name);
 
         let priceValue;
 
@@ -143,6 +141,7 @@ class Indicator {
     }
 
     updateDisplay(name, priceValue, value_name) {
+        // Try the old element format first (legacy chart-based display)
         let element = document.getElementById(this.name + '_' + value_name);
         if (element) {
             if (typeof priceValue === 'object' && priceValue !== null) {
@@ -172,7 +171,36 @@ class Indicator {
             element.style.height = 'auto';  // Reset height
             element.style.height = (element.scrollHeight) + 'px';  // Adjust height based on content
         } else {
-            console.warn(`Element with ID ${this.name}_${value_name} not found.`);
+            // Try the new card-based display element
+            const cardElement = document.getElementById(`indicator_card_value_${this.name}`);
+            if (cardElement) {
+                let displayValue = '--';
+                if (typeof priceValue === 'object' && priceValue !== null) {
+                    // For object values, get the first numeric value
+                    const values = Object.values(priceValue).filter(v => typeof v === 'number' && !isNaN(v));
+                    if (values.length > 0) {
+                        displayValue = this._formatDisplayValue(values[0]);
+                    }
+                } else if (typeof priceValue === 'number' && !isNaN(priceValue)) {
+                    displayValue = this._formatDisplayValue(priceValue);
+                }
+                cardElement.textContent = displayValue;
+            }
+            // Silently ignore if neither element exists (may be during initialization)
+        }
+    }
+
+    /**
+     * Formats a numeric value for display in cards
+     */
+    _formatDisplayValue(value) {
+        if (value === null || value === undefined || isNaN(value)) return '--';
+        if (Math.abs(value) >= 1000) {
+            return value.toFixed(0);
+        } else if (Math.abs(value) >= 100) {
+            return value.toFixed(1);
+        } else {
+            return value.toFixed(2);
         }
     }
 
@@ -181,8 +209,6 @@ class Indicator {
     }
 
     updateLine(name, data, value_name) {
-        console.log('indicators[68]: updateLine takes:(name, data, value_name)');
-        console.log(name, data, value_name);
 
         // Check if the data is a multi-value object
         if (typeof data === 'object' && data !== null && value_name in data) {
@@ -263,7 +289,6 @@ class SMA extends Indicator {
 
     init(data) {
         this.setLine('line', data, 'value');
-        console.log('line data', data);
     }
 
     update(data) {