// Primate App Kit — Onboarding wizard (matches provided designs, steps 1–5) const { useState: useStateOB } = React; const TOTAL = 4; /* ============================ shared chrome ============================ */ function TopBar({ step, onHome }) { return (
{Array.from({ length: TOTAL }).map((_, i) => ( ))}
{step + 1}/{TOTAL}
); } function NavBtn({ onClick, primary, disabled, children }) { const [h, setH] = useStateOB(false); const hov = h && !disabled; return ( ); } function NavButtons({ onPrev, onNext, last, align = "center", nextDisabled, hidePrev }) { return (
{!hidePrev && Previous} {last ? "Enter Primate" : "Next"}
); } const GlowBG = () => (
); /* hanging bananas illustration for split-layout steps (ascii monkey omitted per source) */ function HangingBananas({ bottom = 40, glowCount = 0, animate = false }) { // each banana lights up (flickers to the bright SVG) as repos get selected const bananas = [ { left: "18%", drop: "14vh", size: 92, rot: -22 }, { left: "46%", drop: "22vh", size: 175, rot: -4 }, { left: "66%", drop: "34vh", size: 84, rot: 20 }, { left: "84%", drop: "17vh", size: 104, rot: 12 }, ]; const litOrder = [1, 3, 0, 2]; const litSet = new Set(litOrder.slice(0, Math.max(0, Math.min(glowCount, litOrder.length)))); // distinct breathing speed + phase per banana so each fades at its own rate const breath = [ { dur: 4.3, delay: -1.1 }, { dur: 7.1, delay: -5.4 }, { dur: 3.4, delay: -2.7 }, { dur: 5.8, delay: -0.6 }, ]; // subtle scattered stars/dots behind the bananas (white + gold, a few twinkle) const stars = [ { left: "12%", top: "16%", size: 2, gold: false, dur: 4.2 }, { left: "27%", top: "9%", size: 3, gold: true, dur: 0 }, { left: "38%", top: "26%", size: 2, gold: false, dur: 5.5 }, { left: "55%", top: "13%", size: 2.5, gold: true, dur: 3.6 }, { left: "63%", top: "30%", size: 1.5, gold: false, dur: 0 }, { left: "74%", top: "10%", size: 2, gold: false, dur: 6.1 }, { left: "86%", top: "24%", size: 3, gold: true, dur: 4.8 }, { left: "20%", top: "40%", size: 1.5, gold: true, dur: 0 }, { left: "48%", top: "44%", size: 2, gold: false, dur: 5.0 }, { left: "91%", top: "46%", size: 2, gold: false, dur: 3.9 }, { left: "33%", top: "55%", size: 1.5, gold: true, dur: 4.5 }, { left: "70%", top: "52%", size: 2.5, gold: false, dur: 0 }, ]; return (
{stars.map((s, i) => { const color = s.gold ? "#EBBB36" : "#FFFFFF"; return ( ); })} {bananas.map((b, i) => { const lit = litSet.has(i); const wrapTransform = `translateX(-17%) rotate(${b.rot}deg)`; return (
{animate ? (
) : ( )}
); })} {/* orangutan standing on a glowing gradient line */}
); } /* ============================ form atoms ============================ */ function L({ children, req }) { return ; } function Inp({ placeholder }) { const [f, setF] = useStateOB(false); const [h, setH] = useStateOB(false); return setF(true)} onBlur={() => setF(false)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ width: "100%", boxSizing: "border-box", height: 48, padding: "0 16px", borderRadius: "var(--r-md)", background: "var(--bg-elevated)", border: `1px solid ${f ? "var(--gold-mid)" : h ? "var(--border-hover)" : "var(--border-subtle)"}`, color: "var(--fg)", font: "var(--t-body)", outline: "none", transition: "border-color .14s ease" }} />; } function Sel({ placeholder, options = [] }) { const [open, setOpen] = useStateOB(false); const [val, setVal] = useStateOB(""); const [h, setH] = useStateOB(false); return (
{open && (
{options.map(o =>
{ setVal(o); setOpen(false); }} style={{ padding: "10px 12px", borderRadius: "var(--r-sm)", font: "var(--t-body-sm)", color: "var(--fg-secondary)", cursor: "pointer" }} onMouseEnter={e => e.currentTarget.style.background = "rgba(255,255,255,0.05)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>{o}
)}
)}
); } function CheckBox({ on, square = true }) { return ( {on && } ); } /* ============================ steps ============================ */ function StepProfile() { return (
Full Name
Organization Name
Organization Website
Company Size
); } function StepConnect({ onNext }) { const [h, setH] = useStateOB(false); return (
); } const REPOS = ["jeremybell232/taskflow", "jeremybell232/notably", "jeremybell232/pagemint", "jeremybell232/loopmail"]; function RepoTable({ indexing, selected, onToggle }) { const [localOn, setLocalOn] = useStateOB({ 1: true, 3: true }); const rawOn = selected || localOn; const setOn = onToggle || setLocalOn; let on = rawOn; let count = Object.values(on).filter(Boolean).length; // indexing opened with nothing selected → still show one repo indexing by default if (indexing && count === 0) { on = { 1: true }; count = 1; } const fillGrad = "linear-gradient(90deg, rgba(235,187,54,0.03) 0%, rgba(235,187,54,0.05) 50%, rgba(235,187,54,0.03) 100%)"; const goldLine = "linear-gradient(90deg, rgba(235,187,54,0.20) 0%, rgba(235,187,54,0.40) 50%, rgba(235,187,54,0.10) 100%)"; const tableFill = "linear-gradient(180deg, #27272A 0%, #191918 100%)"; const [hSearch, setHSearch] = useStateOB(false); return (
setHSearch(true)} onMouseLeave={() => setHSearch(false)} style={{ display: "flex", alignItems: "center", gap: 10, height: 36, padding: "0 14px", borderRadius: "var(--r-sm)", background: "var(--bg-elevated)", border: `1px solid ${hSearch ? "var(--border-hover)" : "var(--border-subtle)"}`, transition: "border-color .14s ease" }}>
{!indexing && }Name
{REPOS.map((r, i) => { const sel = !!on[i]; // every selected row draws its TOP edge; only the last of a run draws a // bottom edge. This keeps each inter-row separator owned by the lower row, // so selecting a repo above an already-selected one doesn't shift the line. const topLine = sel; const botLine = sel && !on[i + 1]; const rowBg = sel ? [topLine && `${goldLine} left top / 100% 1px no-repeat`, botLine && `${goldLine} left bottom / 100% 1px no-repeat`, fillGrad].filter(Boolean).join(", ") : "transparent"; return (
setOn(s => ({ ...s, [i]: !s[i] }))} onMouseEnter={indexing ? undefined : e => { if (!on[i]) e.currentTarget.style.background = "rgba(255,255,255,0.03)"; }} onMouseLeave={indexing ? undefined : e => { if (!on[i]) e.currentTarget.style.background = "transparent"; }} style={{ display: "flex", alignItems: "center", gap: 12, height: 45, boxSizing: "border-box", padding: "0 18px", cursor: indexing ? "default" : "pointer", transition: "background .1s ease", borderBottom: `1px solid ${sel ? "transparent" : (i < REPOS.length - 1 && !on[i + 1]) ? "var(--border)" : "transparent"}`, background: rowBg }}> {!indexing && } {r} {indexing && on[i] && ( Indexing )}
); })}
{count} of {REPOS.length} selected
); } const STEPS = [ { layout: "center", title: "Create Your Profile", sub: "Just a few details to get you in.", body: StepProfile, w: 530 }, { layout: "center", title: "Connect to GitHub", sub: "Authorize Primate to run checks on your Pull Requests.", body: StepConnect, w: 420, navBottom: true }, { layout: "split", title: "Select Repositories", sub: "Choose which repositories you'd like to enable for code review.", body: (p) => , w: 512, requireRepo: true }, { layout: "split", title: "Primate is indexing your repository.", sub: "Before reviewing your code, Primate builds a full node graph of your repo. This step takes a little time, but ensures every PR review is thorough and context-aware.", body: (p) => , w: 512, indexing: true }, ]; function Onboarding({ onDone, onBack, onHome, initialStep = 0, onStepChange }) { const [step, setStep] = useStateOB(initialStep); const vp = useViewport(); const compact = vp !== "desktop"; const mobile = vp === "mobile"; const tablet = vp === "tablet"; React.useEffect(() => { if (onStepChange) onStepChange(step); }, [step]); const cfg = STEPS[step]; const Body = cfg.body; const last = step === TOTAL - 1; const prev = () => step === 0 ? (onBack ? onBack() : onDone()) : setStep(s => s - 1); const next = () => last ? onDone() : setStep(s => s + 1); // repo selection is lifted here so the hanging bananas can light up to match const [repoSel, setRepoSel] = useStateOB({}); const repoCount = Object.values(repoSel).filter(Boolean).length; // keep the monkey's platform line aligned to the bottom of the nav buttons const splitRef = React.useRef(null); const navRef = React.useRef(null); const [monkeyBottom, setMonkeyBottom] = useStateOB(60); React.useLayoutEffect(() => { function measure() { if (splitRef.current && navRef.current) { const sb = splitRef.current.getBoundingClientRect().bottom; const nb = navRef.current.getBoundingClientRect().bottom; setMonkeyBottom(Math.max(8, sb - nb)); } } measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure); }, [step]); return (
{cfg.layout === "center" ? (

{cfg.title}

{cfg.sub}

{!cfg.navBottom && }
) : (
{!compact && }

{cfg.title}

{cfg.sub}

)} {cfg.navBottom && (
Previous
)}
); } Object.assign(window, { Onboarding });