Recommendation module in Horizon language; Standing/Dimensions as tabs

RecommendationPanel redesigned to match the rest of the redesign:

- Setup cards use the spatial price rail (stop -> entry -> now ->
  target with live R-multiples) instead of the label/value text grid.
- One quiet chip row per card (direction, preferred marker, confidence,
  R:R, target probability) replaces scattered header text.
- Position sizing is a single mono line (shares / position / max loss)
  instead of a boxed 3-column mini-table; Mark-as-taken flow kept, in
  the standard cyan button style.
- Full target ladder moves behind a disclosure (the primary target is
  already on the rail); warnings (counter-trend, stale/invalidated
  drift, earnings window, conflict flags) all kept.
- Cards are quiet outlined blocks, no glass-in-glass; the module
  renders frameless inside the unified ticker panel's Analysis tab,
  under the chart.

Ticker panel tabs now: Analysis, Standing, Dimensions, Indicators,
S/R Levels, Sentiment, Fundamentals - Standing and Dimensions were the
last below-the-fold sections; the whole page is now the single panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/ticker/RecommendationPanel.tsx

@@ -7,6 +7,8 @@ import { useRiskSettings, type RiskSettings } from '../../hooks/useRiskSettings'
 import { positionSize } from '../../lib/position';
 import { useMarketRegime } from '../../hooks/useMarketRegime';
 import { isCounterTrend } from '../../lib/regime';
