\n {children}\n

\n );\n}\n\nfunction Btn({\n onClick,\n disabled,\n loading,\n variant = \"primary\",\n children,\n}: {\n onClick: () => void;\n disabled?: boolean;\n loading?: boolean;\n variant?: \"primary\" | \"secondary\" | \"danger\";\n children: any;\n}) {\n const base = \"inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed\";\n const styles = {\n primary: \"bg-indigo-600 hover:bg-indigo-500 text-white\",\n secondary: \"bg-gray-800 hover:bg-gray-700 text-gray-200 border border-gray-700\",\n danger: \"bg-red-900/60 hover:bg-red-800/60 text-red-300 border border-red-800\",\n };\n return (\n \n );\n}\n\n// ─── Auth Tab ────────────────────────────────────────────────────────────────\n\nfunction AuthTab() {\n const [status, setStatus] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const res = await fetch(\"/auth/status\");\n setStatus(await res.json());\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => { load(); }, []);\n\n return (\n

\n \n

WHOOP Authorization

\n Authorize this app to read your WHOOP data via OAuth 2.0.\n

\n\n {loading ? (\n

Checking status…

\n ) : status ? (\n

\n \n {status.expires_at && (\n \n {status.expired ? \"Expired\" : \"Expires\"} {fmt(status.expires_at)}\n \n )}\n

\n\n {status.authorized && !status.expired ? (\n

\n Your WHOOP account is connected. Re-authorize below if your token expires.\n

\n ) : (\n

\n Click below to connect your WHOOP account. You'll be redirected to WHOOP to grant access.\n

\n )}\n\n \n {status.authorized ? \"Re-authorize with WHOOP\" : \"Authorize with WHOOP\"}\n \n

\n ) : null}\n \n\n \n

Setup Checklist

Set WHOOP_CLIENT_ID, WHOOP_CLIENT_SECRET, and WHOOP_REDIRECT_URI as Val Town environment variables
Authorize with WHOOP using the button above
Run a historical backfill from the Data Import tab
In the WHOOP Developer Dashboard, set your webhook URL to /webhooks/whoop with v2 model version
Set the cron val to run daily — see the Cron tab

\n \n

\n );\n}\n\n// ─── Import Tab ──────────────────────────────────────────────────────────────\n\nconst SYNC_TYPE_LABELS: Record = {\n backfill: \"Full Backfill\",\n incremental: \"Incremental\",\n cron: \"Cron (Daily)\",\n};\n\nfunction SyncTypeChip({ type }: { type: string }) {\n const colors: Record = {\n backfill: \"bg-purple-900/60 text-purple-300\",\n incremental: \"bg-blue-900/60 text-blue-300\",\n cron: \"bg-gray-800 text-gray-400\",\n };\n return (\n \n {SYNC_TYPE_LABELS[type] ?? type}\n \n );\n}\n\nfunction ResultsSummary({ resultsJson }: { resultsJson: string | null }) {\n if (!resultsJson) return null;\n try {\n const results: SyncResult[] = JSON.parse(resultsJson);\n const total = results.reduce((s, r) => s + r.records_synced, 0);\n const parts = results\n .filter((r) => r.records_synced > 0)\n .map((r) => `${r.records_synced} ${r.data_type}`);\n if (parts.length === 0) return 0 new records;\n return (\n \n {total} records ({parts.join(\", \")})\n \n );\n } catch {\n return null;\n }\n}\n\nfunction ImportTab() {\n const [syncStatus, setSyncStatus] = useState([]);\n const [syncLog, setSyncLog] = useState([]);\n const [loadingStatus, setLoadingStatus] = useState(true);\n const [loadingLog, setLoadingLog] = useState(true);\n const [backfilling, setBackfilling] = useState(false);\n const [syncing, setSyncing] = useState(false);\n const [error, setError] = useState(null);\n const [expandedId, setExpandedId] = useState(null);\n\n const loadStatus = useCallback(async () => {\n setLoadingStatus(true);\n try {\n const res = await fetch(\"/sync/status\");\n const data = await res.json();\n setSyncStatus(data.sync_status ?? []);\n } finally {\n setLoadingStatus(false);\n }\n }, []);\n\n const loadLog = useCallback(async () => {\n setLoadingLog(true);\n try {\n const res = await fetch(\"/sync/log?limit=50\");\n const data = await res.json();\n setSyncLog(data.log ?? []);\n } finally {\n setLoadingLog(false);\n }\n }, []);\n\n useEffect(() => { loadStatus(); loadLog(); }, []);\n\n const runBackfill = async () => {\n setBackfilling(true);\n setError(null);\n try {\n const res = await fetch(\"/sync/backfill\", { method: \"POST\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error ?? \"Backfill failed\");\n await Promise.all([loadStatus(), loadLog()]);\n } catch (e: any) {\n setError(e.message);\n await loadLog();\n } finally {\n setBackfilling(false);\n }\n };\n\n const runIncremental = async () => {\n setSyncing(true);\n setError(null);\n try {\n const res = await fetch(\"/sync/incremental\", { method: \"POST\" });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error ?? \"Sync failed\");\n await Promise.all([loadStatus(), loadLog()]);\n } catch (e: any) {\n setError(e.message);\n await loadLog();\n } finally {\n setSyncing(false);\n }\n };\n\n const dataTypes = [\"cycles\", \"recoveries\", \"sleeps\", \"workouts\"];\n\n return (\n

\n \n

Sync Controls

\n Run a full historical backfill once after authorizing, then use incremental sync to catch up manually. The daily cron handles ongoing updates automatically.\n

\n \n {backfilling ? \"Importing…\" : \"Full Historical Backfill\"}\n \n \n {syncing ? \"Syncing…\" : \"Incremental Sync\"}\n \n

\n {(backfilling || syncing) && (\n

\n This may take a while for large datasets. Don't close this tab.\n

\n )}\n \n\n {error && (\n \n

Error: {error}

\n \n )}\n\n \n

Data Checkpoints

\n {loadingStatus ? (\n

Loading…

\n ) : syncStatus.length === 0 ? (\n

No sync data yet. Run a backfill to get started.

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n {dataTypes.map((dt) => {\n const entry = syncStatus.find((s) => s.data_type === dt);\n return (\n \n \n \n \n \n );\n })}\n \n

Data Type	Last Synced	Latest Record
{dt}	\n {entry ? fmt(entry.last_synced_at) : —}\n	\n {entry ? fmt(entry.last_record_time) : —}\n

\n )}\n \n\n \n

Sync History

\n \n Refresh\n \n

\n\n {loadingLog ? (\n

Loading…

\n ) : syncLog.length === 0 ? (\n

No syncs logged yet.

\n ) : (\n

\n {syncLog.map((entry) => (\n \n setExpandedId(expandedId === entry.id ? null : entry.id)}\n >\n \n {fmt(entry.ran_at)}\n \n \n {entry.success\n ? \n : Failed\n }\n \n {expandedId === entry.id ? \"▲\" : \"▼\"}\n \n\n {expandedId === entry.id && (\n

\n {entry.error_message && (\n

{entry.error_message}

\n )}\n {entry.results_json && (() => {\n try {\n const results: SyncResult[] = JSON.parse(entry.results_json);\n return (\n

\n {results.map((r) => (\n

{r.data_type}

{r.records_synced}

records

\n ))}\n

\n );\n } catch {\n return null;\n }\n })()}\n

\n )}\n

\n ))}\n

\n )}\n \n \n );\n}\n\n// ─── Cron Tab ────────────────────────────────────────────────────────────────\n\nfunction CronTab() {\n return (\n

\n \n

Daily Reconciliation Cron

\n The cron val (syncWhoop.cron.ts) runs an incremental sync daily to catch any data that webhooks may have missed, and to sync Cycle data (which has no webhook).\n

\n Val file\n syncWhoop.cron.ts\n

\n Recommended schedule\n Once daily\n

\n Action\n Incremental sync for all 4 data types\n

\n \n\n \n

How to Set the Schedule

\n 1\n Open syncWhoop.cron.ts in the Val Town editor\n
\n 2\n Click the clock icon or Schedule option in the val settings\n
\n 3\n Set it to run every day (e.g. at midnight or 6 AM)\n

\n \n\n \n

Webhook Setup

\n Webhooks provide near-real-time updates for sleep, recovery, and workout events. Configure them in the WHOOP Developer Dashboard.\n

\n Webhook URL\n {window.location.origin}/webhooks/whoop\n

\n Model version\n v2\n

\n Events covered\n sleep, recovery, workout\n

\n Not covered by webhooks\n cycles (synced via cron)\n

\n \n

\n );\n}\n\n// ─── App ─────────────────────────────────────────────────────────────────────\n\nexport default function App() {\n const [tab, setTab] = useState(\"auth\");\n\n const tabs: { id: Tab; label: string }[] = [\n { id: \"auth\", label: \"Authorization\" },\n { id: \"import\", label: \"Data Import\" },\n { id: \"cron\", label: \"Cron & Webhooks\" },\n ];\n\n return (\n

