/* ROLE PATHS APP — Guided learning tracks UI * * Role picker → Path overview → Step detail * Progress tracked per user, synced to Redis */ const { useState, useEffect, useMemo } = React; function RolePathsRoot() { const tokens = window.CHAIRSIDE_THEMES.warm; const accent = window.CHAIRSIDE_ACCENTS.teal; return ( <> ); } function RolePathsApp({ tokens, accent }) { const [selectedRoleId, setSelectedRoleId] = window.useChairsideStored("rolePaths.selectedRole", null); const [pathProgress, setPathProgress] = window.useSyncedStore("rolePaths.progress", {}); // Deep link support: #role=tc useEffect(() => { function readHash() { const params = new URLSearchParams(window.location.hash.replace(/^#/, "")); const roleId = params.get("role"); if (roleId && window.ROLE_PATHS[roleId]) { setSelectedRoleId(roleId); } } readHash(); window.addEventListener("hashchange", readHash); return () => window.removeEventListener("hashchange", readHash); }, []); const handleSelectRole = (roleId) => { setSelectedRoleId(roleId); window.location.hash = `role=${roleId}`; }; const handleBack = () => { setSelectedRoleId(null); window.location.hash = ""; }; const markStepComplete = (roleId, stepId) => { const roleProgress = pathProgress[roleId] || { completed: [] }; if (!roleProgress.completed.includes(stepId)) { const updated = { ...pathProgress, [roleId]: { ...roleProgress, completed: [...roleProgress.completed, stepId], lastUpdated: Date.now() } }; setPathProgress(updated); } }; const markStepIncomplete = (roleId, stepId) => { const roleProgress = pathProgress[roleId] || { completed: [] }; const updated = { ...pathProgress, [roleId]: { ...roleProgress, completed: roleProgress.completed.filter(id => id !== stepId), lastUpdated: Date.now() } }; setPathProgress(updated); }; return (
{!selectedRoleId ? ( ) : ( )}
); } // ─── Role Picker ──────────────────────────────────────────────────── function RolePathPicker({ tokens, accent, onSelectRole, pathProgress }) { const roles = ["tc", "hyg", "doc", "own"]; return (
Chairside · Guided Paths

Choose your role path

Each path combines ordered Learn lessons with matching Practice scenarios. Start where you are, follow the track, and build real skill.

{roles.map(roleId => { const path = window.ROLE_PATHS[roleId]; if (!path) return null; const progress = window.getPathProgress(roleId, pathProgress[roleId]?.completed || []); const hasStarted = progress.completed > 0; return ( ); })}

How paths work

  • • Learn steps are lessons from the Chairside course — watch, read, complete the drill
  • • Practice steps are AI roleplay scenarios — run the conversation, get scored
  • • Progress is saved per role — you can work multiple paths at once
  • • Your progress syncs across devices when signed in
); } // ─── Path Overview ────────────────────────────────────────────────── function PathOverview({ tokens, accent, roleId, onBack, completedSteps, onMarkComplete, onMarkIncomplete }) { const path = window.ROLE_PATHS[roleId]; const [expandedStep, setExpandedStep] = useState(null); if (!path) return null; const progress = window.getPathProgress(roleId, completedSteps); const nextStep = window.getNextStep(roleId, completedSteps); return (
{/* Path header */}
{path.name.split(" ").map(w => w[0]).join("").slice(0, 2)}
Your learning path

{path.name}

{path.description}

{/* Progress bar */}
{progress.completed} of {progress.total} steps complete {progress.percent}%
{/* Next step CTA */} {nextStep && (
Continue your path
{nextStep.title}
{nextStep.description}
)}
{/* Steps list */}

All steps

{path.steps.map((step, index) => { const isCompleted = completedSteps.includes(step.id); const isExpanded = expandedStep === step.id; const isNext = nextStep && nextStep.id === step.id; return (
{/* Expanded content */} {isExpanded && (

{step.description}

{!isCompleted ? ( ) : ( )}
)}
); })}
); } // ─── Step Action Button ───────────────────────────────────────────── function StepActionButton({ step, roleId, color, tokens }) { if (step.type === "learn") { // Link to Chairside lesson const href = `Chairside.html#view=lesson&module=${step.moduleId}&lesson=${step.lessonId}`; return ( Start lesson → ); } else if (step.type === "practice") { // Link to Practice with script const href = `Chairside-Roles.html#role=${step.roleId}&view=practice&script=${step.scriptId}&launch=1`; return ( Practice with AI → ); } return null; } // Export Object.assign(window, { RolePathsRoot });