Big refactoring

frontend/src/components/scanner/TradeTable.tsx

@@ -1,8 +1,9 @@
 import { Link } from 'react-router-dom';
 import type { TradeSetup } from '../../lib/types';
 import { formatPrice, formatPercent, formatDateTime } from '../../lib/format';
+import { recommendationActionDirection, recommendationActionLabel } from '../../lib/recommendation';
 
-export type SortColumn = 'symbol' | 'direction' | 'entry_price' | 'stop_loss' | 'target' | 'risk_amount' | 'reward_amount' | 'rr_ratio' | 'stop_pct' | 'target_pct' | 'composite_score' | 'detected_at';
+export type SortColumn = 'symbol' | 'direction' | 'recommended_action' | 'confidence_score' | 'entry_price' | 'stop_loss' | 'target' | 'best_target_probability' | 'risk_amount' | 'reward_amount' | 'rr_ratio' | 'stop_pct' | 'target_pct' | 'risk_level' | 'composite_score' | 'detected_at';
 export type SortDirection = 'asc' | 'desc';
 
 interface TradeTableProps {
@@ -14,15 +15,19 @@ interface TradeTableProps {
 
 const columns: { key: SortColumn; label: string }[] = [
   { key: 'symbol', label: 'Symbol' },
+  { key: 'recommended_action', label: 'Recommended Action' },
+  { key: 'confidence_score', label: 'Confidence' },
   { key: 'direction', label: 'Direction' },
   { key: 'entry_price', label: 'Entry' },
   { key: 'stop_loss', label: 'Stop Loss' },
   { key: 'target', label: 'Target' },
+  { key: 'best_target_probability', label: 'Best Target' },
   { key: 'risk_amount', label: 'Risk $' },
   { key: 'reward_amount', label: 'Reward $' },
   { key: 'rr_ratio', label: 'R:R' },
   { key: 'stop_pct', label: '% to Stop' },
   { key: 'target_pct', label: '% to Target' },
+  { key: 'risk_level', label: 'Risk' },
   { key: 'composite_score', label: 'Score' },
   { key: 'detected_at', label: 'Detected' },
 ];
@@ -53,6 +58,19 @@ function sortIndicator(column: SortColumn, active: SortColumn, dir: SortDirectio
   return dir === 'asc' ? ' ▲' : ' ▼';
 }
 
+function riskLevelClass(riskLevel: TradeSetup['risk_level']) {
+  if (riskLevel === 'Low') return 'text-emerald-400';
+  if (riskLevel === 'Medium') return 'text-amber-400';
+  if (riskLevel === 'High') return 'text-red-400';
+  return 'text-gray-400';
+}
+
+function bestTargetText(trade: TradeSetup) {
+  if (!trade.targets || trade.targets.length === 0) return '—';
+  const best = [...trade.targets].sort((a, b) => b.probability - a.probability)[0];
+  return `${formatPrice(best.price)} (${best.probability.toFixed(0)}%)`;
+}
+
 export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeTableProps) {
   if (trades.length === 0) {
     return <p className="py-8 text-center text-sm text-gray-500">No trade setups match the current filters.</p>;
@@ -84,6 +102,17 @@ export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeT
                     {trade.symbol}
                   </Link>
                 </td>
+                <td className="px-4 py-3.5">
+                  <div className="space-y-0.5">
+                    <span className="text-xs font-semibold text-indigo-300">{recommendationActionLabel(trade.recommended_action)}</span>
+                    {recommendationActionDirection(trade.recommended_action) !== 'neutral' && recommendationActionDirection(trade.recommended_action) !== trade.direction && (
+                      <div className="text-[10px] text-amber-400">Alternative setup (not preferred)</div>
+                    )}
+                  </div>
+                </td>
+                <td className="px-4 py-3.5">
+                  <span className="font-mono text-gray-200">{trade.confidence_score === null ? '—' : `${trade.confidence_score.toFixed(1)}%`}</span>
+                </td>
                 <td className="px-4 py-3.5">
                   <span className={trade.direction === 'long' ? 'font-medium text-emerald-400' : 'font-medium text-red-400'}>
                     {trade.direction}
@@ -92,11 +121,13 @@ export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeT
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.entry_price)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.stop_loss)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(trade.target)}</td>
+                <td className="px-4 py-3.5 font-mono text-gray-200">{bestTargetText(trade)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(analysis.risk_amount)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPrice(analysis.reward_amount)}</td>
                 <td className={`px-4 py-3.5 font-mono font-semibold ${rrColorClass(trade.rr_ratio)}`}>{trade.rr_ratio.toFixed(2)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPercent(analysis.stop_pct)}</td>
                 <td className="px-4 py-3.5 font-mono text-gray-200">{formatPercent(analysis.target_pct)}</td>
+                <td className={`px-4 py-3.5 font-semibold ${riskLevelClass(trade.risk_level)}`}>{trade.risk_level ?? '—'}</td>
                 <td className="px-4 py-3.5">
                   <span className={`font-semibold ${trade.composite_score > 70 ? 'text-emerald-400' : trade.composite_score >= 40 ? 'text-amber-400' : 'text-red-400'}`}>
                     {Math.round(trade.composite_score)}