Fix favicon, candle alignment, distribution overflow, equity times

- Add SVG favicon (candlestick + fan chart icon on dark bg)
- Fix candle time alignment: aggregateCandles now snaps to wall-clock
  boundaries (15m bars at :00/:15/:30/:45, 30m at :00/:30, 1h at :00)
  instead of aligning relative to array position
- Fix distribution pane: increase grid padding, smaller rotated labels,
  add overflow:hidden to chart container, compact probability callouts
- Fix equity curve: sort history chronologically, show date labels
  when entries span multiple calendar days

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

Author: 2 people

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Real-time probabilistic ensemble forecasts for ES futures with fan charts, trading signals, and live performance tracking." />
     <meta name="theme-color" content="#0a0e17" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>ES Futures Forecast</title>
     <style>
       /* Prevent flash of white background */

public/favicon.svg

@@ -27,23 +27,44 @@ export const TIMEFRAME_OPTIONS: { value: Timeframe; label: string }[] = [
 /** Number of aggregated context bars to display */
 const DISPLAY_BARS = 24;
 
-/** Aggregate 5-min candles into larger timeframe bars, aligned from the end. */
+/** Aggregate 5-min candles into larger timeframe bars, aligned to wall-clock boundaries.
+ *  15m bars snap to :00/:15/:30/:45, 30m to :00/:30, 1h to :00. */
 export function aggregateCandles(candles: CandleData[], factor: number): CandleData[] {
   if (factor <= 1) return candles;
 
+  const intervalSec = factor * 300; // seconds per aggregated bar
   const result: CandleData[] = [];
-  // Align from the end so the last group is complete
-  const alignedStart = candles.length % factor;
-  for (let i = alignedStart; i < candles.length; i += factor) {
-    const group = candles.slice(i, i + factor);
-    if (group.length === 0) continue;
+  let currentBucket = -1;
+  let group: CandleData[] = [];
+
+  for (const c of candles) {
+    const bucket = Math.floor(c.time / intervalSec) * intervalSec;
+    if (bucket !== currentBucket) {
+      if (group.length > 0) {
+        result.push({
+          time: currentBucket,
+          open: group[0].open,
+          high: Math.max(...group.map((g) => g.high)),
+          low: Math.min(...group.map((g) => g.low)),
+          close: group[group.length - 1].close,
+          volume: group.reduce((sum, g) => sum + g.volume, 0),
+        });
+      }
+      currentBucket = bucket;
+      group = [c];
+    } else {
+      group.push(c);
+    }
+  }
+  // Flush last group
+  if (group.length > 0) {
     result.push({
-      time: group[0].time,
+      time: currentBucket,
       open: group[0].open,
-      high: Math.max(...group.map((c) => c.high)),
-      low: Math.min(...group.map((c) => c.low)),
+      high: Math.max(...group.map((g) => g.high)),
+      low: Math.min(...group.map((g) => g.low)),
       close: group[group.length - 1].close,
-      volume: group.reduce((sum, c) => sum + c.volume, 0),
+      volume: group.reduce((sum, g) => sum + g.volume, 0),
     });
   }
   return result;

src/api/timeframe.ts

@@ -27,9 +27,14 @@ export function EquityCurve({ history }: Props) {
   // Check if multi-horizon data is available
   const hasMultiHorizon = history.some((e) => e.realized_returns != null);
 
+  // Sort history by timestamp to ensure chronological order
+  const sorted = [...history].sort(
+    (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+  );
+
   // Compute cumulative equity from realized returns at selected horizon
   let cumReturn = 0;
-  const equity = history
+  const equity = sorted
     .filter((e) => {
       if (hasMultiHorizon && e.realized_returns) {
         const ret = e.realized_returns[String(selectedHorizon)];
@@ -50,16 +55,25 @@ export function EquityCurve({ history }: Props) {
 
       const pnl = signalDir * ret;
       cumReturn += pnl;
+
+      // Include date if history spans multiple days
+      const d = new Date(e.timestamp);
+      const timeStr = d.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      });
       return {
-        time: new Date(e.timestamp).toLocaleTimeString("en-US", {
-          hour: "2-digit",
-          minute: "2-digit",
-          hour12: false,
-        }),
+        time: timeStr,
+        fullTime: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }) + " " + timeStr,
         value: +(cumReturn * 100).toFixed(3),
       };
     });
 
+  // Detect if entries span multiple calendar days
+  const multiDay = equity.length > 1 &&
+    equity[0].fullTime.slice(0, 6) !== equity[equity.length - 1].fullTime.slice(0, 6);
+
   const isPositive = cumReturn >= 0;
 
   const option: echarts.EChartsCoreOption = {
@@ -73,8 +87,8 @@ export function EquityCurve({ history }: Props) {
     grid: { left: 50, right: 10, top: 10, bottom: 30 },
     xAxis: {
       type: "category",
-      data: equity.map((e) => e.time),
-      axisLabel: { color: "#94a3b8", fontSize: 10, interval: Math.max(0, Math.floor(equity.length / 6)) },
+      data: equity.map((e) => multiDay ? e.fullTime : e.time),
+      axisLabel: { color: "#94a3b8", fontSize: multiDay ? 8 : 10, interval: Math.max(0, Math.floor(equity.length / 6)), rotate: multiDay ? 30 : 0 },
       axisLine: { lineStyle: { color: "#334155" } },
     },
     yAxis: {

src/components/charts/EquityCurve.tsx

@@ -112,14 +112,16 @@ export function ProbabilityDist({ prediction }: Props) {
         return `${p.name}<br/>Count: ${p.value}`;
       },
     },
-    grid: { left: 40, right: 10, top: 10, bottom: hasSamplePaths ? 50 : 30 },
+    grid: { left: 40, right: 10, top: 10, bottom: 45 },
     xAxis: {
       type: "category",
       data: bins.map((b) => b.label),
       axisLabel: {
         color: "#94a3b8",
-        fontSize: 9,
-        rotate: bins.length > 10 ? 45 : 0,
+        fontSize: 8,
+        rotate: bins.length > 8 ? 45 : 0,
+        overflow: "truncate" as const,
+        width: 50,
       },
       axisLine: { lineStyle: { color: "#334155" } },
     },
@@ -175,7 +177,7 @@ export function ProbabilityDist({ prediction }: Props) {
           ))}
         </div>
       </div>
-      <div style={{ flex: 1, minHeight: 0 }}>
+      <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
         <ReactEChartsCore
           echarts={echarts}
           option={option}
@@ -190,10 +192,12 @@ export function ProbabilityDist({ prediction }: Props) {
           style={{
             display: "flex",
             justifyContent: "space-around",
-            padding: "6px 4px 2px",
+            padding: "4px 2px 2px",
             borderTop: "1px solid #1e293b",
             fontFamily: "JetBrains Mono, monospace",
-            fontSize: 11,
+            fontSize: 10,
+            flexWrap: "wrap",
+            gap: 2,
           }}
         >
           <span>