// OKRDeck.jsx — Tinder-style stacked OKR card deck
const { useState, useRef, useEffect, useCallback } = React;
// ─────────────────────────────────────────────────────────────
// Swipe-deck physics
// ─────────────────────────────────────────────────────────────
function useSwipe({ onSwipe, onRelease, threshold = 110 }) {
const [drag, setDrag] = useState({ x: 0, y: 0, active: false });
// Track the pending gesture before we commit to a horizontal drag. We don't
// capture the pointer (or mark drag.active) until we're sure the user is
// swiping horizontally, otherwise vertical native scroll inside the card
// body is impossible.
const start = useRef(null);
const onPointerDown = (e) => {
start.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId, captured: false };
setDrag({ x: 0, y: 0, active: false });
};
const onPointerMove = (e) => {
if (!start.current) return;
if (!e.buttons && e.pointerType === "mouse") return;
const dx = e.clientX - start.current.x;
const dy = e.clientY - start.current.y;
if (!drag.active) {
if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
if (!start.current.captured) {
e.currentTarget.setPointerCapture?.(e.pointerId);
start.current.captured = true;
}
setDrag({ x: dx, y: dy, active: true });
} else if (Math.abs(dy) > 8) {
// Vertical dominance — let the inner content scroll, abort the gesture.
start.current = null;
}
return;
}
setDrag({ x: dx, y: dy, active: true });
};
const onPointerUp = () => {
const wasActive = drag.active;
start.current = null;
if (!wasActive) {
setDrag({ x: 0, y: 0, active: false });
return;
}
const { x } = drag;
if (Math.abs(x) > threshold) {
onSwipe?.(x > 0 ? "right" : "left");
} else {
onRelease?.();
}
setDrag({ x: 0, y: 0, active: false });
};
return {
drag,
setDrag,
handlers: {
onPointerDown,
onPointerMove,
onPointerUp,
onPointerCancel: onPointerUp,
},
};
}
// ─────────────────────────────────────────────────────────────
// Direction pill — shows the orderflow-derived BULLISH / BEARISH bias
// for the cell. When `vetoed` is true the badge gets a subtle outline,
// signaling that orderflow overrode the rule-based regime call.
// ─────────────────────────────────────────────────────────────
function DirectionBadge({ direction, vetoed }) {
const isBull = direction === "BULLISH";
const color = isBull ? "var(--color-success, #0b6b3a)" : "var(--color-danger, #b03a2e)";
const bg = isBull ? "rgba(11,107,58,0.10)" : "rgba(176,58,46,0.10)";
const arrow = isBull ? "▲" : "▼";
return (
{arrow}
{direction}
{vetoed && · vetoed}
);
}
// ─────────────────────────────────────────────────────────────
// Chart skeleton — animated "candle bars" that read as a chart loading,
// not generic shimmer. Theme-aware via CSS vars; the bar heights are fixed
// so the pattern doesn't reshuffle on each render.
// ─────────────────────────────────────────────────────────────
const CHART_SKELETON_BARS = [
0.42, 0.58, 0.36, 0.71, 0.49, 0.83, 0.55,
0.68, 0.40, 0.75, 0.52, 0.88, 0.61, 0.45,
0.70, 0.38, 0.66, 0.79,
];
function ChartSkeleton() {
return (
{CHART_SKELETON_BARS.map((h, i) => (
))}
);
}
// Chart slot — animated skeleton until loaded, fade-in on first paint. Only
// the top card (`active`) requests the image; cards behind the top card hold
// the layout slot with a static skeleton so the swap-in is seamless.
function ChartSlot({ okr, active }) {
const [loaded, setLoaded] = useState(false);
const [errored, setErrored] = useState(false);
// Reset state when the chart URL changes (e.g. theme toggle replaces all charts).
useEffect(() => {
setLoaded(false);
setErrored(false);
}, [okr.chart_url]);
if (errored) return null;
return (
{/* Top accent stripe */}
{/* Decision stamps */}
{/* Scrollable body — accent stripe and stamps stay outside, anchored
to the card frame, so they don't scroll with the content. */}
{noPicks
? "You skipped every card. Run a fresh scan or sit this one out — flat is a position too."
: `Skipped ${passedCount}. Continue to validate your picks against Hyperliquid, or scan again for a fresh deck.`}