/* CHAIRSIDE — App Modern SaaS / Masterclass aesthetic. Warm, premium, not stuffy. Six views: Home, Curriculum, Lesson, Scripts, Lexicon, Outcomes */ const { useState, useEffect, useMemo, useRef } = React; const COURSE = window.CHAIRSIDE_COURSE; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "warm", "accent": "amber", "density": "regular" }/*EDITMODE-END*/; const THEMES = { warm: { bg: "#FAF7F2", surface: "#FFFFFF", surface2: "#F5F0E8", line: "#E8DFD0", text: "#1F1B16", soft: "#5A5247", mute: "#8A8170", ink: "#0F0D0A", }, cream: { bg: "#F8F4EC", surface: "#FFFCF6", surface2: "#F0E9DA", line: "#E2D7BF", text: "#1A1612", soft: "#4F473B", mute: "#82785F", ink: "#0A0805", }, dark: { bg: "#1A1612", surface: "#231E18", surface2: "#2A241D", line: "#3A3329", text: "#F5EDDC", soft: "#B5AB95", mute: "#827960", ink: "#FFFFFF", }, }; const ACCENTS = { amber: { c: "#C77A2A", c2: "#E89A4A", soft: "#FCEBD3" }, rose: { c: "#B5536A", c2: "#D27086", soft: "#F7DCE3" }, teal: { c: "#2A8A88", c2: "#4FAEAC", soft: "#D0EAE9" }, indigo: { c: "#4B5495", c2: "#6E78B8", soft: "#DDE0F2" }, }; const ROLE_COLORS = { tc: "#C77A2A", fd: "#B5536A", hy: "#2A8A88", dr: "#4B5495", ow: "#5A5247", all: "#8A8170", }; const DEFAULT_PRACTICE_ROLE = "tc"; // The member's own Chairside role id (tc/fd/hy/dr/ow), resolved once from the // server-written suite role (WS1: /api/me.role via suiteRoleToChairside in // chairside-shared.jsx). Module-scoped because modulePracticeHref is called // from deep components; App's setState after the fetch re-renders the tree so // every call site picks it up. null = unknown or unmapped => "tc" fallback, // exactly the old behavior (fail open). let USER_PRACTICE_ROLE = null; function defaultPracticeHref() { return `Chairside-Roles.html#role=${USER_PRACTICE_ROLE || DEFAULT_PRACTICE_ROLE}&view=practice&launch=1`; } const useStored = (key, init) => { const [v, set] = useState(() => { try { const r = localStorage.getItem(key); return r ? JSON.parse(r) : init; } catch { return init; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]); return [v, set]; }; function GlobalStyle({ tokens, accent }) { return ( ); } // ─── Logo function Logo({ size = 32, accent }) { return ( ); } // ─── Chrome function Chrome({ view, setView, tokens, accent, progress }) { const items = [ { k: "home", label: "Overview" }, { k: "curriculum", label: "Modules" }, { k: "scripts", label: "Resources" }, ]; const lessons = COURSE.modules.flatMap(module => module.lessons.map(lesson => ({ moduleId: module.id, lessonId: lesson.id }))); const nextLesson = lessons.find(lesson => !progress[lesson.lessonId]?.done) || lessons[0]; const courseComplete = lessons.length > 0 && lessons.every(lesson => progress[lesson.lessonId]?.done); return (
{window.SuiteAccountMenu && }
); } // ─── Home function Home({ tokens, accent, setView, progress, memberRoleId }) { const useIsPhoneHook = window.useIsPhone || (() => false); const isPhone = useIsPhoneHook(); const total = COURSE.modules.reduce((a, m) => a + m.lessons.length, 0); const done = Object.keys(progress).filter(k => progress[k]?.done).length; const pct = total ? Math.round((done / total) * 100) : 0; // Operator-dashboard helpers. "Practice with AI" lives on the Roles surface // (Chairside-Roles.html), which loads the roleplay engine. The course home // surfaces it via deep-link rather than mounting the engine here. const allLessons = COURSE.modules.flatMap(m => m.lessons.map(l => ({ id: l.id, title: l.title, brief: l.brief, duration: l.duration, moduleId: m.id, moduleNumber: m.number, moduleTitle: m.title, })) ); const nextLesson = allLessons.find(l => !progress[l.id]?.done) || allLessons[0]; const nextModule = COURSE.modules.find(m => m.id === nextLesson.moduleId); const nextPracticeHref = nextModule ? modulePracticeHref(nextModule) : defaultPracticeHref(); const nextPracticeRoleName = nextModule ? moduleRoleName(nextModule) : "team"; const memberRole = COURSE.roles.find(role => role.id === memberRoleId) || null; // A5 — habit loop. Derive a practice streak from lesson-completion timestamps // already stored in progress (local day, no new storage). A day counts if any // lesson was completed that day; the streak is the run ending today/yesterday. const dayKey = (d) => { const x = new Date(d); return `${x.getFullYear()}-${x.getMonth()}-${x.getDate()}`; }; const activeDays = new Set(Object.values(progress).map(p => p && p.at).filter(Boolean).map(dayKey)); const todayKey = dayKey(Date.now()); const practicedToday = activeDays.has(todayKey); let streak = 0; if (practicedToday || activeDays.has(dayKey(Date.now() - 86400000))) { let cur = practicedToday ? Date.now() : Date.now() - 86400000; while (activeDays.has(dayKey(cur))) { streak++; cur -= 86400000; } } return (
{/* DASHBOARD HERO */}
● {pct > 0 ? `${pct}% through the course` : "Your practice"}