⚡

WHOOP Admin

\n \n 😴\n Sleep Dashboard\n \n

\n\n

\n \n\n {tab === \"auth\" && }\n {tab === \"import\" && }\n {tab === \"cron\" && }\n

\n );\n}\n",[],[292,299],{"_106":307,"_99":308,"_163":309,"_165":293,"_166":148,"_167":310,"_169":170,"_108":311,"_103":33,"_172":312,"_174":313,"_175":22,"_176":-5,"_177":314,"_102":315},"6df40468-2af5-11f1-ba18-42dde27851f2","index.html","6df4056c-2af5-11f1-ba18-42dde27851f2",26,["D",1774736902480],"file","\n\n \n \n \n WHOOP Admin\n \n \n \n \n

\n \n \n\n",[],[292,308],{"_106":317,"_99":318,"_163":319,"_165":293,"_166":148,"_167":320,"_169":170,"_108":321,"_103":33,"_172":193,"_174":322,"_175":22,"_176":-5,"_177":323,"_102":324},"6ddb5ada-2af5-11f1-bad5-42dde27851f2","index.tsx","6ddb5b98-2af5-11f1-bad5-42dde27851f2",23,["D",1774736902353],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[292,318],{"_106":326,"_99":327,"_163":328,"_165":293,"_166":148,"_167":147,"_169":170,"_108":329,"_103":264,"_172":312,"_174":330,"_175":22,"_176":-5,"_177":331,"_102":332},"f7a175a6-2b09-11f1-a343-42dde27851f2","sleep.html","2666cfe6-2b08-11f1-8ae6-42dde27851f2",["D",1774745723393],"\n\n \n \n \n WHOOP · Sleep\n \n \n \n \n \n \n \n

