/* COMPANIONS — Roles, Handoffs, Difficult, Friday — single-file viewer */ const { useState, useMemo, useEffect } = React; // ============================================================ // ROLES — Operating manual for five positions // ============================================================ function RolesApp({ tokens, accent }) { const [roleId, setRoleId] = useChairsideStored("ch.roles.id", "tc"); const [viewId, setViewId] = useChairsideStored("ch.roles.view", "overview"); const [pendingScriptId, setPendingScriptId] = useState(null); const [autoLaunchScript, setAutoLaunchScript] = useState(null); const autoLaunchConsumed = React.useRef(false); const didMountView = React.useRef(false); // Deep-link reader: #role=own&view=practice&script=own-script-1 useEffect(() => { function readHash() { const params = new URLSearchParams(window.location.hash.replace(/^#/, "")); const hashRoleId = params.get("role"); const hashViewId = params.get("view"); const scriptId = params.get("script"); const wantsLaunch = params.get("launch") === "1"; const validViews = ["overview", "practice", "metrics", "praxia"]; const validRole = hashRoleId ? ROLES_DATA.roles.find(r => r.id === hashRoleId) || null : null; if (validRole) setRoleId(validRole.id); if (scriptId) { setViewId("practice"); setPendingScriptId(scriptId); } else if (validViews.includes(hashViewId)) { setViewId(hashViewId); } // Deep-link auto-launch: open the Practice-with-AI modal directly, used // by the course home's "Practice with AI" CTAs (#...&launch=1). Picks the // named script, else the role's first roleplay-ready script. Fires once // per page load; reuses the engine-exported window.RoleplaySession. if (wantsLaunch && !autoLaunchConsumed.current) { const targetRole = validRole || ROLES_DATA.roles.find(r => r.id === roleId); const api = window.RoleplayAPI; const isReady = (s) => !!(api && typeof api.isRoleplayReady === "function" && api.isRoleplayReady(s)); const scripts = (targetRole && targetRole.scripts) || []; const chosen = (scriptId && scripts.find(s => s.id === scriptId && isReady(s))) || scripts.find(isReady) || null; if (chosen) { autoLaunchConsumed.current = true; setViewId("practice"); setPendingScriptId(chosen.id); setAutoLaunchScript(chosen); } } } readHash(); window.addEventListener("hashchange", readHash); return () => window.removeEventListener("hashchange", readHash); }, []); const role = ROLES_DATA.roles.find(r => r.id === roleId); const accentColor = role.color; const hasPractice = Boolean((role.scripts && role.scripts.length) || (role.failureModes && role.failureModes.length)); const hasMetrics = Boolean((role.weeklyMetrics && role.weeklyMetrics.length) || (role.metrics && role.metrics.length) || (role.week && role.week.length)); const hasPraxia = Boolean(role.praxiaBridge && role.praxiaBridge.length); const availableViews = [ { id: "overview", label: "Overview", available: true }, { id: "practice", label: "Practice", available: hasPractice }, { id: "metrics", label: "Metrics", available: hasMetrics }, { id: "praxia", label: "Praxia", available: hasPraxia }, ].filter(v => v.available); const activeViewId = availableViews.some(v => v.id === viewId) ? viewId : "overview"; useEffect(() => { if (activeViewId !== viewId) setViewId("overview"); }, [activeViewId, viewId]); useEffect(() => { if (!didMountView.current) { didMountView.current = true; return; } window.scrollTo({ top: 0, behavior: "smooth" }); }, [viewId]); const viewIsAvailableForRole = (id, nextRole) => { if (id === "overview") return true; if (id === "practice") return Boolean((nextRole.scripts && nextRole.scripts.length) || (nextRole.failureModes && nextRole.failureModes.length)); if (id === "metrics") return Boolean((nextRole.weeklyMetrics && nextRole.weeklyMetrics.length) || (nextRole.metrics && nextRole.metrics.length) || (nextRole.week && nextRole.week.length)); if (id === "praxia") return Boolean(nextRole.praxiaBridge && nextRole.praxiaBridge.length); return false; }; const selectRole = (nextRoleId) => { const nextRole = ROLES_DATA.roles.find(r => r.id === nextRoleId); if (nextRole && !viewIsAvailableForRole(viewId, nextRole)) setViewId("overview"); setRoleId(nextRoleId); }; const renderEmptyState = (message) => (
{message}
); const renderMetricsThatMatterCard = (style) => (
Metrics that matter
); const renderTypicalWeekCard = (style) => (
A typical week
); return (
{/* Hero */}
Chairside · Roles

The five jobs in a dental practice — written like jobs, not like job descriptions.

Most dental job descriptions are HR documents — duties, qualifications, reports-to. These are operating manuals: what the job is for, what good looks like, the conversations you'll need to be fluent in, and what isn't yours to carry.

{/* Role tabs */}
{ROLES_DATA.roles.map(r => ( ))}
{/* Role sub-tabs */}
{availableViews.map(v => { const active = activeViewId === v.id; return ( ); })}
{/* Role detail */} {activeViewId === "overview" && (
Purpose

{role.purpose}

    {role.outcomes.map((o, i) => (
  • {String(i + 1).padStart(2, "0")} {o}
    • ))}
{role.mastery && }
    {role.conversations.map((c, i) => (
  • · {c}
    • ))}
{role.handoffs.map((h, i) => (
{h.split(":")[0]} {h.split(":").slice(1).join(":").trim()}
))}
    {role.notFor.map((n, i) =>
  • {n}
    • )}
)} {activeViewId === "practice" && (
{role.scripts && role.scripts.length > 0 && ( )} {role.scripts && role.scripts.length > 0 && } {role.failureModes && role.failureModes.length > 0 && } {!hasPractice && renderEmptyState("No practice material for this role yet.")}
)} {activeViewId === "metrics" && (
{role.weeklyMetrics && role.weeklyMetrics.length > 0 ? : renderEmptyState("No weekly metrics defined for this role yet.")} {renderMetricsThatMatterCard({ marginBottom: 20 })} {renderTypicalWeekCard()}
)} {activeViewId === "praxia" && (
{role.praxiaBridge && role.praxiaBridge.length > 0 ? : renderEmptyState("No Praxia cross-references for this role yet.")}
)} {/* Deep-link auto-launch modal — the same RoleplaySession the "Practice with AI" button opens, mounted directly from a #...&launch=1 link. The accordion below is also opened (pendingScriptId) so closing the modal lands on the open script. */} {autoLaunchScript && window.RoleplaySession && ( { setAutoLaunchScript(null); // Strip launch flag so a refresh doesn't reopen the modal. try { const p = new URLSearchParams(window.location.hash.replace(/^#/, "")); p.delete("launch"); const s = p.toString(); window.history.replaceState(null, "", s ? `#${s}` : window.location.pathname); } catch (e) { /* ignore */ } }} /> )}
); } // ============================================================ // HANDOFFS — Library of every handoff in the practice // ============================================================ function HandoffsApp({ tokens, accent }) { const [openId, setOpenId] = useState(HANDOFFS_DATA.handoffs[0].id); return (
Chairside · Handoffs

Every patient is handed off six times. Most practices script none of them.

A handoff is the moment a patient leaves one team member's care and enters another's. They are the most fragile minute in the visit — and the most overlooked. This is the library.

{HANDOFFS_DATA.handoffs.map((h, i) => { const open = openId === h.id; return (
{open && (
What transfers
    {h.whatTransfers.map((w, j) =>
  • {w}
    • )}
What stays
    {h.whatStays.map((w, j) =>
  • {w}
    • )}
Common failures
    {h.common.map((w, j) =>
  • {w}
    • )}
What it sounds like
{h.script.map((line, j) => (
{line.speaker.toUpperCase()}
"{line.text}"
))}
)}
); })}
); } // ============================================================ // DIFFICULT — Difficult patient conversations // ============================================================ function DifficultApp({ tokens, accent }) { const [scenarioId, setScenarioId] = useChairsideStored("ch.diff.id", "d1"); const s = DIFFICULT_DATA.scenarios.find(x => x.id === scenarioId); return (
Chairside · Difficult

