Fix tracking path: use horizon offsets instead of linear indices

path_values are sampled at sparse horizons [1,4,7,10,...,78] (26 pts),
not at every bar. The old code mapped them to adjacent chart indices
(anchorIndex+0, +1, +2...) which compressed the entire 78-bar forecast
into 26 adjacent candles.

Now correctly maps each path value to anchorIndex + horizon[i], spacing
them at the actual 3-bar intervals. Tracking path and projection both
use explicit offset arrays for proper chart positioning.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

src/components/charts/FanChart.tsx

@@ -37,9 +37,11 @@ export type ChartType = "line" | "candlestick" | "ohlc";
 export type ForecastStyle = "bands" | "spaghetti";
 
 export interface TrackingPath {
-  realizedPrices: number[];   // price values at context candle indices
+  realizedPrices: number[];   // price values at realized horizon points
+  realizedOffsets: number[];  // bar offsets from anchor for each realized price
   projectedPrices: number[];  // price values in forecast region
-  anchorIndex: number;        // x-axis index where the path starts
+  projectedOffsets: number[]; // horizon offsets for projected prices (relative to forecast start)
+  anchorIndex: number;        // x-axis index in context candles where prediction was made
   rmse: number;
   pathIndex: number;
   totalPaths: number;
@@ -535,23 +537,28 @@ export function FanChart({
         ? (() => {
             const tp = trackingPath;
             const totalLen = allTimes.length;
-            // Realized portion: solid teal line through context candles
+            // Realized portion: solid teal line through context candles at correct horizon offsets
             const realizedData: (number | null)[] = new Array(totalLen).fill(null);
             for (let i = 0; i < tp.realizedPrices.length; i++) {
-              const idx = tp.anchorIndex + i;
+              const offset = tp.realizedOffsets[i] ?? i;
+              const idx = tp.anchorIndex + offset;
               if (idx >= 0 && idx < ctxLen) {
                 realizedData[idx] = tp.realizedPrices[i];
               }
             }
             // Projected portion: dashed teal line through forecast region
             const projectedData: (number | null)[] = new Array(totalLen).fill(null);
-            // Connect at the NOW boundary
-            const lastRealizedIdx = tp.anchorIndex + tp.realizedPrices.length - 1;
-            if (lastRealizedIdx >= 0 && lastRealizedIdx < totalLen) {
-              projectedData[lastRealizedIdx] = tp.realizedPrices[tp.realizedPrices.length - 1];
+            // Connect at the last realized point
+            if (tp.realizedPrices.length > 0) {
+              const lastOffset = tp.realizedOffsets[tp.realizedPrices.length - 1] ?? (tp.realizedPrices.length - 1);
+              const lastIdx = tp.anchorIndex + lastOffset;
+              if (lastIdx >= 0 && lastIdx < totalLen) {
+                projectedData[lastIdx] = tp.realizedPrices[tp.realizedPrices.length - 1];
+              }
             }
             for (let i = 0; i < tp.projectedPrices.length; i++) {
-              const idx = ctxLen + i;
+              const offset = tp.projectedOffsets[i] ?? i;
+              const idx = ctxLen + offset;
               if (idx < totalLen) {
                 projectedData[idx] = tp.projectedPrices[i];
               }

src/components/layout/Dashboard.tsx

@@ -115,6 +115,10 @@ export function Dashboard() {
     const rawCandles = prediction.context_candles ?? [];
     if (!rawCandles.length) return null;
 
+    // Horizons from the hindcast prediction (sparse: [1, 4, 7, 10, ...])
+    const horizons = scored.horizons;
+    if (!horizons.length) return null;
+
     // Find anchor: context candle closest to prediction timestamp
     const predTs = new Date(scored.timestamp).getTime() / 1000;
     let anchorIndex = -1;
@@ -124,24 +128,33 @@ export function Dashboard() {
     if (anchorIndex < 0) return null;
 
     // Split path_values into realized (context region) and projected (forecast region)
+    // Each path_values[i] corresponds to horizons[i] bars ahead of anchor
     const ctxLen = rawCandles.length;
     const realizedPrices: number[] = [];
+    const realizedOffsets: number[] = [];
     const projectedPrices: number[] = [];
+    const projectedOffsets: number[] = [];
 
-    for (let i = 0; i < bestPath.path_values.length; i++) {
-      const chartIdx = anchorIndex + i;
+    for (let i = 0; i < bestPath.path_values.length && i < horizons.length; i++) {
+      const barOffset = horizons[i]; // bars ahead of anchor
+      const chartIdx = anchorIndex + barOffset;
       if (chartIdx < ctxLen) {
         realizedPrices.push(bestPath.path_values[i]);
+        realizedOffsets.push(barOffset);
       } else {
+        // Forecast region: offset relative to ctxLen
         projectedPrices.push(bestPath.path_values[i]);
+        projectedOffsets.push(chartIdx - ctxLen);
       }
     }
 
-    if (realizedPrices.length < 3) return null;
+    if (realizedPrices.length < 2) return null;
 
     return {
       realizedPrices,
+      realizedOffsets,
       projectedPrices,
+      projectedOffsets,
       anchorIndex,
       rmse: bestPath.rmse_pts,
       pathIndex: bestPath.path_index,