Merge pull request #7 from that-github-user/fix/analytics-wiring-mobile

Fix analytics wiring + mobile layout overflow

Author: that-github-user

src/api/mock.ts

@@ -120,6 +120,23 @@ export function generateMockPrediction(): PredictionResponse {
       p10_return: +((drift - 0.08) * 0.01).toFixed(6),
       p90_return: +((drift + 0.08) * 0.01).toFixed(6),
       long_frac: +(0.5 + drift * 2).toFixed(4),
+      // Analytics engine fields (nested in signal to match server)
+      regime: regimeLabels[Math.floor(rand() * 4)],
+      exhaustion_score: +(0.3 + rand() * 2.2).toFixed(2),
+      ensemble_agreement: +(0.3 + rand() * 0.7).toFixed(2),
+      signal_strength_percentile: Math.floor(rand() * 100),
+      invalidation: {
+        price_level: round(
+          isLong ? lastClose - (4 + rand() * 8) : lastClose + (4 + rand() * 8),
+        ),
+        price_direction: isLong ? "below" : isShort ? "above" : "either",
+        description: isLong
+          ? "Close below support invalidates bullish thesis"
+          : isShort
+            ? "Close above resistance invalidates bearish thesis"
+            : "Breakout from range invalidates neutral stance",
+        ensemble_contradiction: +(rand() * 0.4).toFixed(4),
+      },
     },
     context_candles: contextCandles,
     // Analytics engine fields

src/api/types.ts