Eight conversations no one teaches in dental school.

The angry patient at the front desk. The treatment that failed. The bad review you didn't deserve. The chair-side cry. Each one is rehearseable. None of them are scripted — they're disciplined.

Scenario {String(DIFFICULT_DATA.scenarios.findIndex(x => x.id === s.id) + 1).padStart(2, "0")}

{s.title}

{s.scenario}
The principle

{s.principle}

The moves
{s.moves.map((m, i) => (
DO
{m.do}
DON'T
{m.dont}
))}
NEVER
    {s.neverDo.map((n, i) =>
  • {n}
    • )}
); } // ============================================================ // FRIDAY — 52-week roleplay kit // ============================================================ function FridayApp({ tokens, accent }) { const [weekIdx, setWeekIdx] = useChairsideStored("ch.friday.week", 0); const [filter, setFilter] = useState("all"); const [completed, setCompleted] = useChairsideStored("ch.friday.done", []); const themes = useMemo(() => Array.from(new Set(FRIDAY_DATA.weeks.map(w => w.theme))), []); const visible = useMemo(() => FRIDAY_DATA.weeks.filter(w => filter === "all" || w.theme === filter), [filter]); const w = FRIDAY_DATA.weeks[weekIdx]; const toggle = (i) => setCompleted(c => c.includes(i) ? c.filter(x => x !== i) : [...c, i]); return (
Chairside · Friday

