rank Top Setups by expected value, badge the top pick

The dashboard Top Setups list showed raw fields in arbitrary order with no
indication of why a ticker was listed or which was best. Now sort by expected
value (R) — probability-weighted payoff per unit risk — so the strongest
opportunity is row 1, badged "Top pick", with a new Exp. Value column that
folds R:R and target probability into one "is this worth taking" number.

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

frontend/src/lib/qualification.ts

@@ -13,6 +13,21 @@ export function primaryTargetProbability(setup: TradeSetup): number | null {
   return setup.targets?.length ? bestTargetProbability(setup) : null;
 }
 
+/**
+ * Expected value per unit of risk, in R. Probability-weighted payoff:
+ *   EV = p·(R:R) − (1 − p)
+ * where p is the primary target's hit probability. This is the single "is this
+ * worth taking" number — it rewards both a good payoff ratio and a likely
+ * target, so a fat-but-improbable target can't outrank a solid, probable one.
+ * Returns null when no target probability is known.
+ */
+export function expectedValueR(setup: TradeSetup): number | null {
+  const prob = primaryTargetProbability(setup);
+  if (prob == null) return null;
+  const p = prob / 100;
+  return p * setup.rr_ratio - (1 - p);
+}
+
 /** R:R recomputed from the current price (0 if no reward/risk left). */
 export function liveRiskReward(setup: TradeSetup, currentPrice: number): number {
   const reward = setup.direction === 'long' ? setup.target - currentPrice : currentPrice - setup.target;

frontend/src/pages/DashboardPage.tsx

@@ -9,7 +9,7 @@ import { Section } from '../components/ui/Section';
 import { SkeletonCard, SkeletonTable } from '../components/ui/Skeleton';
 import { formatPrice } from '../lib/format';
 import { recommendationActionLabel } from '../lib/recommendation';
-import { qualifiesSetup, activationSummary, primaryTargetProbability } from '../lib/qualification';
+import { qualifiesSetup, activationSummary, primaryTargetProbability, expectedValueR } from '../lib/qualification';
 import type { TradeSetup } from '../lib/types';
 
 function fmtR(value: number | null): string {
@@ -64,12 +64,15 @@ export default function DashboardPage() {
     [trades.data, activation.data],
   );
 
-  // Show qualified setups first; fall back to the full list when none qualify
+  // Show qualified setups first; fall back to the full list when none qualify.
+  // Rank by expected value (R) so the best opportunity sits at the top.
   const showingQualified = qualifiedSetups.length > 0;
-  const topSetups: TradeSetup[] = useMemo(
+  const topSetups: TradeSetup[] = useMemo(() => {
-    () => (showingQualified ? qualifiedSetups : trades.data ?? []).slice(0, 5),
+    const pool = showingQualified ? qualifiedSetups : trades.data ?? [];
-    [showingQualified, qualifiedSetups, trades.data],
+    return [...pool]
-  );
+      .sort((a, b) => (expectedValueR(b) ?? -Infinity) - (expectedValueR(a) ?? -Infinity))
+      .slice(0, 5);
+  }, [showingQualified, qualifiedSetups, trades.data]);
 
   const topWatchlist = useMemo(
     () =>
@@ -130,7 +133,10 @@ export default function DashboardPage() {
       <div className="grid gap-8 xl:grid-cols-5">
         {/* Top setups */}
         <div className="xl:col-span-3">
-          <Section title="Top Setups" hint={showingQualified ? 'qualified' : 'none qualified — showing all'}>
+          <Section
+            title="Top Setups"
+            hint={showingQualified ? 'ranked by expected value' : 'none qualified — showing all'}
+          >
             {trades.isLoading && <SkeletonTable rows={5} cols={5} />}
             {trades.isError && <Callout variant="error">Failed to load setups</Callout>}
             {trades.data && topSetups.length === 0 && (
@@ -146,16 +152,32 @@ export default function DashboardPage() {
                       <th className="px-4 py-3 text-right">Entry</th>
                       <th className="px-4 py-3 text-right">R:R</th>
                       <th className="px-4 py-3 text-right">Target&nbsp;Prob</th>
+                      <th className="px-4 py-3 text-right">Exp.&nbsp;Value</th>
                       <th className="hidden px-4 py-3 md:table-cell">Action</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {topSetups.map((setup) => (
+                    {topSetups.map((setup, i) => {
-                      <tr key={setup.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                      const ev = expectedValueR(setup);
+                      const isTopPick = i === 0;
+                      return (
+                        <tr
+                          key={setup.id}
+                          className={`border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03] ${
+                            isTopPick ? 'bg-blue-500/[0.06]' : ''
+                          }`}
+                        >
                           <td className="px-4 py-3">
+                            <div className="flex items-center gap-2">
                               <Link to={`/ticker/${setup.symbol}`} className="font-medium text-blue-300 hover:text-blue-200 transition-colors">
                                 {setup.symbol}
                               </Link>
+                              {isTopPick && (
+                                <span className="rounded bg-blue-500/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-blue-300">
+                                  Top pick
+                                </span>
+                              )}
+                            </div>
                           </td>
                           <td className="px-4 py-3"><DirectionTag direction={setup.direction} /></td>
                           <td className="num px-4 py-3 text-right text-gray-200">{formatPrice(setup.entry_price)}</td>
@@ -166,14 +188,21 @@ export default function DashboardPage() {
                               return p != null ? `${Math.round(p)}%` : '—';
                             })()}
                           </td>
+                          <td className={`num px-4 py-3 text-right font-semibold ${rColor(ev)}`}>
+                            {fmtR(ev)}
+                          </td>
                           <td className="hidden px-4 py-3 text-xs text-gray-400 md:table-cell">
                             {recommendationActionLabel(setup.recommended_action)}
                           </td>
                         </tr>
-                    ))}
+                      );
+                    })}
                   </tbody>
                 </table>
-                <div className="border-t border-white/[0.04] px-4 py-2.5">
+                <div className="flex items-center justify-between border-t border-white/[0.04] px-4 py-2.5">
+                  <span className="text-[11px] text-gray-500">
+                    Exp. Value = probability-weighted payoff per unit of risk
+                  </span>
                   <Link to="/signals" className="text-xs font-medium text-blue-300 hover:text-blue-200 transition-colors">
                     All setups →
                   </Link>