/* ============================================================
Guided Workshop v2 — main app
Layout: top bar + progress strip + viewer canvas + sticky action bar
Overlays: chapter outline (slide-from-left), Cmd+K, actions drawer,
poll presenter, lightbox.
============================================================ */
const { ContentView, MediaView, EvidenceView, QuestionView, PollPresenter, Lightbox, v2Icons } = window.gwV2Views;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"progressPreset": "mid",
"perspective": "completer",
"sessionLive": true
}/*EDITMODE-END*/;
/* ---------- helpers ---------- */
const allItems = () => GW_CHAPTERS.flatMap(c => c.items.map(it => ({ chapter: c, item: it })));
const flatIndex = (id) => allItems().findIndex(p => p.item.id === id);
const findById = (id) => allItems().find(p => p.item.id === id);
function presetCompletion(preset) {
const ids = allItems().map(p => p.item.id);
const n = preset === "start" ? 1
: preset === "early" ? Math.round(ids.length * 0.15)
: preset === "mid" ? Math.round(ids.length * 0.45)
: preset === "late" ? Math.round(ids.length * 0.85)
: ids.length;
return new Set(ids.slice(0, n));
}
function labelForItem(it) {
if (it.type === "question") {
const map = { radio: "Multiple choice", rating: "Rating", boolean: "Yes / No", text: "Short answer", textarea: "Long answer" };
const sub = map[it.questionType] || "Question";
return it.mode === "poll" ? `Poll · ${sub}` : sub;
}
if (it.type === "media") {
if (it.mediaKind === "video") return "Video";
return Array.isArray(it.images) && it.images.length > 1 ? "Image set" : "Image";
}
if (it.type === "content") return "Reading";
if (it.type === "evidence") return "Evidence upload";
return it.type;
}
function iconForItem(it) {
const t = it.type;
if (t === "content") return ;
if (t === "media") return ;
if (t === "evidence") return ;
if (t === "question") {
if (it.mode === "poll") return ;
return ;
}
return null;
}
/* ============================================================
TopBar — minimal sticky header
============================================================ */
function TopBar({ index, total, percent, onOutline, onCmdK, onActions, onAi, tx }) {
return (
);
}
/* ============================================================
ProgressStrip — thin progress bar with chapter section markers
============================================================ */
function ProgressStrip({ percent, index, total }) {
/* Chapter dividers — positioned at the cumulative item count */
const total_ = allItems().length;
let cum = 0;
const markers = GW_CHAPTERS.map((c) => {
cum += c.items.length;
return { id: c.id, pos: (cum / total_) * 100 };
}).slice(0, -1); // skip the last (100% boundary)
return (
{markers.map((m) => (
))}
);
}
/* ============================================================
Viewer — the hero canvas. Chooses layout by item type.
============================================================ */
function Viewer({ pair, completion, answers, setAnswer, pollLive, onReopenPoll, onPresentResults, sup }) {
if (!pair) return null;
const { item, chapter } = pair;
const complete = completion.has(item.id);
/* Each type gets its own outer layout. Title chrome (eyebrow + h1)
is shared but hidden for media-noTitle. */
const showTitleChrome = item.type !== "media" || item.showTitle;
return (
{sup && sup.sessionLive && (
)}
{sup && }
{sup && sup.sessionLive && }
{sup && sup.sessionLive && }
{sup && sup.sessionLive && }
{showTitleChrome && (
)}
{item.type === "content" && }
{item.type === "media" && }
{item.type === "evidence" && }
{item.type === "question" && (
setAnswer(item.id, a)}
pollLive={pollLive}
complete={complete}
onReopenPoll={onReopenPoll}
onPresentResults={onPresentResults}
/>
)}
{sup && }
{sup && sup.sessionLive && sup.openPanel === "comments" && (
sup.setOpenPanel(null)} />
)}
);
}
/* ============================================================
ActionBar — sticky bottom: prev / contextual / complete / next
============================================================ */
function ActionBar({ pair, prev, next, complete, onPrev, onNext, onComplete, onOpenPoll, onPresent, onReopenPoll, pollLive }) {
if (!pair) return null;
const { item } = pair;
const isPoll = item.type === "question" && item.mode === "poll";
const pollState = !isPoll ? null : pollLive ? "live" : complete ? "closed" : "never";
return (
);
}
/* ============================================================
ChapterOutline — slide-over from left, shows full chapter tree
============================================================ */
function ChapterOutline({ open, onClose, activeId, completion, onPick }) {
return (
);
}
/* ============================================================
CmdK — quick-jump command palette
============================================================ */
function CmdK({ open, onClose, onPick }) {
const [query, setQuery] = useState("");
const inputRef = useRef(null);
useEffect(() => {
if (open) {
setQuery("");
setTimeout(() => inputRef.current?.focus(), 30);
}
}, [open]);
if (!open) return null;
const items = allItems();
const q = query.toLowerCase();
const filtered = !q ? items : items.filter(p => {
const it = p.item;
return (it.title || "").toLowerCase().includes(q)
|| (it.num || "").toLowerCase().includes(q)
|| (p.chapter.title || "").toLowerCase().includes(q);
});
return (
e.stopPropagation()}>
{filtered.slice(0, 12).map((p) => (
))}
{filtered.length === 0 &&
No matches
}
);
}
/* ============================================================
ActionsDrawer — slide-over from right with action list
============================================================ */
function ActionsDrawer({ open, onClose }) {
const priorityLabel = { high: "High", med: "Medium", low: "Low" };
const priorityCls = { high: "is-high", med: "is-med", low: "is-low" };
const statusLabel = { "in-progress": "In progress", open: "Open", done: "Done" };
return (
);
}
/* ============================================================
App — root
============================================================ */
function App() {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
/* Supporter — co-pilot session state */
const sup = window.useSupporter(t.perspective);
useEffect(() => { if (sup.perspective !== t.perspective) sup.setPerspective(t.perspective); /* eslint-disable-next-line */ }, [t.perspective]);
useEffect(() => { sup.setSessionLive(t.sessionLive); /* eslint-disable-next-line */ }, [t.sessionLive]);
/* Transcribe — session recording + AI summary */
const tx = window.useTranscribe({ moduleName: "Asset Management" });
/* URL-param entry point: ?as=supporter | ?as=completer overrides initial perspective. */
useEffect(() => {
const as = new URLSearchParams(location.search).get("as");
if ((as === "supporter" || as === "completer") && t.perspective !== as) setTweak("perspective", as);
// eslint-disable-next-line
}, []);
const items = allItems();
const total = items.length;
/* Active item — start at the first not-yet-complete item */
const [activeId, setActiveId] = useState(() => items[0].item.id);
const pair = findById(activeId);
const idx = flatIndex(activeId);
const prev = idx > 0 ? items[idx - 1] : null;
const next = idx < total - 1 ? items[idx + 1] : null;
const [completion, setCompletion] = useState(() => presetCompletion(t.progressPreset));
useEffect(() => { setCompletion(presetCompletion(t.progressPreset)); }, [t.progressPreset]);
/* On mount, jump to the first incomplete item */
useEffect(() => {
const firstIncomplete = items.find(p => !completion.has(p.item.id));
if (firstIncomplete) setActiveId(firstIncomplete.item.id);
// eslint-disable-next-line
}, []);
/* When preset changes, reset to first incomplete */
useEffect(() => {
const firstIncomplete = items.find(p => !completion.has(p.item.id));
if (firstIncomplete) setActiveId(firstIncomplete.item.id);
// eslint-disable-next-line
}, [t.progressPreset]);
const [answers, setAnswers] = useState({});
const setAnswer = useCallback((id, a) => setAnswers(p => ({ ...p, [id]: a })), []);
const [pollsLive, setPollsLive] = useState({});
const isPollLive = (id) => !!pollsLive[id];
const openPoll = useCallback((id) => setPollsLive(p => ({ ...p, [id]: true })), []);
const closePoll = useCallback((id) => setPollsLive(p => ({ ...p, [id]: false })), []);
const [presenterFor, setPresenterFor] = useState(null);
const toggleComplete = useCallback((id) => {
setCompletion(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else {
next.add(id);
if (pollsLive[id]) {
setPollsLive(p => ({ ...p, [id]: false }));
if (presenterFor === id) setPresenterFor(null);
}
}
return next;
});
}, [pollsLive, presenterFor]);
const reopenPoll = useCallback((id) => {
setPollsLive(p => ({ ...p, [id]: true }));
setCompletion(prev => { const next = new Set(prev); next.delete(id); return next; });
}, []);
const enterPresenter = useCallback(() => {
if (!pair || pair.item.type !== "question" || pair.item.mode !== "poll") return;
if (!isPollLive(pair.item.id)) openPoll(pair.item.id);
setPresenterFor(pair.item.id);
}, [pair, pollsLive, openPoll]);
/* Overlays */
const [outlineOpen, setOutlineOpen] = useState(false);
const [cmdkOpen, setCmdkOpen] = useState(false);
const [actionsOpen, setActionsOpen] = useState(false);
const [aiOpen, setAiOpen] = useState(false);
/* Keyboard shortcuts */
useEffect(() => {
const onKey = (e) => {
const isModK = (e.key === "k" || e.key === "K") && (e.metaKey || e.ctrlKey);
if (isModK) { e.preventDefault(); setCmdkOpen(true); return; }
if (presenterFor) {
if (e.key === "Escape") setPresenterFor(null);
return;
}
if (cmdkOpen || outlineOpen || actionsOpen) {
if (e.key === "Escape") { setCmdkOpen(false); setOutlineOpen(false); setActionsOpen(false); }
return;
}
const tag = e.target?.tagName;
if (tag === "INPUT" || tag === "TEXTAREA") return;
if (e.key === "ArrowRight" && next) setActiveId(next.item.id);
if (e.key === "ArrowLeft" && prev) setActiveId(prev.item.id);
if (e.key === "c" || e.key === "C") toggleComplete(activeId);
if (e.key === "o" || e.key === "O") setOutlineOpen(true);
if (e.key === "a" || e.key === "A") setActionsOpen(true);
if (e.key === "p" || e.key === "P") {
if (pair?.item.type === "question" && pair.item.mode === "poll") {
if (isPollLive(pair.item.id)) enterPresenter();
else openPoll(pair.item.id);
}
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [next, prev, activeId, pair, cmdkOpen, outlineOpen, actionsOpen, presenterFor, toggleComplete, enterPresenter, openPoll, pollsLive]);
const done = completion.size;
const percent = Math.round((done / total) * 100);
const tweaks = (
setTweak("progressPreset", v)}
/>
setTweak("perspective", v)}
/>
setTweak("sessionLive", v)}
/>
);
return (
<>
setOutlineOpen(true)}
onCmdK={() => setCmdkOpen(true)}
onActions={() => setActionsOpen(true)}
onAi={() => setAiOpen(true)}
tx={tx}
/>
{sup.sessionLive && }
pair && reopenPoll(pair.item.id)}
onPresentResults={() => pair && setPresenterFor(pair.item.id)}
sup={sup}
/>
{sup.sessionLive && pair && (
)}
prev && setActiveId(prev.item.id)}
onNext={() => next && setActiveId(next.item.id)}
onComplete={() => pair && toggleComplete(pair.item.id)}
onOpenPoll={() => { if (pair) { openPoll(pair.item.id); setPresenterFor(pair.item.id); } }}
onPresent={() => enterPresenter()}
onReopenPoll={() => pair && reopenPoll(pair.item.id)}
/>
setOutlineOpen(false)}
activeId={activeId} completion={completion}
onPick={setActiveId}
/>
setCmdkOpen(false)} onPick={setActiveId} />
setActionsOpen(false)} />
{presenterFor && pair?.item.id === presenterFor && (
setPresenterFor(null)}
onMarkComplete={() => { toggleComplete(pair.item.id); setPresenterFor(null); }}
/>
)}
{aiOpen && (
setAiOpen(false)}>
e.stopPropagation()} role="dialog" aria-label="AI report">