+import { primaryTargetProbability } from '../../lib/qualification';
+import { PriceRail } from '../charts/horizon';
 import type { MarketRegime } from '../../lib/types';
 
 interface RecommendationPanelProps {
@@ -15,6 +17,8 @@ interface RecommendationPanelProps {
   shortSetup?: TradeSetup;
   currentPrice?: number;
   nextEarningsDate?: string | null;
+  /** Render without the section/glass wrapper (inside the unified ticker panel). */
+  frameless?: boolean;
 }
 
 /** Whole days from today until an ISO date (negative if past). */
@@ -65,9 +69,9 @@ function notActionableState(setup: TradeSetup, currentPrice?: number) {
 }
 
 function riskClass(risk: TradeSetup['risk_level']) {
-  if (risk === 'Low') return 'text-emerald-400';
+  if (risk === 'Low') return 'text-emerald-300';
   if (risk === 'Medium') return 'text-amber-400';
-  if (risk === 'High') return 'text-red-400';
+  if (risk === 'High') return 'text-red-300';
   return 'text-gray-400';
 }
 
@@ -77,6 +81,25 @@ function isRecommended(setup: TradeSetup | undefined, action: TradeSetup['recomm
   return action.startsWith('SHORT');
 }
 
+function DirTag({ direction }: { direction: string }) {
+  const isLong = direction === 'long';
+  return (
+    <span className={`num inline-block rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${
+      isLong ? 'bg-emerald-500/15 text-emerald-300' : 'bg-red-500/15 text-red-300'
+    }`}>
+      {direction}
+    </span>
+  );
+}
+
+function Chip({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="rounded-full border border-white/[0.09] px-2.5 py-0.5 text-[11px] text-gray-400">
+      {children}
+    </span>
+  );
+}
+
 function TargetTable({ setup }: { setup: TradeSetup }) {
   if (!setup.targets || setup.targets.length === 0) {
     return <p className="text-xs text-gray-500">No target probabilities available.</p>;
@@ -119,7 +142,7 @@ function TargetTable({ setup }: { setup: TradeSetup }) {
 function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: TradeSetup; action?: TradeSetup['recommended_action']; currentPrice?: number; risk: RiskSettings; regime?: MarketRegime }) {
   if (!setup) {
     return (
-      <div className="glass-sm p-4 text-xs text-gray-500">
+      <div className="rounded-xl border border-white/[0.07] p-4 text-xs text-gray-500">
         Setup unavailable for this direction.
       </div>
     );
@@ -129,6 +152,7 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
   const drift = entryDrift(setup, currentPrice);
   const sizing = positionSize(risk.accountSize, risk.riskPct, setup.entry_price, setup.stop_loss);
   const counterTrend = regime ? isCounterTrend(setup.direction, regime.label) : false;
+  const prob = primaryTargetProbability(setup);
 
   // When price has run to/past the target (played out) or through the stop
   // (invalidated), there is no fresh setup — show a plain "no current setup"
@@ -159,23 +183,20 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
   if (notActionable) {
     const dir = setup.direction.toUpperCase();
     return (
-      <div data-direction={setup.direction} className="glass-sm p-4 space-y-2">
-        <div className="flex items-center justify-between">
-          <h4 className={`text-sm font-semibold ${setup.direction === 'long' ? 'text-emerald-400' : 'text-red-400'}`}>
-            {dir}
-          </h4>
-          <span className="text-[10px] uppercase tracking-wider text-gray-500">No current setup</span>
+      <div data-direction={setup.direction} className="rounded-xl border border-white/[0.07] p-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <DirTag direction={setup.direction} />
+          <span className="num text-[10px] uppercase tracking-[0.16em] text-gray-500">no current setup</span>
+          <span className="num ml-auto text-xs text-gray-500">
+            now {currentPrice != null ? formatPrice(currentPrice) : '—'} · last entry {formatPrice(setup.entry_price)}
+            {drift ? ` (${drift.pct >= 0 ? '+' : ''}${drift.pct.toFixed(1)}%)` : ''} · last target {formatPrice(setup.target)}
+          </span>
         </div>
-        <p className="text-[11px] text-gray-400">
+        <p className="mt-2 text-[11.5px] leading-relaxed text-gray-400">
           {invalidated
             ? `The last ${dir} setup is invalidated — price (${formatPrice(currentPrice!)}) has passed the stop (${formatPrice(setup.stop_loss)}). No fresh ${dir} setup right now; the scanner surfaces a new one when it forms.`
             : `The last ${dir} setup has played out — price (${formatPrice(currentPrice!)}) is at or past the target (${formatPrice(setup.target)}). No fresh ${dir} setup right now; the scanner surfaces a new one when it forms.`}
         </p>
-        <div className="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
-          <div className="text-gray-500">Current</div><div className="font-mono text-gray-300">{currentPrice != null ? formatPrice(currentPrice) : '—'}</div>
-          <div className="text-gray-500">Last entry</div><div className="font-mono text-gray-400">{formatPrice(setup.entry_price)}{drift ? ` (${drift.pct >= 0 ? '+' : ''}${drift.pct.toFixed(1)}%)` : ''}</div>
-          <div className="text-gray-500">Last target</div><div className="font-mono text-gray-400">{formatPrice(setup.target)}</div>
-        </div>
       </div>
     );
   }
@@ -183,90 +204,86 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
   return (
     <div
       data-direction={setup.direction}
-      className={`glass-sm p-4 space-y-3 ${recommended ? 'border border-emerald-500/40' : 'opacity-80'}`}
+      className={`rounded-xl border p-4 ${recommended ? 'border-blue-400/25' : 'border-white/[0.07] opacity-80'}`}
     >
-      <div className="flex items-center justify-between">
-        <h4 className={`text-sm font-semibold ${setup.direction === 'long' ? 'text-emerald-400' : 'text-red-400'}`}>
-          {setup.direction.toUpperCase()}
-        </h4>
-        <span className="text-xs text-gray-300">{setup.confidence_score?.toFixed(1) ?? '—'}%</span>
+      {/* Identity + key stats in one quiet row */}
+      <div className="flex flex-wrap items-center gap-2">
+        <DirTag direction={setup.direction} />
+        {recommended && (
+          <span className="num rounded-full border border-[#ff6a45]/40 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-[0.18em] text-[#ff6a45]">
+            preferred
+          </span>
+        )}
+        <Chip>confidence {setup.confidence_score?.toFixed(0) ?? '—'}%</Chip>
+        <Chip>R:R {setup.rr_ratio.toFixed(1)}:1</Chip>
+        {prob != null && <Chip>target prob {Math.round(prob)}%</Chip>}
       </div>
 
-      {!recommended && recommendationActionDirection(action ?? null) !== 'neutral' && (
-        <p className="text-[11px] text-amber-400">Alternative setup (ticker bias currently favors the opposite direction).</p>
-      )}
-
-      {counterTrend && regime && (
-        <p className="text-[11px] text-amber-400">
-          ⚠ Counter-trend: {setup.direction.toUpperCase()} against a {regime.label} market
-          ({regime.benchmark ?? 'SPY'}). Lower odds — size down or wait for confirmation.
-        </p>
-      )}
-
-      {drift && drift.status === 'invalidated' && (
-        <p className="text-[11px] text-red-400">
-          ⚠ Price ({formatPrice(currentPrice!)}) is past the stop — this setup is invalidated.
-        </p>
-      )}
-      {drift && drift.status === 'stale' && (
-        <p className="text-[11px] text-amber-400">
-          {drift.towardTarget
-            ? `⚠ ${drift.progressPct.toFixed(0)}% of the entry→target move is already gone (${drift.pct >= 0 ? '+' : ''}${drift.pct.toFixed(1)}% from entry) — little reward left.`
-            : `⚠ Price has moved ${Math.abs(drift.pct).toFixed(1)}% against the setup (toward the stop) — entry may be stale.`}
-        </p>
-      )}
-
-      <div className="grid grid-cols-2 gap-2 text-xs">
-        <div className="text-gray-500">Current</div><div className="font-mono text-gray-200">{currentPrice != null ? formatPrice(currentPrice) : '—'}</div>
-        <div className="text-gray-500">Entry</div><div className="font-mono text-gray-200">{formatPrice(setup.entry_price)}{drift ? ` (${drift.pct >= 0 ? '+' : ''}${drift.pct.toFixed(1)}%)` : ''}</div>
-        <div className="text-gray-500">Stop</div><div className="font-mono text-gray-200">{formatPrice(setup.stop_loss)}</div>
-        <div className="text-gray-500">Primary Target</div><div className="font-mono text-gray-200">{formatPrice(setup.target)}</div>
-        <div className="text-gray-500">R:R</div><div className="font-mono text-gray-200">{setup.rr_ratio.toFixed(2)}</div>
-      </div>
-
-      {sizing ? (
-        <div className="rounded border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs">
-          <p className="mb-1.5 text-[10px] uppercase tracking-wider text-gray-500">
-            Position size · {risk.riskPct}% of {formatPrice(risk.accountSize)}
-          </p>
-          <div className="grid grid-cols-3 gap-2 text-center">
-            <div>
-              <div className="font-mono text-sm text-gray-100">{sizing.shares}</div>
-              <div className="text-[10px] text-gray-500">shares</div>
-            </div>
-            <div>
-              <div className={`font-mono text-sm ${sizing.exceedsAccount ? 'text-amber-400' : 'text-gray-100'}`}>{formatPrice(sizing.positionValue)}</div>
-              <div className="text-[10px] text-gray-500">position</div>
-            </div>
-            <div>
-              <div className="font-mono text-sm text-gray-100">{formatPrice(sizing.dollarRisk)}</div>
-              <div className="text-[10px] text-gray-500">max loss</div>
-            </div>
-          </div>
-          {sizing.exceedsAccount && (
-            <p className="mt-1.5 text-[10px] text-amber-400">Position exceeds account — needs margin.</p>
+      {/* Warnings — only when they apply */}
+      {(counterTrend || (!recommended && recommendationActionDirection(action ?? null) !== 'neutral') || drift?.status !== 'fresh') && (
+        <div className="mt-2.5 space-y-1">
+          {!recommended && recommendationActionDirection(action ?? null) !== 'neutral' && (
+            <p className="text-[11px] text-amber-400">Alternative setup — the ticker bias currently favors the opposite direction.</p>
+          )}
+          {counterTrend && regime && (
+            <p className="text-[11px] text-amber-400">
+              ⚠ Counter-trend: {setup.direction.toUpperCase()} against a {regime.label} market
+              ({regime.benchmark ?? 'SPY'}). Lower odds — size down or wait for confirmation.
+            </p>
+          )}
+          {drift && drift.status === 'invalidated' && (
+            <p className="text-[11px] text-red-300">
+              ⚠ Price ({formatPrice(currentPrice!)}) is past the stop — this setup is invalidated.
+            </p>
+          )}
+          {drift && drift.status === 'stale' && (
+            <p className="text-[11px] text-amber-400">
+              {drift.towardTarget
+                ? `⚠ ${drift.progressPct.toFixed(0)}% of the entry→target move is already gone (${drift.pct >= 0 ? '+' : ''}${drift.pct.toFixed(1)}% from entry) — little reward left.`
+                : `⚠ Price has moved ${Math.abs(drift.pct).toFixed(1)}% against the setup (toward the stop) — entry may be stale.`}
+            </p>
           )}
         </div>
-      ) : (
-        <p className="text-[11px] text-gray-600">Set account size below to size this trade.</p>
       )}
 
-      {!taking ? (
-        <button
-          onClick={() => {
-            setTakeShares(sizing?.shares ?? 0);
-            setTakeEntry(currentPrice ?? setup.entry_price);
-            setTaking(true);
-          }}
-          className="w-full rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-300 transition-colors hover:bg-emerald-500/20"
-        >
-          + Mark as taken (paper trade)
-        </button>
-      ) : (
-        <div className="rounded-md border border-white/[0.08] bg-white/[0.02] p-2.5 space-y-2">
+      {/* The setup, spatially — stop → entry → now → target */}
+      <PriceRail
+        direction={setup.direction}
+        entry={setup.entry_price}
+        stop={setup.stop_loss}
+        target={setup.target}
+        current={currentPrice ?? null}
+      />
+
+      {/* Sizing + take, one line */}
+      <div className="mt-1 flex flex-wrap items-center justify-between gap-3 border-t border-white/[0.06] pt-3">
+        {sizing ? (
+          <span className="num text-xs text-gray-400">
+            {sizing.shares} shares · {formatPrice(sizing.positionValue)} position · max loss {formatPrice(sizing.dollarRisk)}
+            {sizing.exceedsAccount && <span className="ml-2 text-amber-400">exceeds account — needs margin</span>}
+          </span>
+        ) : (
+          <span className="text-[11px] text-gray-600">Set account size above to size this trade.</span>
+        )}
+        {!taking && (
+          <button
+            onClick={() => {
+              setTakeShares(sizing?.shares ?? 0);
+              setTakeEntry(currentPrice ?? setup.entry_price);
+              setTaking(true);
+            }}
+            className="rounded-lg border border-blue-500/35 bg-blue-500/15 px-3.5 py-1.5 text-xs font-semibold text-blue-300 transition-colors hover:bg-blue-500/25"
+          >
+            Mark as taken
+          </button>
+        )}
+      </div>
+
+      {taking && (
+        <div className="mt-3 rounded-lg border border-white/[0.08] p-3 space-y-2.5">
           <div className="grid grid-cols-2 gap-2">
             <label className="block space-y-1">
-              <span className="text-[10px] uppercase tracking-wider text-gray-500">Shares</span>
+              <span className="num text-[10px] uppercase tracking-wider text-gray-500">Shares</span>
               <input
                 type="number"
                 min={0}
@@ -276,7 +293,7 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
               />
             </label>
             <label className="block space-y-1">
-              <span className="text-[10px] uppercase tracking-wider text-gray-500">Entry</span>
+              <span className="num text-[10px] uppercase tracking-wider text-gray-500">Entry</span>
               <input
                 type="number"
                 min={0}
@@ -287,20 +304,20 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
               />
             </label>
           </div>
-          <p className="text-[10px] text-gray-500">
-            Stop {formatPrice(setup.stop_loss)} · Target {formatPrice(setup.target)} · {setup.direction.toUpperCase()}
+          <p className="num text-[10px] text-gray-500">
+            Stop {formatPrice(setup.stop_loss)} · Target {formatPrice(setup.target)} · {setup.direction.toUpperCase()} paper trade
           </p>
           <div className="flex gap-2">
             <button
               onClick={confirmTake}
               disabled={createTrade.isPending || !(takeShares > 0) || !(takeEntry > 0)}
-              className="flex-1 rounded-md bg-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-300 hover:bg-emerald-500/30 disabled:opacity-50"
+              className="flex-1 rounded-lg border border-blue-500/35 bg-blue-500/15 px-3 py-1.5 text-xs font-semibold text-blue-300 transition-colors hover:bg-blue-500/25 disabled:opacity-50"
             >
               {createTrade.isPending ? 'Taking…' : 'Confirm'}
             </button>
             <button
               onClick={() => setTaking(false)}
-              className="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-gray-400 hover:text-gray-200"
+              className="rounded-lg border border-white/[0.08] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:text-gray-200"
             >
               Cancel
             </button>
@@ -308,12 +325,22 @@ function SetupCard({ setup, action, currentPrice, risk, regime }: { setup?: Trad
         </div>
       )}
 
-      <TargetTable setup={setup} />
+      {/* Full target ladder — primary is already on the rail */}
+      {setup.targets && setup.targets.length > 0 && (
+        <details className="mt-3">
+          <summary className="cursor-pointer text-[11px] font-medium text-gray-500 transition-colors hover:text-gray-300">
+            All targets ({setup.targets.length}) · price / distance / R:R / probability
+          </summary>
+          <div className="mt-2">
+            <TargetTable setup={setup} />
+          </div>
+        </details>
+      )}
 
       {setup.conflict_flags.length > 0 && (
-        <div className="rounded border border-amber-500/30 bg-amber-500/10 p-2 text-[11px] text-amber-300">
+        <p className="mt-3 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] text-amber-300">
           {setup.conflict_flags.join(' • ')}
-        </div>
+        </p>
       )}
     </div>
   );
@@ -361,7 +388,7 @@ function RiskControls({ risk, update }: { risk: RiskSettings; update: (p: Partia
   );
 }
 
-export function RecommendationPanel({ symbol, longSetup, shortSetup, currentPrice, nextEarningsDate }: RecommendationPanelProps) {
+export function RecommendationPanel({ symbol, longSetup, shortSetup, currentPrice, nextEarningsDate, frameless = false }: RecommendationPanelProps) {
   const { settings: risk, update: updateRisk } = useRiskSettings();
   const regime = useMarketRegime().data;
   const summary = longSetup?.recommendation_summary ?? shortSetup?.recommendation_summary;
@@ -392,67 +419,76 @@ export function RecommendationPanel({ symbol, longSetup, shortSetup, currentPric
   // above a "no current setup" card.
   const preferredInactive = preferredSetup ? notActionableState(preferredSetup, currentPrice) : null;
 
+  const body = (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        {preferredInactive ? (
+          <span className="text-sm font-semibold text-gray-400">
+            No current setup <span className="font-normal text-gray-500">(last {preferredDirection} bias {recommendationActionLabel(action).toLowerCase()} — {preferredInactive.invalidated ? 'invalidated' : 'played out'})</span>
+          </span>
+        ) : (
+          <span className="text-sm font-semibold text-blue-300">{recommendationActionLabel(action)}</span>
+        )}
+        <span className={`text-sm font-semibold ${riskClass(summary?.risk_level ?? null)}`}>
+          Risk: {summary?.risk_level ?? '—'}
+        </span>
+        <div className="ml-auto">
+          <RiskControls risk={risk} update={updateRisk} />
+        </div>
+      </div>
+
+      {summary?.reasoning && !preferredInactive && (
+        <p className="text-sm leading-relaxed text-gray-300">{summary.reasoning}</p>
+      )}
+
+      {earningsDays != null && earningsDays >= 0 && (
+        earningsDays <= EARNINGS_HORIZON_DAYS ? (
+          <p className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] text-amber-300">
+            ⚠ Earnings in {earningsDays} day{earningsDays === 1 ? '' : 's'} ({nextEarningsDate}) — inside the ~30-day
+            target horizon. A report can gap price through your stop or target; consider waiting or sizing down.
+          </p>
+        ) : (
+          <p className="text-[11px] text-gray-500">Next earnings: {nextEarningsDate} ({earningsDays} days).</p>
+        )
+      )}
+
+      {preferredDirection !== 'neutral' && preferredSetup ? (
+        <div className="space-y-3">
+          <SetupCard setup={preferredSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
+
+          {alternativeSetup && (
+            <details>
+              <summary className="cursor-pointer text-xs font-medium text-gray-500 transition-colors hover:text-gray-300">
+                Alternative scenario ({alternativeSetup.direction.toUpperCase()})
+              </summary>
+              <div className="mt-3">
+                <SetupCard setup={alternativeSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
+              </div>
+            </details>
+          )}
+        </div>
+      ) : (
+        <div className="grid gap-4 lg:grid-cols-2">
+          <SetupCard setup={longSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
+          <SetupCard setup={shortSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
+        </div>
+      )}
+    </div>
+  );
+
+  if (frameless) {
+    return (
+      <div>
+        <p className="section-index mb-3">Recommendation · {symbol.toUpperCase()}</p>
+        {body}
+      </div>
+    );
+  }
+
   return (
     <section>
       <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Recommendation</h2>
-      <div className="glass p-5 space-y-4">
-        <div className="flex flex-wrap items-center gap-4">
-          {preferredInactive ? (
-            <span className="text-sm font-semibold text-gray-400">
-              No current setup <span className="font-normal text-gray-500">(last {preferredDirection} bias {recommendationActionLabel(action).toLowerCase()} — {preferredInactive.invalidated ? 'invalidated' : 'played out'})</span>
-            </span>
-          ) : (
-            <span className="text-sm font-semibold text-blue-300">{recommendationActionLabel(action)}</span>
-          )}
-          <span className={`text-sm font-semibold ${riskClass(summary?.risk_level ?? null)}`}>
-            Risk: {summary?.risk_level ?? '—'}
-          </span>
-          <span className="text-sm text-gray-300">Composite: {summary?.composite_score?.toFixed(1) ?? '—'}</span>
-          <span className="text-xs text-gray-500">{symbol.toUpperCase()}</span>
-          <div className="ml-auto">
-            <RiskControls risk={risk} update={updateRisk} />
-          </div>
-        </div>
-
-        <p className="text-xs text-gray-500">Recommended Action is the ticker-level bias. The preferred setup is shown first; the opposite side is available under Alternative scenario.</p>
-
-        {summary?.reasoning && !preferredInactive && (
-          <p className="text-sm text-gray-300">{summary.reasoning}</p>
-        )}
-
-        {earningsDays != null && earningsDays >= 0 && (
-          earningsDays <= EARNINGS_HORIZON_DAYS ? (
-            <p className="rounded border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] text-amber-300">
-              ⚠ Earnings in {earningsDays} day{earningsDays === 1 ? '' : 's'} ({nextEarningsDate}) — inside the ~30-day
-              target horizon. A report can gap price through your stop or target; consider waiting or sizing down.
-            </p>
-          ) : (
-            <p className="text-[11px] text-gray-500">Next earnings: {nextEarningsDate} ({earningsDays} days).</p>
-          )
-        )}
-
-        {preferredDirection !== 'neutral' && preferredSetup ? (
-          <div className="space-y-3">
-            <SetupCard setup={preferredSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
-
-            {alternativeSetup && (
-              <details className="glass-sm p-3">
-                <summary className="cursor-pointer text-xs font-medium text-gray-300">
-                  Alternative scenario ({alternativeSetup.direction.toUpperCase()})
-                </summary>
-                <div className="mt-3">
-                  <SetupCard setup={alternativeSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
-                </div>
-              </details>
-            )}
-          </div>
-        ) : (
-          <div className="grid gap-4 lg:grid-cols-2">
-            <SetupCard setup={longSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
-            <SetupCard setup={shortSetup} action={action} currentPrice={currentPrice} risk={risk} regime={regime} />
-          </div>
-        )}
-      </div>
+      <div className="glass p-5 space-y-4">{body}</div>
     </section>
   );
 }