PARLAY: left mascot rail with cigar smoke, Crazy Horse moved to the top, ticket confidence score removed

docs/HANDOFF.md

@@ -550,8 +550,7 @@ haircut) is returned as `crazyHorse` and shown as the hero at the bottom of the
 `GET /api/jimmy/scan` is the deep-scan funnel (sides scored, legs per tier, tickets built).
 NFL game legs trust only half of the model's gap from 50% (Vegas is sharper than a 2-game model).
 The CHARTS and PLAYER tabs are hidden from the nav (the player page still opens from a leaders click); the
-default view is PARLAY and the node canvas is hidden behind a NODES tab. Every ticket carries a `confidence`
-(average leg probability), a photo strip when it pays +800 or more, and a FAKE IT (default) / TAKE IT control
+default view is PARLAY and the node canvas is hidden behind a NODES tab. Every ticket carries a photo strip when it pays +800 or more, and a FAKE IT (default) / TAKE IT control
 (`TicketCard.tsx`, `TakeItFakeIt.tsx`). SPY BOY is grouped into tickets A and B (up to C), five legs max, best
 payouts first; CRAZY HORSE is 10 high-probability legs; `jimmy_featured.py` builds the featured single-player RB
 parlay (anytime TD + 70+ rush yds + 3+ rec) shown in the white panel at the top of PARLAY. The lake has no

frontend/src/components/EngineTab.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { api } from "../api";
 import type { EngineSlip, PowSummary } from "../types";
 import TakeItFakeIt from "./TakeItFakeIt";
-import TicketCard, { ConfidenceRing, LegLine, TYPE_META, american } from "./TicketCard";
+import TicketCard, { LegLine, TYPE_META, american } from "./TicketCard";
 import { useEngine } from "./useEngine";
 
 const TYPE_ORDER = ["BPL_EDGE", "SPY_BOY"];
@@ -32,7 +32,6 @@ export function CrazyHorseHero({ slip }: { slip: EngineSlip }) {
               {american(slip.boostedAmericanOdds)} · {slip.hitProbability !== undefined ? `${(slip.hitProbability * 100).toFixed(1)}%` : "—"} to hit all {slip.legs.length}
             </span>
           </div>
-          <ConfidenceRing value={slip.confidence ?? 0} size={78} />
         </div>
       </div>
 
@@ -63,7 +62,7 @@ function PowLine({ pow }: { pow: PowSummary | null }) {
   );
 }
 
-export default function EngineTab() {
+export default function EngineTab({ showHorse = true }: { showHorse?: boolean }) {
   const { data, error } = useEngine();
   const [filter, setFilter] = useState<string>("ALL");
   const [pow, setPow] = useState<PowSummary | null>(null);
@@ -75,10 +74,11 @@ export default function EngineTab() {
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 1100, width: "100%", margin: "0 auto" }}>
+      {showHorse && data?.crazyHorse && <CrazyHorseHero slip={data.crazyHorse} />}
       <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-        <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: "0.14em", color: "var(--bp-muted)" }}>PROPPA ENGINE · EVERY TICKET SCORED</span>
+        <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: "0.14em", color: "var(--bp-muted)" }}>PROPPA ENGINE · EVERY TICKET PRICED</span>
         <span style={{ fontSize: 11, color: "var(--bp-muted)" }}>
-          Big Proppa Line vs FanDuel · player props, NFL games and college · one leg per game · confidence = average leg probability · every ticket defaults to FAKE IT in MY BOO
+          Big Proppa Line vs FanDuel · player props, NFL games and college · one leg per game · every ticket defaults to FAKE IT in MY BOO
         </span>
         <PowLine pow={pow} />
       </div>
@@ -108,7 +108,6 @@ export default function EngineTab() {
 
       {visible.map((slip) => <TicketCard key={slip.id} slip={slip} />)}
 
-      {slips && slips.length > 0 && data?.crazyHorse && <CrazyHorseHero slip={data.crazyHorse} />}
     </div>
   );
 }

frontend/src/components/FeaturedPlayer.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { EngineSlip } from "../types";
 import TakeItFakeIt from "./TakeItFakeIt";
-import { ConfidenceRing, american } from "./TicketCard";
+import { american } from "./TicketCard";
 
 const MONO = "var(--font-mono, monospace)";
 
