/* ============================================================ screens-detail.jsx — RECOVERY · SLEEP · TRENDS · CLINICAL ============================================================ */ (function () { const fmtDur = window.fmtDur || ((m) => m == null ? "—" : `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`); function ScreenHead({ title, sub }) { return (

{title}

); } window.ScreenHead = ScreenHead; // input status → tone for delta function inputTone(inp) { if (inp.status === "good") return "good"; if (inp.status === "attn") return "attn"; return "neutral"; } // ---- RECOVERY DETAIL ------------------------------------ function InputRow({ inp }) { const within = inp.status === "within"; const low = inp.status === "lowconf"; const deltaTone = inputTone(inp); return (
{inp.label}
{inp.value} {inp.unit} {inp.note &&
{inp.note}
}
); } function Recovery({ data, viz = "dist" }) { const rec = data.recovery, st = window.recStatus(rec.value); return (
{rec.headline}
point estimate {rec.value}% · 68% interval {Math.max(0, rec.value - rec.band)}–{Math.min(100, rec.value + rec.band)} · dashed = your typical
{rec.context.length > 0 && (
{rec.context.map((c, i) => ( {c.type === "gap" ? : } {c.text} ))}
)}
Contributing inputs {rec.inputs.map((inp) => )}
Bayesian model · weights shown per input · shaded band = smallest worthwhile change (noise). A value inside the band is not meaningfully different from your norm.
); } // ---- SLEEP DETAIL --------------------------------------- function Sleep({ data }) { const sl = data.sleep, low = sl.confidence === "low"; const stageRows = sl.stages ? [["Deep", sl.stages.deep], ["REM", sl.stages.rem], ["Light", sl.stages.light], ["Awake", sl.stages.awake]] : null; return (
{fmtDur(sl.duration)}
{[["Regularity", sl.regularity, "/100"], ["Efficiency", sl.efficiency ?? "—", "%"], ["Fragments", sl.fragmentation ?? "—", `· base ${sl.fragBaseline}`]].map(([k, v, u]) => (
{v}{u}
))}
{/* onset signal */} Sleep-onset signal
{sl.onsetNote}
derived from evening temp-rise + HR-fall
 {/* duration trend */} Duration trend m / 60)} baseline={7.4} swc={0.6} status={low ? "lowconf" : "within"} lowconf={low} w={300} h={56} dot /> {/* stages — visibly de-emphasized */}
Sleep stages {stageRows ? ( <>
{stageRows.map(([k, v]) => ( ))}
Stage classification from a wrist optical sensor is approximate — treat the split as indicative, not exact. Duration and regularity are the higher-confidence numbers above. ) : (
Stages unavailable — {sl.gapHrs}h wear-time gap during the early night.
)}
); } // ---- TRENDS ---------------------------------------------- function rolling(arr, w) { return arr.map((_, i) => { const a = arr.slice(Math.max(0, i - w + 1), i + 1); return a.reduce((x, y) => x + y, 0) / a.length; }); } function Trends({ data }) { const T = window.OCC.trends; const [range, setRange] = React.useState("90d"); const rhrAvg = rolling(T.rhr90 || [], 7), hrvAvg = rolling(T.hrv90 || [], 7); const last = (a) => a.length ? a[a.length - 1].toFixed(0) : "—"; return (
{["30d", "90d", "6mo"].map((r) => ( ))}
Resting HR · 7-day avg{last(rhrAvg)} bpm HRV (rMSSD) · 7-day avg{last(hrvAvg)} ms
faint = nightly · solid = rolling avg · shaded = SWC band
 Fitness / fatigue / form
Circadian regularity IS 0.74
); } // ---- CLINICAL SCREENS ----------------------------------- function ClinicalTabs({ active, set, clin }) { const items = [["af", clin.af], ["osa", clin.osa], ["illness", clin.illness]]; return ( {items.map(([k, c]) => { const on = active === k; const tone = c.status === "flag" ? "acute" : c.status === "watch" ? "attn" : "good"; return ( ); })} ); } function ClinicalDetail({ c }) { const tone = c.status === "flag" ? "acute" : c.status === "watch" ? "attn" : "good"; const statusMark = c.status === "flag" ? "acute" : c.status === "watch" ? "attn" : "good"; return (
screen
{c.result}
{c.detail}
 Threshold crossed
{c.threshold}
 What this test can and can't tell you
{c.plain}
{c.caveat}
); } function Clinical({ data, initial = "af" }) { const clin = window.OCC.clinicalFor(data); const [active, setActive] = React.useState(initial); React.useEffect(() => { setActive(initial); }, [initial]); return (
); } Object.assign(window, { Recovery, Sleep, Trends, Clinical }); })();