// Featureban.jsx — Run the board. // A simple deploy kanban: tap a strategy to move it forward through the // lifecycle (Backlog → Dry-run → Live → Closed). Open the performance // panel any time to see how live strategies are doing. End the day when // you're ready to review. // Stages: 'intro' → 'play' (end-of-day hands off to the review) const { useState: useStateFB, useMemo: useMemoFB, useRef: useRefFB } = React; // ───────────────────────────────────────────────────────────── // Provisional P&L for a strategy once it's live. Deterministic from // the strategy id so the number is stable across re-renders, weighted // slightly positive and scaled by the risk units (R) at stake. // ───────────────────────────────────────────────────────────── function fbSeededPnl(story) { let h = 0; const key = String(story.id || story.ref || "x"); for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) % 100000; const r = (h % 1000) / 1000; // 0..1 const sign = r < 0.62 ? 1 : -1; // ~62% winners const mag = 40 + (h % 220) + (story.points || 3) * 18; return sign * Math.round(mag); } // Paper-trade P&L — same deterministic engine, salted so a strategy's paper // run reads differently from its eventual live run. Lets the strategy review // score a strategy that's still paper-trading, before any capital is at risk. function fbPaperPnl(story) { return fbSeededPnl({ ...story, id: String(story.id || story.ref || "x") + ":paper" }); } function fbStatusLabel(col) { return { todo: "Queued", doing: "Paper trade", review: "Live run", done: "Closed" }[col] || col; } // ───────────────────────────────────────────────────────────── // Intro // ───────────────────────────────────────────────────────────── function FBIntro({ storyCount, onStart, onBack }) { return (
Run the board

Deploy your strategies.
Watch them run.

{storyCount} {storyCount === 1 ? "strategy is" : "strategies are"} queued. Move each one forward when you're ready: paper-trade it, take it live, then close it out.