@@ -30,7 +30,6 @@ export default function FeaturedPlayer({ slip }: { slip: EngineSlip }) {
                 <span style={{ fontSize: 40, fontWeight: 900, lineHeight: 1, letterSpacing: "-0.01em" }}>{p.name}</span>
                 <span style={{ fontSize: 15, color: "#6b6553", fontWeight: 600 }}>{p.team} · {p.position}</span>
               </div>
-              <ConfidenceRing value={slip.confidence ?? 0} size={72} light />
             </div>
 
             <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>

frontend/src/components/MascotRail.tsx

@@ -0,0 +1,33 @@
+/**
+ * Left-hand mascot column: the Big Proppa photo with the cigar ember and rising smoke, sized to the
+ * column. Uses the same smoke animation as SmokeBadge (theme.css) and its measured ember anchor
+ * (left 21.5%, top 61% of the photo). If a full-body image is supplied later, drop it in as
+ * /big-proppa-full.png, set FULL_BODY = true, and re-measure the ember anchor for the new cigar tip.
+ */
+const FULL_BODY = false;
+const SRC = FULL_BODY ? "/big-proppa-full.png" : "/big-proppa.png";
+const ANCHOR = FULL_BODY ? { left: "21.5%", top: "61%" } : { left: "21.5%", top: "61%" };
+const ASPECT = 520 / 512;
+
+export default function MascotRail({ width = 300 }: { width?: number }) {
+  const puffs = ["bp-puff-a1", "bp-puff-b1", "bp-puff-c1", "bp-puff-a2", "bp-puff-b2", "bp-wisp-1", "bp-wisp-2", "bp-wisp-3"];
+  const opacity = [0.6, 0.55, 0.5, 0.45, 0.4, 0.4, 0.35, 0.35];
+  const em = width / 22;
+  return (
+    <aside className="mascot-rail" style={{ width, flex: `0 0 ${width}px`, position: "sticky", top: 8, alignSelf: "flex-start", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
+      <style>{`@media (max-width: 1350px) { .mascot-rail { display: none !important; } }`}</style>
+      <div style={{ position: "relative", width, height: width / ASPECT, borderRadius: 18, overflow: "hidden", border: "1px solid #6b4a1c", boxShadow: "0 0 30px rgba(224,120,47,0.18)",
+        WebkitMaskImage: "linear-gradient(to bottom, #000 78%, transparent 100%)", maskImage: "linear-gradient(to bottom, #000 78%, transparent 100%)" }}>
+        <img src={SRC} alt="Big Proppa" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
+        <div style={{ position: "absolute", left: ANCHOR.left, top: ANCHOR.top, width: 0, height: 0, fontSize: `${em}px`, pointerEvents: "none" }}>
+          <div className="bp-ember" style={{ position: "absolute", left: "-2em", top: "-2em", width: "4em", height: "4em", borderRadius: "50%", background: "radial-gradient(circle, rgba(255,80,30,0.7), rgba(255,40,10,0) 70%)", mixBlendMode: "screen" }} />
+          <div className="bp-core" style={{ position: "absolute", left: "-.55em", top: "-.7em", width: "1.1em", height: "1.4em", borderRadius: "50%", background: "radial-gradient(circle, rgba(255,240,170,1), rgba(255,120,40,0.9) 45%, rgba(220,30,10,0) 80%)" }} />
+          {puffs.map((cls, i) => (
+            <div key={cls} className={cls} style={{ position: "absolute", left: "-1.6em", top: "-3.2em", width: "3.2em", height: "3.2em", borderRadius: "50%", background: `radial-gradient(circle, rgba(228,225,235,${opacity[i]}), rgba(228,225,235,0) 70%)`, filter: "blur(0.45em)", opacity: 0 }} />
+          ))}
+        </div>
+      </div>
+      <span style={{ fontSize: 13, fontWeight: 900, letterSpacing: "0.16em", background: "var(--bp-wordmark-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>HEY BIG PROPPA!</span>
+    </aside>
+  );
+}

frontend/src/components/ParlaysTab.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import type { ParlaySlip, PlayerPropChart } from "../types";
-import EngineTab from "./EngineTab";
+import EngineTab, { CrazyHorseHero } from "./EngineTab";
+import MascotRail from "./MascotRail";
 import FeaturedPlayer from "./FeaturedPlayer";
 import TicketCard, { fromThemed } from "./TicketCard";
 import { useEngine } from "./useEngine";
@@ -42,7 +43,10 @@ export default function ParlaysTab({
 }) {
   const { data } = useEngine();
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 1100, width: "100%", margin: "0 auto" }}>
+    <div style={{ display: "flex", gap: 22, alignItems: "flex-start", justifyContent: "center", width: "100%" }}>
+    <MascotRail />
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 1100, flex: "1 1 0", minWidth: 0 }}>
+      {data?.crazyHorse && <CrazyHorseHero slip={data.crazyHorse} />}
       {data?.featured && <FeaturedPlayer slip={data.featured} />}
       <a
         href="/parlays"
@@ -86,7 +90,8 @@ export default function ParlaysTab({
       </div>
 
       <TonightsSlips />
-      <EngineTab />
+      <EngineTab showHorse={false} />
+    </div>
     </div>
   );
 }

frontend/src/components/TicketCard.tsx

@@ -26,7 +26,7 @@ export function toAmerican(decimal: number): string {
 export function fromThemed(s: ParlaySlip): EngineSlip {
   return {
     id: `SLIP-${s.id}`, title: s.title, correlationType: "THEMED", badge: s.title, insight: "",
-    confidence: s.confidence, wager: s.wager, boost: s.boost,
+    wager: s.wager, boost: s.boost,
     combinedDecimalOdds: s.combinedDecimalOdds, payout: s.payout, boostedPayout: s.boostedPayout, boostedAmericanOdds: s.boostedAmericanOdds,
     legs: s.legs.map((l) => ({
       playerId: l.playerId ?? l.teamId ?? l.name, name: l.name, team: l.team ?? "", market: l.market ?? "", direction: l.direction ?? "over",
@@ -54,24 +54,6 @@ export function Avatar({ leg, size, ring = "#c9a54e" }: { leg: Pick<EngineLeg, "
   );
 }
 
-export function ConfidenceRing({ value, size = 64, light = false }: { value: number; size?: number; light?: boolean }) {
-  const color = value >= 75 ? "#16a34a" : value >= 62 ? "#c9a54e" : "#e0782f";
-  const r = size / 2 - 5;
-  const c = 2 * Math.PI * r;
-  return (
-    <span title="Confidence: the average hit probability of the legs on this ticket" style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 2, flex: "0 0 auto" }}>
-      <span style={{ position: "relative", width: size, height: size }}>
-        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: "rotate(-90deg)" }}>
-          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={light ? "#e8e2d0" : "rgba(255,255,255,0.12)"} strokeWidth="5" />
-          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth="5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - Math.min(100, value) / 100)} />
-        </svg>
-        <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: MONO, fontSize: size * 0.34, fontWeight: 800, color: light ? "#1a1a1a" : color }}>{value}</span>
-      </span>
-      <span style={{ fontSize: 8, fontWeight: 800, letterSpacing: "0.12em", color: light ? "#6b6553" : "var(--bp-muted)" }}>CONFIDENCE</span>
-    </span>
-  );
-}
-
 export function LegLine({ leg }: { leg: EngineLeg }) {
   const pct = Math.round(leg.probability * 100);
   const pc = pct >= 75 ? "#2ee6a6" : pct >= 60 ? "#d9b45a" : "#e0782f";
@@ -92,7 +74,6 @@ export default function TicketCard({ slip }: { slip: EngineSlip }) {
   const meta = TYPE_META[slip.correlationType] ?? { label: slip.correlationType, color: "#d9b45a" };
   const label = slip.badge ?? meta.label;
   const bigPayout = slip.combinedDecimalOdds >= BIG_PAYOUT_DECIMAL;
-  const conf = slip.confidence ?? 0;
   return (
     <div style={{ background: "var(--bp-card-bg)", border: `1px solid ${meta.color}55`, borderLeft: `4px solid ${meta.color}`, borderRadius: 16, overflow: "hidden", display: "flex", flexDirection: "column" }}>
       <div style={{ padding: "14px 16px 12px", display: "flex", gap: 14, alignItems: "flex-start" }}>
@@ -114,7 +95,6 @@ export default function TicketCard({ slip }: { slip: EngineSlip }) {
             <span style={{ fontSize: 11, color: "var(--bp-muted)" }}>{(slip.hitProbability * 100).toFixed(1)}% to hit every leg</span>
           )}
         </div>
-        <ConfidenceRing value={conf} />
       </div>
 
       {bigPayout && (