feat: Implement windowed rendering with horizontal scroll for chart

Implement viewport windowing to render only ~100 candles at a time
instead of all data, significantly improving chart performance and
readability.

Changes:
- Add state.go to manage global chart data and visible window
- Update app.gx to use GetVisibleChartData() for windowed rendering
- Connect ScrollManager.updateChart() to trigger app rerenders
- Reduce visible window from 200 to 100 candles
- Update subtitle to indicate ~100 candles visible
- Set global app and scroll manager instances for state coordination

The chart now renders a manageable subset of data with smooth
horizontal scrolling, mouse wheel support, keyboard navigation,
and automatic data prefetching near viewport edges.

Author: claude

examples/webgpu-chart/app.gx

@@ -1,8 +1,8 @@
 package main
 
 func App() (Component) {
-	// Fetch initial Bitcoin data from Binance with fallback to static data
-	chartData := GetChartData()
+	// Get visible window of chart data (managed by scroll manager)
+	chartData := GetVisibleChartData()
 
 	Div(
 		ID("app"),
@@ -13,7 +13,7 @@ func App() (Component) {
 			"Bitcoin Price Chart (Binance Data)"
 		}
 		P(Class("subtitle")) {
-			"WebGPU-powered candlestick chart with viewport scrolling"
+			"WebGPU-powered candlestick chart with viewport scrolling (~100 candles visible)"
 		}
 		Canvas(
 			ID("chart-canvas"),

examples/webgpu-chart/app_gen.go

@@ -35,6 +35,11 @@ func main() {
 		appComponent.BindApp(runtimeApp)
 		log("[Go] App bound")
 
+		// Set global app for state management
+		log("[Go] Setting global app...")
+		SetGlobalApp(appComponent)
+		log("[Go] Global app set")
+
 		// Mount
 		log("[Go] Mounting to #app...")
 		if err := runtimeApp.Mount("#app"); err != nil {
@@ -49,6 +54,11 @@ func main() {
 		scrollManager := NewScrollManager("chart-canvas", initialData)
 		log("[Go] Scroll manager initialized")
 
+		// Set global scroll manager for state management
+		log("[Go] Setting global scroll manager...")
+		SetGlobalScrollManager(scrollManager)
+		log("[Go] Global scroll manager set")
+
 		// Store scroll manager for cleanup (not implemented yet)
 		_ = scrollManager
 	})

examples/webgpu-chart/main.go

@@ -39,9 +39,9 @@ type ChartDataManager struct {
 
 // NewChartDataManager creates a new chart data manager
 func NewChartDataManager(initialData []chart.OHLCV, symbol, interval string) *ChartDataManager {
-	visibleSize := len(initialData)
-	if visibleSize > 200 {
-		visibleSize = 200 // Show 200 candles at a time
+	visibleSize := 100 // Show 100 candles at a time (as requested)
+	if len(initialData) < visibleSize {
+		visibleSize = len(initialData)
 	}
 
 	// Initialize Markov chain generator from last candle
@@ -57,7 +57,7 @@ func NewChartDataManager(initialData []chart.OHLCV, symbol, interval string) *Ch
 		allData:      initialData,
 		visibleStart: 0,
 		visibleEnd:   visibleSize,
-		prefetchSize: 100, // Prefetch 100 candles when nearing edge
+		prefetchSize: 50, // Prefetch 50 candles when nearing edge
 		totalFetched: len(initialData),
 		symbol:       symbol,
 		interval:     interval,
@@ -269,7 +269,7 @@ func (sm *ScrollManager) attachEventListeners() {
 			shift = 10 // Scroll right (newer data)
 		case "Home":
 			sm.chartData.visibleStart = 0
-			sm.chartData.visibleEnd = 200
+			sm.chartData.visibleEnd = 100
 			sm.updateChart()
 			return nil
 		case "End":
@@ -297,11 +297,11 @@ func (sm *ScrollManager) attachEventListeners() {
 
 // updateChart triggers a chart rerender with updated data
 func (sm *ScrollManager) updateChart() {
-	// This is a placeholder - in the actual implementation,
-	// we need to trigger the chart component to rerender
-	// For now, we'll just log the viewport change
 	log("[Scroll] Viewport updated:", sm.chartData.visibleStart, "-", sm.chartData.visibleEnd, "of", len(sm.chartData.allData))
 
+	// Trigger the app to rerender with new visible data
+	TriggerChartUpdate()
+
 	// Check if we need to fetch/generate more data
 	if sm.chartData.visibleEnd > len(sm.chartData.allData)-sm.chartData.prefetchSize {
 		log("[Scroll] Near end, fetching/generating more data...")

examples/webgpu-chart/scroll.go

@@ -0,0 +1,38 @@
+//go:build js && wasm
+
+package main
+
+import "github.com/gaarutyunov/guix/pkg/runtime/chart"
+
+// Global state for chart data management
+var (
+	globalScrollManager *ScrollManager
+	globalApp           *App
+)
+
+// GetVisibleChartData returns the currently visible chart data
+// This is called by the app during rendering to get only the visible window of data
+func GetVisibleChartData() []chart.OHLCV {
+	if globalScrollManager != nil && globalScrollManager.chartData != nil {
+		return globalScrollManager.chartData.GetVisibleData()
+	}
+	// Fallback: return initial data if scroll manager not initialized
+	return GetChartData()
+}
+
+// SetGlobalScrollManager sets the global scroll manager instance
+func SetGlobalScrollManager(sm *ScrollManager) {
+	globalScrollManager = sm
+}
+
+// SetGlobalApp sets the global app instance
+func SetGlobalApp(app *App) {
+	globalApp = app
+}
+
+// TriggerChartUpdate triggers the app to rerender with updated data
+func TriggerChartUpdate() {
+	if globalApp != nil {
+		globalApp.Update()
+	}
+}