Practice the
conversations that
change the case.

Twelve modules on rapport, presentation, and the conversations every operatory has but few are trained for — plus live practice against an AI patient, scored turn by turn.

Practice with AI →
{pct > 0 && (
{done}/{total} lessons · {pct}%
)}
{/* A5 — Daily practice / streak (habit loop) */}
{streak} DAY{streak === 1 ? "" : "S"}
{practicedToday ? "You practiced today." : streak > 0 ? "Keep the streak alive." : "Start a streak today."}
{practicedToday ? `${streak}-day streak — come back tomorrow.` : `Today's rep: ${nextLesson.title}`}
Practice with AI →
{/* LIVE PRACTICE — the AI simulator, surfaced as a co-hero */}
Live practice

Rehearse with an AI patient.
Get scored. Run it again.

Every script in the role library runs as a live roleplay — beginner to expert, by voice or text — with a rubric and per-turn coaching. Reading builds understanding; reps build fluency.

{/* WHAT YOU LEARN — Modules grid */}
The curriculum

Twelve modules. The whole patient journey.

{COURSE.modules.map((m, i) => ( ))}
{/* PERSONALIZED ROLE PATH */}
{memberRole ? memberRole.name.split(" ").map(part => part[0]).join("").slice(0, 2) : "YP"}
{memberRole ? "Your path" : "Role-based paths"}

{memberRole ? memberRole.name : "Find the modules for your seat."}

{memberRole ? memberRole.desc : "Use the role filters in Modules to bring the most relevant lessons forward. The full course always stays available."}

{memberRole && ( Practice as {memberRole.name.replace(/s$/, "")} → )}
{/* Faculty / cohort-outcomes / testimonials intentionally removed. This surface is an internal team tool behind authenticated access — the people here are already enrolled, so marketing proof reads as filler (and the testimonials/faculty were placeholder). The underlying data (COURSE.outcomes / faculty / testimonials) is kept in chairside-data.jsx for a future public marketing page. */} {/* CTA */}

{pct > 0 ? "Keep the reps going." : "Start with one conversation."}

Read the lesson, then rehearse it against an AI patient until the words are yours. Understanding comes from reading; fluency comes from reps.

