From 82fd91851edcbdc1ea0e20f026a97114d00b7eeb Mon Sep 17 00:00:00 2001
From: root <root@vps1170145.hostsailor.com>
Date: Sun, 22 Feb 2026 22:12:28 +0000
Subject: [PATCH] Fix chart: lazy load lightweight-charts on client only

---
 components/mission-control/TradingChart.tsx | 33 +++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/mission-control/TradingChart.tsx b/components/mission-control/TradingChart.tsx
index 76b45a0..2ec1c23 100644
--- a/components/mission-control/TradingChart.tsx
+++ b/components/mission-control/TradingChart.tsx
@@ -1,7 +1,10 @@
 'use client'
 
 import { useState, useEffect, useRef } from 'react'
-import { createChart, IChartApi, ISeriesApi, CandlestickData, Time } from 'lightweight-charts'
+
+// Lazy load lightweight-charts only on client
+let createChart: any = null
+let lightweightCharts: any = null
 
 interface Trade {
   id: string
@@ -87,10 +90,30 @@ export default function TradingChart() {
   const [indicators, setIndicators] = useState<IndicatorState>({
     ema20: false, ema50: false, ema200: false, bb: false, rsi: false, macd: false, thoth: true, volume: true, srZones: true, news: false, patterns: false, fib: false, countdown: false, calendar: false, correlation: false, funding: false
   })
+  const [chartReady, setChartReady] = useState(false)
 
-  // Initialize chart
+  // Initialize chart - run only on client
   useEffect(() => {
-    if (!chartContainerRef.current) return
+    let mounted = true
+    
+    const initChart = async () => {
+      try {
+        const charts = await import('lightweight-charts')
+        if (!mounted) return
+        createChart = charts.createChart
+        setChartReady(true)
+      } catch (e) {
+        console.error('Failed to load charts:', e)
+      }
+    }
+    
+    initChart()
+    return () => { mounted = false }
+  }, [])
+
+  // Setup chart after library loads
+  useEffect(() => {
+    if (!chartReady || !chartContainerRef.current || !createChart) return
 
     const chart = createChart(chartContainerRef.current, {
       layout: {
@@ -145,9 +168,9 @@ export default function TradingChart() {
 
     return () => {
       window.removeEventListener('resize', handleResize)
-      chart.remove()
+      if (chartRef.current) chartRef.current.remove()
     }
-  }, [])
+  }, [chartReady])
 
   // Fetch data when asset/timeframe changes
   useEffect(() => {