A year of Friday roleplay. Thirty minutes. Same time, every week.

Skill compounds when it's practiced under pressure, in front of peers, on a schedule. Fifty-two prepared sessions. Pick where you are. Run it.

{/* Active week panel */}
Week {String(w.week).padStart(2, "0")} · {w.theme}

{w.scenario}

30-minute structure
    {w.structure.map((s, i) => (
  1. {String(i + 1).padStart(2, "0")} {s}
    2. ))}
Facilitator notes
    {w.facilitatorNotes.map((n, i) =>
  • {n}
    • )}
{/* Year grid */}

The year

{themes.map(t => ( ))}
{visible.map(week => { const isActive = week.week - 1 === weekIdx; const isDone = completed.includes(week.week - 1); return ( ); })}
); } // ============================================================ // SHARED helpers // ============================================================ function Section({ title, tokens, children }) { return (

{title}

{children}
); } function SubHeading({ children, tokens, accent, style }) { return (
{children}
); } function isRoleplayReadyForHub(script) { const api = window.RoleplayAPI; return !!(api && typeof api.isRoleplayReady === "function" && api.isRoleplayReady(script)); } function roleInitials(name) { return String(name || "") .split(/\s+/) .filter(Boolean) .map(part => part[0]) .join("") .slice(0, 2) .toUpperCase(); } function rolePracticeLabel(role) { if (!role || !role.name) return "team"; return role.name === "Practice Owner" ? "owner" : role.name.split(" ")[0].toLowerCase(); } function truncateRoleText(text, max = 118) { if (!text) return ""; return text.length <= max ? text : `${text.slice(0, max - 1).trimEnd()}…`; } function PracticeHub({ role, tokens, accentColor, pendingScriptId, setPendingScriptId }) { const isPhone = (window.useIsPhone || (() => false))(); const scripts = role.scripts || []; const readyScripts = scripts.filter(isRoleplayReadyForHub); const firstReady = readyScripts[0] || scripts[0]; const [selectedId, setSelectedId] = useState(pendingScriptId || (firstReady && firstReady.id)); useEffect(() => { const pendingInRole = pendingScriptId && scripts.some(s => s.id === pendingScriptId); setSelectedId(pendingInRole ? pendingScriptId : (firstReady && firstReady.id)); }, [role.id, pendingScriptId]); const selected = scripts.find(s => s.id === selectedId) || firstReady; const selectedReady = isRoleplayReadyForHub(selected); const openScript = () => { if (!selected) return; setPendingScriptId && setPendingScriptId(selected.id); setTimeout(() => { const el = document.getElementById(`script-${selected.id}`); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }, 80); }; if (!scripts.length || !selected) return null; return (
{roleInitials(role.name)}
Practice with AI

Practice as {rolePracticeLabel(role)}.

{readyScripts.length}/{scripts.length} scenarios ready · choose a rep, run it, then review the report.
My Practice →
Selected rep

{selected.title}

{truncateRoleText(selected.setup || selected.trigger || "Open the script below, read the setup, then run the rep.")}

{window.RoleplayLauncher && ( )}
{!selectedReady && (
This script is in the library, but AI practice is not ready for it yet.
)}
{scripts.map((script, index) => { const ready = isRoleplayReadyForHub(script); const active = script.id === selected.id; return ( ); })}
); } // ─── Mastery progression: 30 / 90 / 365 function MasterySection({ role, tokens, accentColor }) { const stages = [ { key: "day30", label: "Day 30", kicker: "Tactical" }, { key: "day90", label: "Day 90", kicker: "Relational" }, { key: "day365", label: "Day 365", kicker: "Structural" }, ]; return (
{stages.map((s, i) => (
{s.label.toUpperCase()} {String(i + 1).padStart(2, "0")} / 03
{s.kicker}

{role.mastery[s.key]}

))}
); } // ─── Weekly metrics with editable input fields function WeeklyMetricsSection({ role, tokens, accentColor }) { const storeKey = `ch.metrics.${role.id}`; const [values, setValues] = useChairsideStored(storeKey, {}); const update = (name, v) => setValues({ ...values, [name]: v }); return (
{role.weeklyMetrics.map((m, i) => (
{m.name}
{m.definition}
update(m.name, e.target.value)} style={{ flex: 1, padding: "10px 12px" }} /> {m.unit || ""}
BASELINE
{m.baseline}
CADENCE
{m.cadence}
OFF-TRACK
{m.offTrack}
))}
); } // ─── Scripts library — accordion of verbatim scripts function ScriptsLibrary({ role, tokens, accentColor, pendingScriptId, setPendingScriptId }) { const [openId, setOpenId] = useState(null); useEffect(() => { if (pendingScriptId && role.scripts.some(s => s.id === pendingScriptId)) { setOpenId(pendingScriptId); // scroll once mounted setTimeout(() => { const el = document.getElementById(`script-${pendingScriptId}`); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); setPendingScriptId && setPendingScriptId(null); }, 80); } }, [pendingScriptId, role.id]); return (
{role.scripts.map((s, i) => { const open = openId === s.id; return (
{open && (
{window.RoleplayLauncher && (
)}
OPENING ({role.id.toUpperCase()})
"{s.opening}"
{Array.isArray(s.patientResponses) && s.patientResponses.length > 0 && (
{s.patientResponses.map((pr, j) => (
PATIENT
"{pr.response}"
{role.id.toUpperCase()} REPLY
"{pr.reply}"
))}
)}
PRAXIA LINK ↗
{s.praxiaLink}
{s.leadHcId && (
CHAIRSIDE: LEAD ↗
{s.leadLink || `See the in-the-room script in Chairside: Lead — Hard Conversation ${s.leadHcId.replace(/^hc/, '')}.`}
)}
)}
); })}
); } function ScriptBlock({ label, body, tokens, accentColor, marginTop }) { return (
{label.toUpperCase()}
{body}
); } // Collapsible labelled subsection — used inside open script accordions for // reference material that pushes the primary action down when always-on. function CollapsibleSubsection({ label, tokens, accentColor, children, defaultOpen = false }) { const [open, setOpen] = useState(defaultOpen); return (
{open &&
{children}
}
); } // ─── Phase: Language Patterns chip row — appears at the top of an open // script accordion body when the script has `patternsUsed`. Each chip is a // real cross-page link to the Language Patterns library, since the suite is // a multi-HTML-shell app, not an SPA. Empty / missing `patternsUsed` renders // nothing (silent absence, per spec). function PatternChipRow({ patternIds, tokens, accentColor }) { if (!Array.isArray(patternIds) || patternIds.length === 0) return null; const lib = (typeof window !== "undefined" && window.LANGUAGE_PATTERNS) || []; const found = patternIds .map(id => lib.find(p => p.id === id)) .filter(Boolean); if (found.length === 0) return null; return (
Patterns in this script: {found.map(p => ( { e.currentTarget.style.borderColor = accentColor; e.currentTarget.style.color = accentColor; }} onMouseLeave={e => { e.currentTarget.style.borderColor = tokens.line; e.currentTarget.style.color = tokens.soft; }} > {p.name} ))}
); } // ─── Failure modes — accordion function FailureModesSection({ role, tokens, accentColor }) { const [openIdx, setOpenIdx] = useState(null); return (
{role.failureModes.map((fm, i) => { const open = openIdx === i; return (
{open && (
SIGNATURE
{fm.signature}
RECOVERY
{fm.recovery}
)}
); })}
); } // ─── Praxia bridge — footer card with cross-links function PraxiaBridgeSection({ role, tokens, accentColor }) { return (
THE CROSS-REFERENCE
The lessons in Praxia that power this role. Each link opens the underlying mental model.
{role.praxiaBridge.map((p, i) => (
{p.lessonId.toUpperCase()} ↗
{p.lessonTitle}
{p.relevance}
))}
); } // ─── Praxia cross-link — opens Praxia.html with a deep-link hash function PraxiaLessonLink({ lessonId, children, tokens, accentColor, dark }) { const href = `Praxia.html#lesson=${encodeURIComponent(lessonId)}`; return ( e.currentTarget.style.opacity = 0.7} onMouseOut={(e) => e.currentTarget.style.opacity = 1}> {children} ); } // ─── Chairside: Lead cross-link — opens Lead.html with a deep-link hash to a specific hard conversation function LeadHcLink({ hcId, children, tokens, accentColor }) { const href = `Chairside-Lead.html#hc=${encodeURIComponent(hcId)}`; return ( e.currentTarget.style.opacity = 0.7} onMouseOut={(e) => e.currentTarget.style.opacity = 1}> {children} ); } // ============================================================ // ROUTING — single file, four products via ?app= query // ============================================================ function CompanionsRoot() { const params = new URLSearchParams(location.search); const app = params.get("app") || "roles"; const tokens = CHAIRSIDE_THEMES.warm; const accent = CHAIRSIDE_ACCENTS.amber; if (app === "handoffs") return <>; if (app === "difficult") return <>; if (app === "friday") return <>; return <>; } Object.assign(window, { CompanionsRoot });