Practice with AI →
); } function LearningLoopPanel({ tokens, accent, isPhone, nextLesson, nextPracticeHref, nextPracticeRoleName, setView }) { const steps = [ { k: "01", eyebrow: "Learn", title: nextLesson.title, body: `${nextLesson.duration} min · Module ${nextLesson.moduleNumber}`, action: "Open lesson", onClick: () => setView({ name: "lesson", moduleId: nextLesson.moduleId, lessonId: nextLesson.id }), }, { k: "02", eyebrow: "Practice", title: `${nextPracticeRoleName} AI rep`, body: "Run the conversation while the lesson is fresh.", action: "Start roleplay", href: nextPracticeHref, }, { k: "03", eyebrow: "Review", title: "Practice report", body: "Use the score and coaching notes to choose the next rep.", action: "Progress", href: "Chairside-My-Practice.html", }, ]; return (
Your training loop

Learn it. Rehearse it. Review it.

Chairside works best as a short cycle: lesson, live rep, report, repeat.

{steps.map(step => { const content = ( <>
{step.k} {step.eyebrow}

{step.title}

{step.body}

{step.action} → ); const baseStyle = { minHeight: 190, padding: 20, textAlign: "left", color: tokens.text, display: "flex", flexDirection: "column", borderRadius: 16, border: `1px solid ${tokens.line}`, background: tokens.surface, textDecoration: "none", }; return step.href ? ( {content} ) : ( ); })}
); } function moduleLessonDoneCount(module, progress) { return module.lessons.filter(lesson => progress[lesson.id]?.done).length; } function moduleDrillMeta(module, progress) { const drillLessons = module.lessons.filter(lesson => lesson.drill); return { total: drillLessons.length, done: drillLessons.filter(lesson => progress[lesson.id]?.drillDone).length, }; } function moduleDisplayName(module) { if (!/^\d+$/.test(String(module.number))) return `Volume ${module.number}`; return `Module ${module.number}`; } function modulePracticeHref(module) { const roleIds = new Set((COURSE.roles || []).map(role => role.id)); // A module with a specific lead role practices that role's scripts; a // whole-team module practices the MEMBER's role when the server knows it. const role = module.role && module.role !== "all" && roleIds.has(module.role) ? module.role : (USER_PRACTICE_ROLE || DEFAULT_PRACTICE_ROLE); return `Chairside-Roles.html#role=${role}&view=practice&launch=1`; } function moduleRoleName(module) { if (module.role === "all") return "team"; return COURSE.roles.find(role => role.id === module.role)?.name || "team"; } function nextModuleFor(module) { const idx = COURSE.modules.findIndex(item => item.id === module.id); return idx >= 0 ? COURSE.modules[idx + 1] : null; } function buildGuideSummary(module, nextModule, drillMeta) { const lessonWord = module.lessons.length === 1 ? "lesson" : "lessons"; const drillPhrase = drillMeta.total === 0 ? "Then one AI practice rep" : `Then ${drillMeta.total === 1 ? "the drill" : `${drillMeta.total} drills`} and one AI practice rep`; const destination = nextModule ? `before ${moduleDisplayName(nextModule)}.` : "to close the Chairside path."; return `Briefing first. ${module.lessons.length} ${lessonWord} next. ${drillPhrase} ${destination}`; } function moduleNextLesson(module, progress) { return ( module.lessons.find(lesson => !progress[lesson.id]?.done) || module.lessons.find(lesson => lesson.drill && !progress[lesson.id]?.drillDone) || module.lessons[0] ); } function ModuleCurriculumGuide({ module, progress, setView, tokens, accent, isPhone }) { const doneCount = moduleLessonDoneCount(module, progress); const drillMeta = moduleDrillMeta(module, progress); const nextLesson = moduleNextLesson(module, progress); const nextModule = nextModuleFor(module); const lessonTotal = module.lessons.length; const moduleDone = doneCount === lessonTotal; const drillsDone = drillMeta.total === 0 || drillMeta.done === drillMeta.total; const steps = [ { label: "Briefing", detail: doneCount > 0 ? "Started" : "Watch first", done: doneCount > 0, active: doneCount === 0 }, { label: "Lessons", detail: `${doneCount}/${lessonTotal} complete`, done: moduleDone, active: doneCount > 0 && !moduleDone }, { label: "Drill", detail: drillMeta.total ? `${drillMeta.done}/${drillMeta.total} complete` : "No drill", done: drillsDone, active: moduleDone && !drillsDone }, { label: "Practice", detail: `${moduleRoleName(module)} roleplay`, done: false, active: moduleDone && drillsDone }, ]; return (
{moduleDone ? "Review path" : "Start here"}
{buildGuideSummary(module, nextModule, drillMeta)}
{steps.map(step => (
{step.label}
{step.detail}
))}
); } function ModuleLessonGuide({ module, lesson, progress, setView, tokens, accent, isPhone }) { const doneCount = moduleLessonDoneCount(module, progress); const drillMeta = moduleDrillMeta(module, progress); const practiceHref = modulePracticeHref(module); return (
{moduleDisplayName(module)} path
{doneCount}/{module.lessons.length} lessons complete {drillMeta.total > 0 ? ` · ${drillMeta.done}/${drillMeta.total} drills complete` : ""}
Practice with AI →
{module.lessons.map((item, i) => { const active = item.id === lesson.id; const done = !!progress[item.id]?.done; return ( ); })} Practice AI roleplay room
); } function ModulePracticeCheckpoint({ module, next, nextModule, setView, tokens, accent }) { const isFinalLesson = !next && !!nextModule; const isCourseFinalLesson = !next && !nextModule; const practiceHref = modulePracticeHref(module); return (
{isFinalLesson || isCourseFinalLesson ? "Practice checkpoint" : "Next step"}

{isCourseFinalLesson ? "Run one AI rep to close Chairside." : isFinalLesson ? `Run one AI rep before ${moduleDisplayName(nextModule)}.` : `Keep the ${moduleDisplayName(module)} path moving.`}

{isCourseFinalLesson ? "Use the roleplay room to turn the final lesson into a live rep while the language is still fresh." : isFinalLesson ? `Use the roleplay room to rehearse this module before moving into ${nextModule.title}.` : "Mark this lesson complete, continue to the next lesson, or open the AI practice room for a quick rep."}

Practice with AI → {next && ( )} {isFinalLesson && ( )}
); } // ─── Curriculum function Curriculum({ tokens, accent, setView, progress, defaultRoleId }) { const isPhone = (window.useIsPhone || (() => false))(); const [filter, setFilter] = useState(() => COURSE.roles.some(role => role.id === defaultRoleId) ? defaultRoleId : "all"); const appliedDefault = useRef(false); useEffect(() => { if (!appliedDefault.current && COURSE.roles.some(role => role.id === defaultRoleId)) { setFilter(defaultRoleId); appliedDefault.current = true; } }, [defaultRoleId]); const total = COURSE.modules.reduce((a, m) => a + m.lessons.length, 0); const done = Object.keys(progress).filter(k => progress[k]?.done).length; return (
The curriculum