@@ -16,6 +16,12 @@ export interface SignalResponse {
   p90_return: number;
   long_frac: number;
   horizon_signals?: Record<string, HorizonSignal> | null;
+  // Analytics engine fields (nested in signal response from server)
+  regime?: string | null;
+  exhaustion_score?: number | null;
+  ensemble_agreement?: number | null;
+  signal_strength_percentile?: number | null;
+  invalidation?: InvalidationInfo | null;
 }
 
 export interface CandleData {

src/components/layout/Dashboard.tsx

@@ -264,7 +264,7 @@ export function Dashboard() {
               chartType={chartType}
               forecastStyle={forecastStyle}
               timeframe={timeframe}
-              invalidationLevel={prediction.invalidation?.price_level ?? null}
+              invalidationLevel={prediction.signal.invalidation?.price_level ?? prediction.invalidation?.price_level ?? null}
               highlightedPaths={highlightedPaths}
               trackingPath={trackingPath}
               showTracking={showTracking}
@@ -275,11 +275,11 @@ export function Dashboard() {
         {/* Sidebar: analytics cards */}
         <div className="sidebar-cards fade-in">
           <AnalyticsCards
-            regime={prediction.regime ?? null}
-            exhaustionScore={prediction.exhaustion_score ?? null}
-            ensembleAgreement={prediction.ensemble_agreement ?? null}
-            signalPercentile={prediction.signal_percentile ?? null}
-            invalidation={prediction.invalidation ?? null}
+            regime={prediction.signal.regime ? { label: prediction.signal.regime as "trending" | "mean-reverting" | "volatile" | "quiet", confidence: 0 } : prediction.regime ?? null}
+            exhaustionScore={prediction.signal.exhaustion_score ?? prediction.exhaustion_score ?? null}
+            ensembleAgreement={prediction.signal.ensemble_agreement ?? prediction.ensemble_agreement ?? null}
+            signalPercentile={prediction.signal.signal_strength_percentile ?? prediction.signal_percentile ?? null}
+            invalidation={prediction.signal.invalidation ?? prediction.invalidation ?? null}
             regimePerformance={prediction.regime_performance ?? null}
             lastClose={prediction.last_close}
             direction={prediction.signal.direction}
@@ -295,7 +295,7 @@ export function Dashboard() {
                 <SignalPanel
                   signal={prediction.signal}
                   lastClose={prediction.last_close}
-                  regime={prediction.regime}
+                  regime={prediction.signal.regime ? { label: prediction.signal.regime as "trending" | "mean-reverting" | "volatile" | "quiet", confidence: 0 } : prediction.regime ?? null}
                 />
               </div>
               <div className="fade-in">
@@ -305,7 +305,7 @@ export function Dashboard() {
                   numTrades={liveStats.numTrades}
                   historyError={historyError}
                   rangeAccuracy={rangeMetrics}
-                  regimeLabel={prediction.regime?.label}
+                  regimeLabel={prediction.signal.regime ?? prediction.regime?.label ?? null}
                 />
               </div>
             </>

src/styles/globals.css

@@ -174,10 +174,6 @@ html, body, #root {
   padding: 0 4px;
 }
 
-.table-scroll .summary-table {
-  min-width: 600px;
-}
-
 /* ── Value flash animation ── */
 .value-transition {
   transition: color 0.3s ease, transform 0.2s ease;
@@ -502,55 +498,6 @@ html, body, #root {
   text-align: center;
 }
 
-/* ── Backtest page ── */
-.backtest-container {
-  min-height: 100vh;
-  background: var(--bg-base);
-  color: var(--text-primary);
-  padding: 20px;
-  overflow-y: auto;
-}
-
-.backtest-inner {
-  max-width: 1100px;
-  margin: 0 auto;
-}
-
-/* ── Summary table ── */
-.summary-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.summary-table th {
-  text-align: left;
-  padding: 8px 12px;
-  color: var(--text-muted);
-  font-weight: 500;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  border-bottom: 1px solid var(--border-dim);
-  white-space: nowrap;
-}
-
-.summary-table td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--bg-elevated);
-  color: var(--text-primary);
-  white-space: nowrap;
-}
-
-.summary-table tr:hover td {
-  background: rgba(59, 130, 246, 0.05);
-}
-
-.pf-good { color: var(--accent-green); }
-.pf-ok { color: var(--accent-amber); }
-.pf-bad { color: var(--accent-red); }
-
 /* ── Responsive: sidebar shrink ── */
 @media (max-width: 1200px) {
   .dashboard-grid {
@@ -597,31 +544,53 @@ html, body, #root {
 
   .fan-chart-cell {
     grid-area: auto;
-    min-height: 350px;
+    min-height: 300px;
     height: 50vh;
+    overflow: hidden;
   }
 
-  .sidebar-cards { grid-area: auto; }
-  .sidebar-middle { grid-area: auto; overflow: visible; }
-  .sidebar-equity { grid-area: auto; }
+  .sidebar-cards {
+    grid-area: auto;
+  }
 
-  .panel-header {
-    flex-wrap: wrap;
-    gap: 6px;
+  .sidebar-cards .analytics-cards {
+    grid-template-columns: 1fr 1fr;
+    gap: 3px;
   }
 
-  .panel-controls {
-    flex-wrap: wrap;
-    gap: 4px;
+  .sidebar-cards .analytics-card {
+    padding: 6px 8px;
+  }
+
+  .sidebar-cards .analytics-card .card-value {
+    font-size: 13px;
   }
 
   .sidebar-middle {
+    grid-area: auto;
     overflow: visible;
     min-height: auto;
   }
 
   .sidebar-equity {
-    min-height: 200px;
+    grid-area: auto;
+    min-height: 180px;
+  }
+
+  .panel-header {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .panel-controls {
+    flex-wrap: wrap;
+    gap: 3px;
+  }
+
+  .panel-controls .toggle-group,
+  .panel-controls .toggle-btn-solo {
+    font-size: 9px;
+    padding: 2px 6px;
   }
 
   .tab-bar {
@@ -660,15 +629,6 @@ html, body, #root {
     grid-template-columns: 1fr;
   }
 
-  /* Backtest page */
-  .backtest-container {
-    padding: 12px;
-  }
-
-  .backtest-inner {
-    max-width: 100%;
-  }
-
   .stat-card .stat-value {
     font-size: 18px;
   }
@@ -685,29 +645,42 @@ html, body, #root {
   }
 
   .fan-chart-cell {
-    min-height: 280px;
-    height: 45vh;
+    min-height: 250px;
+    height: 40vh;
+    overflow: hidden;
   }
 
-  .sidebar-equity {
-    min-height: 180px;
+  .sidebar-cards .analytics-cards {
+    grid-template-columns: 1fr 1fr;
+    gap: 2px;
   }
 
-  .backtest-container {
-    padding: 8px;
+  .sidebar-cards .analytics-card {
+    padding: 4px 6px;
   }
 
-  /* Stat grid: single column on phones */
-  .stat-grid {
-    grid-template-columns: 1fr;
-    gap: 8px;
+  .sidebar-cards .analytics-card .card-value {
+    font-size: 12px;
   }
 
-  .stat-card {
-    padding: 10px;
+  .sidebar-cards .analytics-card .card-label {
+    font-size: 8px;
   }
 
-  .stat-card .stat-value {
-    font-size: 16px;
+  .sidebar-cards .analytics-card .card-sub {
+    display: none;
+  }
+
+  .sidebar-equity {
+    min-height: 150px;
+  }
+
+  .scenario-card .scenario-label {
+    min-width: 70px;
+    font-size: 10px;
+  }
+
+  .scenario-card .scenario-sparkline {
+    display: none;
   }
 }