{/* Steps */}
{[ ["01", "Move it forward.", "Tap a strategy to advance it: Backlog → Paper trade → Live run → Closed."], ["02", "Check performance.", "Open the performance panel any time to see live P&L."], ["03", "End the day.", "When you're done, close the book and review the session."], ].map(([n, t, d]) => (
{n}
{t}
{d}
))}
); } // ───────────────────────────────────────────────────────────── // Strategy tile // ───────────────────────────────────────────────────────────── function FBStrategyTile({ story, canAdvance, onOpen }) { const done = story.column === "done"; const live = story.column === "review"; const pnl = (live || done) ? story.pnl : null; return ( ); } // ───────────────────────────────────────────────────────────── // Board column / swimlane // ───────────────────────────────────────────────────────────── // Column header row — shown once above the swimlanes. function FBColumnHeaders({ stories }) { return (
{window.FB_COLUMNS.map((col) => { const n = stories.filter((s) => s.column === col.id).length; return (
{col.label} {n}
); })}
); } // One cell = a single column's tiles within a swimlane. function FBLaneCell({ col, stories, onOpen }) { const inCol = stories.filter((s) => s.column === col.id); const isClosed = col.id === "done"; return (
{inCol.map((s) => ( ))}
); } // A swimlane = one trading goal, with all four columns. function FBLane({ label, stories, onOpen }) { const live = stories.filter((s) => s.column === "review").length; const pnl = stories.filter((s) => s.column === "review" || s.column === "done").reduce((a, s) => a + (s.pnl || 0), 0); return (
{label} {live} live · {pnl >= 0 ? "+" : "−"}${Math.abs(pnl)}
{window.FB_COLUMNS.map((col) => ( ))}
); } // ───────────────────────────────────────────────────────────── // Performance panel (slide-up) // ───────────────────────────────────────────────────────────── function FBPerformancePanel({ stories, onClose }) { const running = stories.filter((s) => s.column === "review" || s.column === "done"); const total = running.reduce((sum, s) => sum + (s.pnl || 0), 0); const winners = running.filter((s) => (s.pnl || 0) >= 0).length; return (
e.stopPropagation()} style={{ width: "100%", background: "var(--color-surface-default)", borderTopLeftRadius: "var(--radius-lg)", borderTopRightRadius: "var(--radius-lg)", padding: "14px 18px 18px", boxShadow: "var(--shadow-4)", display: "flex", flexDirection: "column", gap: 12, animation: "fbSheetIn 220ms var(--ease-standard)", maxHeight: "82%", overflowY: "auto", }} >
Live performance
{/* Session total */}
Open + booked P&L
= 0 ? "var(--color-success)" : "var(--color-danger)", fontVariantNumeric: "tabular-nums", }}>{total >= 0 ? "+" : "−"}${Math.abs(total).toLocaleString()}
{winners}/{running.length}
in the green
{/* Per-strategy rows */} {running.length === 0 ? (
Nothing live yet. Move a strategy to Live to start tracking P&L.
) : (
{running.map((s) => (
{s.want}
{s.ref} · {fbStatusLabel(s.column)} · {s.points}R
= 0 ? "var(--color-success)" : "var(--color-danger)", }}>{(s.pnl || 0) >= 0 ? "+" : "−"}${Math.abs(s.pnl || 0)}
))}
)}
); } // ───────────────────────────────────────────────────────────── // Board (play) // ───────────────────────────────────────────────────────────── function FBPlay({ sg, stories, setStories, onFinish, onExit }) { const [showPerf, setShowPerf] = useStateFB(false); const [confirmLive, setConfirmLive] = useStateFB(null); const [detailStoryId, setDetailStoryId] = useStateFB(null); const [toast, setToast] = useStateFB(null); const toastTimer = useRefFB(null); const flash = (text) => { setToast(text); if (toastTimer.current) clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 1500); }; const doAdvance = (storyId) => { setStories((curr) => curr.map((s) => { if (s.id !== storyId) return s; const next = window.fbNextColumn(s.column); if (!next) return s; const updated = { ...s, column: next }; if (next === "review" && updated.pnl == null) updated.pnl = fbSeededPnl(s); if (next === "doing" && updated.paperPnl == null) updated.paperPnl = fbPaperPnl(s); return updated; })); const s = stories.find((x) => x.id === storyId); const next = s && window.fbNextColumn(s.column); if (next) flash(`→ ${fbStatusLabel(next)}`); }; // Every move asks for confirmation before it happens. const advance = (storyId) => { const s = stories.find((x) => x.id === storyId); if (!s) return; if (!window.fbNextColumn(s.column)) return; setConfirmLive(s); }; const liveCount = stories.filter((s) => s.column === "review").length; const closedCount = stories.filter((s) => s.column === "done").length; const runningPnl = stories .filter((s) => s.column === "review" || s.column === "done") .reduce((sum, s) => sum + (s.pnl || 0), 0); // Group strategies into swimlanes by their trading goal, preserving order. const lanes = (() => { const order = []; const map = {}; stories.forEach((s) => { const key = s.goalLabel || "Unassigned"; if (!map[key]) { map[key] = []; order.push(key); } map[key].push(s); }); return order.map((key) => ({ key, label: key, stories: map[key] })); })(); const endDay = () => { // Close the book: anything live books its P&L and moves to Closed. // Paper-trade strategies are left running — but still handed to the // review so they can be scored on their paper results. const closed = stories.map((s) => s.column === "review" ? { ...s, column: "done" } : s ); setStories(closed); const shipped = closed.filter((s) => s.column === "done"); const paper = closed.filter((s) => s.column === "doing"); onFinish({ shipped, paper, totalStories: stories.length }); }; return (
{/* Header */}
{sg.goal}
Trading desk {liveCount} live · {closedCount} closed
{/* Board — column headers + a swimlane per trading goal */}
{lanes.map((lane) => ( ))}
{/* Footer */}
{toast || "Tap a strategy to move it forward · open performance any time"}
{showPerf && setShowPerf(false)} />} {confirmLive && ( setConfirmLive(null)} onConfirm={() => { doAdvance(confirmLive.id); setConfirmLive(null); }} /> )} {detailStoryId && window.CardDetail && (() => { const story = stories.find((s) => s.id === detailStoryId); if (!story) return null; const canAdvance = !!window.fbNextColumn(story.column); return ( setDetailStoryId(null)} onAdvance={(id) => { doAdvance(id); setDetailStoryId(null); }} /> ); })()}
); } // ───────────────────────────────────────────────────────────── // Confirm a board move — wording adapts to the transition. // ───────────────────────────────────────────────────────────── function FBConfirmLive({ story, onCancel, onConfirm }) { const p = story.params || {}; const next = window.fbNextColumn(story.column); var COPY = { doing: { eyebrow: "Start paper trading", title: "Move {x} into paper trade?", note: "Simulated run — no real capital at risk.", confirm: "Start paper", danger: false }, review: { eyebrow: "Go live — real risk", title: "Take {x} to a live run?", note: "This puts real capital on the line.", confirm: "Go live", danger: true }, done: { eyebrow: "Close position", title: "Close {x} and book it?", note: "Books the P&L and closes the strategy out.", confirm: "Close it", danger: false }, }; var c = COPY[next] || COPY.review; const accent = c.danger ? "var(--color-danger)" : "var(--color-brand-primary)"; const pnl = story.pnl; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 320, background: "var(--color-surface-default)", borderRadius: "var(--radius-lg)", padding: "18px 18px 16px", boxShadow: "var(--shadow-4)", display: "flex", flexDirection: "column", gap: 12, animation: "fbSheetIn 220ms var(--ease-standard)" }}>
{next === "review" ? ( ) : next === "done" ? ( ) : ( )} {c.eyebrow}
{c.title.split("{x}")[0]}{story.want}{c.title.split("{x}")[1]}
{c.note}
{story.ref} · {story.tag} {p.riskR ? ` · ${p.riskR}R · ${p.stopPct}% kill · ${p.leverage}× lev` : ""} {next === "done" && pnl != null ? ` · P&L ${pnl >= 0 ? "+" : "−"}$${Math.abs(pnl)}` : ""}
); } // ───────────────────────────────────────────────────────────── // Container // ───────────────────────────────────────────────────────────── function Featureban({ sg, board, setBoard, onExit, onReview }) { return ( onReview?.({ shipped, paper, totalStories })} /> ); } Object.assign(window, { Featureban, fbSeededPnl, fbPaperPnl });