chore: Hardening Pass 5: per-route auth decisions, route coverage, and typecheck baseline

client/components/AutomatedTradingDashboard.tsx

@@ -64,7 +64,22 @@ const AutomatedTradingDashboard: React.FC<{
   const activeTradesQ = useActiveTrades();
   const statsQ = useTradeStats();
   const activeTrades = activeTradesQ.data?.trades || [];
-  const stats = statsQ.data?.stats || null;
+  const rawStats = statsQ.data?.stats;
+  const stats: TradeStatistics | null = rawStats ? {
+    totalTrades: rawStats.totalTrades ?? 0,
+    winningTrades: rawStats.winningTrades ?? 0,
+    losingTrades: rawStats.losingTrades ?? 0,
+    winRate: rawStats.winRate ?? 0,
+    averageProfitUSD: rawStats.averageProfitUSD ?? 0,
+    averageLossUSD: rawStats.averageLossUSD ?? 0,
+    profitFactor: rawStats.profitFactor ?? 0,
+    totalProfitLoss: rawStats.totalProfitLoss ?? 0,
+    largestWin: rawStats.largestWin ?? 0,
+    largestLoss: rawStats.largestLoss ?? 0,
+    maxConsecutiveWins: 0,
+    maxConsecutiveLosses: 0,
+    averageDurationMinutes: 0,
+  } : null;
 
   // Calculate risk metrics
   const riskMetrics: RiskMetrics = {
@@ -187,7 +202,7 @@ const AutomatedTradingDashboard: React.FC<{
         <div className="bg-white rounded-lg border border-gray-200 p-4">
           <p className="text-sm text-gray-600">Win Rate</p>
           <p className="text-3xl font-bold text-indigo-600">
-            {stats ? `${(stats.winRate * 100).toFixed(0)}%` : 'N/A'}
+            {stats?.winRate !== undefined ? `${(stats.winRate * 100).toFixed(0)}%` : 'N/A'}
           </p>
           <p className="text-xs text-gray-500 mt-1">
             {stats ? `${stats.winningTrades}W / ${stats.losingTrades}L` : 'No trades'}
@@ -258,14 +273,14 @@ const AutomatedTradingDashboard: React.FC<{
                       <td className="px-4 py-3 text-right">
                         <span
                           className={`px-2 py-1 rounded text-xs font-semibold ${
-                            trade.confidence > 0.8
+                            (trade.confidence ?? 0) > 0.8
                               ? 'bg-blue-100 text-blue-700'
-                              : trade.confidence > 0.6
+                              : (trade.confidence ?? 0) > 0.6
                               ? 'bg-yellow-100 text-yellow-700'
                               : 'bg-orange-100 text-orange-700'
                           }`}
                         >
-                          {(trade.confidence * 100).toFixed(0)}%
+                          {((trade.confidence ?? 0) * 100).toFixed(0)}%
                         </span>
                       </td>
                       <td className="px-4 py-3 text-center">

client/components/BacktestResultsSummary.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState, Suspense } from 'react';
-import AreaChartCore from './charts/AreaChartCore';
+import AreaChartCore from '@/components/charts/AreaChartCore';
 import { useBacktestResults } from '@/lib/hooks';
 const BacktestResultsChartsImpl = React.lazy(() => import('./BacktestResultsChartsImpl'));
 

client/components/MLConsensusWidget.tsx

@@ -21,9 +21,12 @@ interface TimeframeConfidence {
   direction: string;
   confidence: number;
   strength: number;
-  probability: number;
+  price: number;
+  pricChangePct: number;
   riskScore: number;
-  volatility: number;
+  riskLevel: string;
+  volatility: string;
+  regimeDuration: string;
   weight: number;
 }
 
@@ -40,7 +43,7 @@ interface MLConsensusData {
   timeframes: TimeframeConfidence[];
   aggregatedMetrics: {
     avgRiskScore: number;
-    maxVolatility: number;
+    maxVolatility: string;
     shortestRegimeDuration: string;
     velocityConfidenceAvg: number;
   };
@@ -121,12 +124,17 @@ export const MLConsensusWidget: React.FC<MLConsensusWidgetProps> = ({
   }
 
   const consensus = data.consensus;
-  const metrics = data.aggregatedMetrics;
+  const metrics = data.aggregatedMetrics ?? {
+    avgRiskScore: 0,
+    maxVolatility: 'unknown',
+    shortestRegimeDuration: 'unknown',
+    velocityConfidenceAvg: 0,
+  };
   const directionColor = getDirectionColor(consensus.direction);
   const riskLevel = getRiskLevel(metrics.avgRiskScore);
 
   // Prepare timeframe data for chart
-  const timeframeChartData = data.timeframes.map((tf: TimeframeConfidence) => ({
+  const timeframeChartData = data.timeframes.map((tf) => ({
     timeframe: tf.timeframe,
     confidence: tf.confidence * 100,
     strength: tf.strength,
@@ -263,7 +271,7 @@ export const MLConsensusWidget: React.FC<MLConsensusWidgetProps> = ({
               </tr>
             </thead>
             <tbody>
-              {data.timeframes.map((tf: TimeframeConfidence) => (
+              {data.timeframes.map((tf) => (
                 <tr key={tf.timeframe} className="border-b border-gray-100 hover:bg-gray-50">
                   <td className="px-3 py-2 font-medium text-gray-800">{tf.timeframe}</td>
                   <td className="px-3 py-2">
@@ -286,7 +294,7 @@ export const MLConsensusWidget: React.FC<MLConsensusWidgetProps> = ({
                     </span>
                   </td>
                   <td className="px-3 py-2 text-right text-gray-700">
-                    {(tf.volatility * 100).toFixed(1)}%
+                    {tf.volatility}
                   </td>
                   <td className="px-3 py-2 text-right text-gray-700 font-medium">
                     {(tf.weight * 100).toFixed(0)}%
@@ -302,7 +310,7 @@ export const MLConsensusWidget: React.FC<MLConsensusWidgetProps> = ({
       <div className="grid grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
         <div>
           <p className="text-xs text-gray-600 font-semibold uppercase mb-1">Max Volatility</p>
-          <p className="text-lg font-bold text-gray-800">{(metrics.maxVolatility * 100).toFixed(1)}%</p>
+          <p className="text-lg font-bold text-gray-800">{metrics.maxVolatility}</p>
         </div>
         <div>
           <p className="text-xs text-gray-600 font-semibold uppercase mb-1">Regime Duration</p>

client/src/components/AdaptiveHoldingPanel.tsx

@@ -5,7 +5,7 @@
  * Allows users to measure impact of regime-aware and flow-based holding strategies
  */
 
-import React, { useState, lazy } from 'react';
+import React, { useState, Suspense, lazy } from 'react';
 import { TrendingUp, Clock, Users, Zap, CheckCircle2, AlertCircle, BarChart3, PieChart } from 'lucide-react';
 import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 const AdaptiveHoldingCharts = lazy(() => import('@/components/AdaptiveHoldingCharts'));

client/src/components/AgentSignalHistory.tsx

@@ -161,11 +161,16 @@ export default function AgentSignalHistory({
         <CardContent>
           {chartData.length > 0 ? (
             <div style={{ width: '100%', height: 300 }}>
-              <BarChartCore data={chartData} dataKey="BUY" height={300}>
-                <Bar dataKey="BUY" stackId="a" fill="#10b981" radius={[8, 8, 0, 0]} />
-                <Bar dataKey="HOLD" stackId="a" fill="#f59e0b" radius={[8, 8, 0, 0]} />
-                <Bar dataKey="SELL" stackId="a" fill="#ef4444" radius={[8, 8, 0, 0]} />
-              </BarChartCore>
+              <BarChartCore
+                data={chartData}
+                dataKey="BUY"
+                height={300}
+                barSeries={[
+                  { dataKey: 'BUY', stackId: 'a', fill: '#10b981', radius: [8, 8, 0, 0] },
+                  { dataKey: 'HOLD', stackId: 'a', fill: '#f59e0b', radius: [8, 8, 0, 0] },
+                  { dataKey: 'SELL', stackId: 'a', fill: '#ef4444', radius: [8, 8, 0, 0] },
+                ]}
+              />
             </div>
           ) : (
             <div className="h-64 flex items-center justify-center text-slate-400">

client/src/components/BasicChart.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { LineChartCore, BarChartCore } from './charts';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import type { ChartDataPoint } from '@/types/chart';
+import { Bar } from 'recharts';
 
 interface BasicChartProps {
   symbol: string;
@@ -43,8 +44,8 @@ export function BasicChart({
     );
   }
 
-  const minPrice = Math.min(...data.map(d => d.price));
-  const maxPrice = Math.max(...data.map(d => d.price));
+  const minPrice = Math.min(...data.map(d => d.close));
+  const maxPrice = Math.max(...data.map(d => d.close));
   const priceRange = maxPrice - minPrice;
   const yAxisDomain = [
     Math.max(0, minPrice - priceRange * 0.1),

client/src/components/ComboNotifications.tsx

@@ -232,7 +232,18 @@ export const ComboNotificationContainer: React.FC<ComboNotificationContainerProp
     // append any new combos not already in toasts
     setToasts(prev => {
       const existing = new Set(prev.map((t) => t.id));
-      const incoming = combosData.filter((c: any) => !existing.has(c.id));
+      const incoming: ComboNotification[] = combosData
+        .filter((c) => !existing.has(c.id))
+        .map((c) => ({
+          id: c.id,
+          timestamp: c.timestamp,
+          comboName: c.comboName,
+          agents: c.agents,
+          bonusMultiplier: c.bonusMultiplier ?? 1,
+          description: c.description ?? '',
+          impact: c.impact ?? 0,
+          duration: c.duration ?? 0,
+        }));
       return [...prev, ...incoming];
     });
   }, [combosData]);

client/src/components/FeatureImportanceDashboard.tsx

@@ -51,8 +51,14 @@ export function FeatureImportanceDashboard() {
     }
   });
 
-  const features = importanceQ.data?.data || [];
+  const features = (importanceQ.data?.data || []).map((feature) => ({
+    ...feature,
+    correlationWithSuccess: feature.correlationWithSuccess ?? 0,
+    usageFrequency: feature.usageFrequency ?? 0,
+    avgContribution: feature.avgContribution ?? 0,
+  }));
   const featureSets = featureSetsQ.data?.data || [];
+  const loadingSets = featureSetsQ.isLoading;
 
   const topFeatures = features.slice(0, 15);
   const lowFeatures = features.slice(-10).reverse();
@@ -264,7 +270,7 @@ export function FeatureImportanceDashboard() {
                 </div>
               ) : (
                 <div className="grid gap-4 md:grid-cols-2">
-                  {featureSets.map((set: any) => (
+                  {featureSets.map((set) => (
                     <Card key={set.id} data-testid={`ab-test-set-${set.id}`}>
                       <CardContent className="pt-4">
                         <div className="flex justify-between items-start mb-2">

client/src/components/charts/AreaChartCoreImpl.tsx

@@ -2,23 +2,38 @@ import React from 'react';
 import { ResponsiveContainer, AreaChart, Area, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ReferenceLine } from 'recharts';
 
 interface AreaChartCoreProps {
-  data: any[];
+  data: Record<string, unknown>[];
   dataKey: string;
   height?: number;
   gradientId?: string;
   stroke?: string;
   fill?: string;
-  yFormatter?: (v: any) => string;
-  xFormatter?: (v: any) => string;
+  yFormatter?: (v: number) => string;
+  xFormatter?: (v: string | number) => string;
   children?: React.ReactNode;
   xDataKey?: string;
   hideXAxis?: boolean;
   hideYAxis?: boolean;
-  yDomain?: any;
-  referenceLines?: Array<any>;
+  yDomain?: [number | 'auto', number | 'auto'];
+  referenceLines?: Array<Record<string, unknown>>;
 }
 
-export default function AreaChartCoreImpl({ data, dataKey, height = 200, gradientId = 'areaGradient', stroke = '#3b82f6', fill = '#3b82f6', yFormatter, xFormatter, children }: AreaChartCoreProps) {
+export default function AreaChartCoreImpl({
+  data,
+  dataKey,
+  height = 200,
+  gradientId = 'areaGradient',
+  stroke = '#3b82f6',
+  fill = '#3b82f6',
+  yFormatter,
+  xFormatter,
+  children,
+  xDataKey = 'timestamp',
+  hideXAxis,
+  hideYAxis,
+  yDomain,
+  referenceLines,
+}: AreaChartCoreProps) {
   return (
     <ResponsiveContainer width="100%" height="100%">
       <AreaChart data={data}>
@@ -29,7 +44,7 @@ export default function AreaChartCoreImpl({ data, dataKey, height = 200, gradien
           </linearGradient>
         </defs>
         <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
-        <XAxis dataKey={(xDataKey as any) || 'timestamp'} stroke="#94a3b8" tickFormatter={xFormatter} hide={hideXAxis} />
+        <XAxis dataKey={xDataKey} stroke="#94a3b8" tickFormatter={xFormatter} hide={hideXAxis} />
         <YAxis stroke="#94a3b8" tickFormatter={yFormatter} hide={hideYAxis} domain={yDomain} />
         <Tooltip />
         <Area type="monotone" dataKey={dataKey} stroke={stroke} fill={`url(#${gradientId})`} />

client/src/components/charts/BarChartCoreImpl.tsx

@@ -1,22 +1,44 @@
 import React from 'react';
 import { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Cell } from 'recharts';
 
+export interface BarSeries {
+  dataKey: string;
+  stackId?: string | number;
+  fill?: string;
+  radius?: number | [number, number, number, number];
+}
+
 interface BarChartCoreProps {
-  data: any[];
+  data: Record<string, unknown>[];
   dataKey: string;
   layout?: 'vertical' | 'horizontal';
   height?: number;
   children?: React.ReactNode;
+  barSeries?: BarSeries[];
   cellColors?: string[];
-  barProps?: any;
-  xAxisProps?: any;
-  yAxisProps?: any;
-  gridProps?: any;
-  tooltipProps?: any;
-  legendProps?: any;
+  barProps?: Record<string, unknown>;
+  xAxisProps?: Record<string, unknown>;
+  yAxisProps?: Record<string, unknown>;
+  gridProps?: Record<string, unknown>;
+  tooltipProps?: Record<string, unknown>;
+  legendProps?: Record<string, unknown>;
 }
 
-export default function BarChartCoreImpl({ data, dataKey, layout = 'horizontal', height = 200, children, cellColors, barProps }: BarChartCoreProps) {
+export default function BarChartCoreImpl({
+  data,
+  dataKey,
+  layout = 'horizontal',
+  height = 200,
+  children,
+  barSeries,
+  cellColors,
+  barProps,
+  xAxisProps,
+  yAxisProps,
+  gridProps,
+  tooltipProps,
+  legendProps,
+}: BarChartCoreProps) {
   return (
     <ResponsiveContainer width="100%" height="100%">
       <BarChart data={data} layout={layout}>
@@ -26,9 +48,13 @@ export default function BarChartCoreImpl({ data, dataKey, layout = 'horizontal',
         <Tooltip {...(tooltipProps || {})} />
         <Legend {...(legendProps || {})} />
         {children ?? (
-          <Bar dataKey={dataKey} fill="#3b82f6" {...barProps}>
-            {cellColors && cellColors.length > 0 && cellColors.map((c, i) => <Cell key={i} fill={c} />)}
-          </Bar>
+          barSeries && barSeries.length > 0
+            ? barSeries.map((series) => <Bar key={series.dataKey} {...series} />)
+            : (
+              <Bar dataKey={dataKey} fill="#3b82f6" {...barProps}>
+                {cellColors && cellColors.length > 0 && cellColors.map((c, i) => <Cell key={i} fill={c} />)}
+              </Bar>
+            )
         )}
       </BarChart>
     </ResponsiveContainer>