\n \n \n\n",[],[292,327],{"_106":334,"_99":335,"_163":336,"_165":293,"_166":148,"_167":337,"_169":170,"_108":338,"_103":264,"_172":193,"_174":339,"_175":22,"_176":-5,"_177":340,"_102":341},"f7997ff4-2b09-11f1-8efc-42dde27851f2","sleep.tsx","26596874-2b08-11f1-ae42-42dde27851f2",47,["D",1774745723380],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ndeclare const Chart: any;\ndeclare const ChartDataLabels: any;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\ninterface SleepRecord {\n start: string;\n end_time: string;\n score_state: string;\n total_light_sleep_time_milli: number | null;\n total_slow_wave_sleep_time_milli: number | null;\n total_rem_sleep_time_milli: number | null;\n total_awake_time_milli: number | null;\n total_in_bed_time_milli: number | null;\n sleep_needed_baseline_milli: number | null;\n sleep_needed_from_debt_milli: number | null;\n sleep_performance_pct: number | null;\n sleep_efficiency_pct: number | null;\n}\n\ninterface DayData {\n label: string;\n date: Date;\n sleep: SleepRecord | null;\n}\n\n// ─── Date / Time Utilities ────────────────────────────────────────────────────\n\nconst PT = \"America/Los_Angeles\";\n\nfunction getMonday(d: Date): Date {\n const date = new Date(d);\n date.setHours(0, 0, 0, 0);\n const day = date.getDay();\n date.setDate(date.getDate() - (day === 0 ? 6 : day - 1));\n return date;\n}\n\nfunction addDays(d: Date, n: number): Date {\n return new Date(d.getTime() + n * 86_400_000);\n}\n\nfunction formatWeekRange(monday: Date): string {\n const sunday = addDays(monday, 6);\n const m: Intl.DateTimeFormatOptions = { month: \"short\", day: \"numeric\" };\n return `${monday.toLocaleDateString(\"en-US\", m)} – ${sunday.toLocaleDateString(\"en-US\", { ...m, year: \"numeric\" })}`;\n}\n\nfunction ptDateStr(utcStr: string): string {\n return new Date(utcStr).toLocaleDateString(\"en-US\", {\n timeZone: PT, year: \"numeric\", month: \"2-digit\", day: \"2-digit\",\n });\n}\n\nfunction localDateStr(d: Date): string {\n return d.toLocaleDateString(\"en-US\", {\n timeZone: PT, year: \"numeric\", month: \"2-digit\", day: \"2-digit\",\n });\n}\n\n// Returns hours offset from midnight: 10 PM → -2, 1 AM → 1\nfunction bedtimeOffset(utcStr: string): number {\n const parts = new Intl.DateTimeFormat(\"en-US\", {\n timeZone: PT, hour: \"numeric\", minute: \"numeric\", hour12: false,\n }).formatToParts(new Date(utcStr));\n const h = parseInt(parts.find(p => p.type === \"hour\")?.value ?? \"0\") % 24;\n const m = parseInt(parts.find(p => p.type === \"minute\")?.value ?? \"0\");\n let dec = h + m / 60;\n if (dec >= 18) dec -= 24;\n return dec;\n}\n\nfunction offsetToLabel(val: number): string {\n const hours = ((val % 24) + 24) % 24; // normalize: -2→22, -1.5→22.5, 1→1\n const h = Math.floor(hours);\n const m = Math.round((hours - h) * 60);\n const isAM = h < 12;\n const display = h === 0 ? 12 : h > 12 ? h - 12 : h;\n const mStr = m > 0 ? `:${m.toString().padStart(2, \"0\")}` : \"\";\n return `${display}${mStr} ${isAM ? \"AM\" : \"PM\"}`;\n}\n\nfunction formatBedtime(utcStr: string): string {\n return new Date(utcStr).toLocaleTimeString(\"en-US\", {\n timeZone: PT, hour: \"numeric\", minute: \"2-digit\", hour12: true,\n });\n}\n\nfunction formatHM(ms: number | null): string {\n if (ms === null || ms <= 0) return \"—\";\n const totalMin = Math.round(ms / 60_000);\n const h = Math.floor(totalMin / 60), m = totalMin % 60;\n return m > 0 ? `${h}h ${m}m` : `${h}h`;\n}\n\nfunction msToMinutes(ms: number | null): number | null {\n return ms === null ? null : Math.round(ms / 60_000);\n}\n\nfunction debtLabel(min: number): string {\n const abs = Math.abs(min);\n const h = Math.floor(abs / 60), m = abs % 60;\n const sign = min >= 0 ? \"+\" : \"−\";\n return h > 0 ? `${sign}${h}h ${m}m` : `${sign}${m}m`;\n}\n\nfunction totalSleepMs(s: SleepRecord): number {\n return (s.total_light_sleep_time_milli ?? 0)\n + (s.total_slow_wave_sleep_time_milli ?? 0)\n + (s.total_rem_sleep_time_milli ?? 0);\n}\n\n// ─── Shared Chart Config ──────────────────────────────────────────────────────\n\nfunction setChartDefaults() {\n Chart.register(ChartDataLabels);\n Chart.defaults.color = \"#505050\";\n Chart.defaults.borderColor = \"#1C1C1C\";\n Chart.defaults.font.family = \"-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif\";\n // Disable datalabels globally; each chart opts in per-dataset\n Chart.defaults.plugins.datalabels.display = false;\n}\n\nconst TOOLTIP = {\n backgroundColor: \"#1A1A1A\",\n borderColor: \"#2A2A2A\",\n borderWidth: 1,\n titleColor: \"#FFF\",\n bodyColor: \"#999\",\n padding: 12,\n cornerRadius: 8,\n displayColors: false,\n};\n\nconst AXIS = {\n grid: { color: \"#191919\" },\n border: { display: false },\n ticks: { color: \"#505050\", font: { size: 11 } },\n};\n\n// ─── Bedtime Chart ────────────────────────────────────────────────────────────\n\nfunction BedtimeChart({ days }: { days: DayData[] }) {\n const canvasRef = useRef(null);\n const chartRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current) return;\n chartRef.current?.destroy();\n\n const labels = days.map(d => d.label);\n const values = days.map(d =>\n d.sleep?.score_state === \"SCORED\" ? bedtimeOffset(d.sleep.start) : null\n );\n\n const nonNull = values.filter((v): v is number => v !== null);\n const yMin = nonNull.length ? Math.floor(Math.min(...nonNull)) - 0.5 : -5;\n const yMax = nonNull.length ? Math.ceil(Math.max(...nonNull)) + 0.5 : 3;\n\n const ctx = canvasRef.current.getContext(\"2d\")!;\n const grad = ctx.createLinearGradient(0, 0, 0, 220);\n grad.addColorStop(0, \"rgba(139,92,246,0.3)\");\n grad.addColorStop(1, \"rgba(139,92,246,0.02)\");\n\n chartRef.current = new Chart(canvasRef.current, {\n type: \"line\",\n data: {\n labels,\n datasets: [{\n data: values,\n borderColor: \"#8B5CF6\",\n backgroundColor: grad,\n fill: true,\n tension: 0.35,\n pointBackgroundColor: \"#8B5CF6\",\n pointBorderColor: \"#000\",\n pointBorderWidth: 2,\n pointRadius: 5,\n pointHoverRadius: 7,\n spanGaps: false,\n datalabels: {\n display: (ctx: any) => ctx.raw !== null,\n color: \"rgba(167,139,250,0.9)\",\n anchor: \"end\",\n align: \"top\",\n offset: 2,\n font: { size: 10, weight: \"500\" },\n formatter: (val: number) => offsetToLabel(val),\n },\n }],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false },\n tooltip: {\n ...TOOLTIP,\n callbacks: {\n title: (items: any[]) => days[items[0].dataIndex]?.label ?? \"\",\n label: (ctx: any) => {\n const s = days[ctx.dataIndex]?.sleep;\n return s ? ` ${formatBedtime(s.start)}` : \"\";\n },\n },\n },\n },\n scales: {\n x: AXIS,\n y: {\n ...AXIS,\n min: yMin,\n max: yMax,\n ticks: {\n ...AXIS.ticks,\n stepSize: 1,\n callback: (v: any) => offsetToLabel(v),\n },\n },\n },\n },\n });\n\n return () => { chartRef.current?.destroy(); chartRef.current = null; };\n }, [days]);\n\n return

Key	Description
WHOOP_REDIRECT_URI
WHOOP_CLIENT_SECRET
WHOOP_CLIENT_ID

shapedlines

whoop2

Environment variables