Twelve modules,
~40 lessons.

Your progress
{done} / {total} lessons walked
{/* Role filter */}
{COURSE.roles.map(r => ( ))}
{/* Modules */}
{COURSE.modules.map(m => { const dim = filter !== "all" && m.role !== filter && m.role !== "all"; const moduleDone = m.lessons.filter(l => progress[l.id]?.done).length; return (
{m.number}
{m.kicker}

{m.title}

{m.synopsis}

{m.lessons.length} lessons · {m.hours}h · {moduleDone}/{m.lessons.length} done
    {m.lessons.map((l, i) => { const isDone = !!progress[l.id]?.done; return (
    2. ); })}
); })}
); } // ─── Lesson function Lesson({ tokens, accent, view, setView, progress, setProgress, journal, setJournal }) { const isPhone = (window.useIsPhone || (() => false))(); const m = COURSE.modules.find(x => x.id === view.moduleId); const l = m?.lessons.find(x => x.id === view.lessonId); const idx = m.lessons.findIndex(x => x.id === l.id); const next = m.lessons[idx + 1]; const nextModule = !next ? COURSE.modules[COURSE.modules.findIndex(x => x.id === m.id) + 1] : null; const prev = m.lessons[idx - 1]; // Module video — one summary video per module, rendered on the first lesson only. // PraxiaVideo expects token keys Chairside's `tokens` lacks; adapt them here. const Player = window.PraxiaVideo; const moduleVideoSrc = (COURSE.media && COURSE.media.baseUrl && m.video) ? `${COURSE.media.baseUrl}/${m.video}` : null; const videoTokens = { line: tokens.line, surface: tokens.surface, surface2: tokens.surface2, text: tokens.text, mute: tokens.mute, soft: tokens.soft, bg: tokens.bg, bg2: tokens.surface2, accent: accent.c, accent2: accent.c2, }; const isDone = !!progress[l.id]?.done; const markDone = () => setProgress(p => ({ ...p, [l.id]: { ...(p[l.id] || {}), done: true, at: Date.now() } })); const [readPct, setReadPct] = useState(0); const articleRef = useRef(null); // Reference layer: any module with a cheatSheet array gets a slide-in drawer. const hasCheat = Array.isArray(m.cheatSheet) && m.cheatSheet.length > 0; const [cheatOpen, setCheatOpen] = useState(false); useEffect(() => { setCheatOpen(false); }, [view.lessonId, view.moduleId]); useEffect(() => { if (!cheatOpen) return; const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setCheatOpen(false); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prevOverflow; window.removeEventListener("keydown", onKey); }; }, [cheatOpen]); useEffect(() => { const onScroll = () => { const el = articleRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const total = rect.height - window.innerHeight; const passed = Math.min(Math.max(-rect.top, 0), Math.max(total, 1)); setReadPct(Math.round((passed / Math.max(total, 1)) * 100)); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, [view.lessonId]); useEffect(() => { window.scrollTo({ top: 0 }); }, [view.lessonId]); return (
{/* Reading bar */}
{/* Left rail */} {/* Article */}
{idx === 0 && Player && moduleVideoSrc && ( )}
/ Module {m.number} / Lesson {idx + 1}
● {m.kicker}

{l.title}

{l.brief}

● {l.duration} min read {isDone && ✓ Completed}
{/* Body */}
{l.body.map((b, i) => { if (b.kind === "p") { return (

{b.text}

); } if (b.kind === "h3") { return (

{b.text}

); } if (b.kind === "list") { return (
    {b.items.map((it, j) => (
  • {j + 1} {it}
    • ))}
); } if (b.kind === "script") { return (
Say this

{b.text}

); } return null; })}
{/* Frame */} {l.frame && (
The frame

{l.frame.title}

{l.frame.text}

)} {/* Drill */} {l.drill && setProgress(p => ({ ...p, [l.id]: { ...(p[l.id] || {}), drillDone: true } }))} />} {/* Keystones */}
Keystones
    {l.keystones.map((k, i) => (
  • — {k}
    • ))}
{/* Prompt */} {l.prompt && (
Reflection

{l.prompt}