cert-coach-web 0.1.1 → 0.1.2

package/web/public/app.js

@@ -1,430 +1,21 @@
-import { safeHttpUrl, imageSrc } from "./spa-logic.js";
-import { markdownFragment } from "./spa-render.js";
-
-const $ = (id) => document.getElementById(id);
-
-const el = {
-  app: $("app"),
-  certLine: $("cert-line"),
-  certSelect: $("cert-select"),
-  certNew: $("cert-new"),
-  phasePill: $("phase-pill"),
-  readiness: $("readiness"),
-  connection: $("connection"),
-  notice: $("notice"),
-  loading: $("loading"),
-  idle: $("idle-card"),
-  idleNote: $("idle-note"),
-  start: $("start"),
-  startMock: $("start-mock"),
-  startProbe: $("start-probe"),
-  mockSize: $("mock-size"),
-  mockMinutes: $("mock-minutes"),
-  question: $("question-card"),
-  qmeta: $("qmeta"),
-  timer: $("timer"),
-  stem: $("stem"),
-  questionNote: $("question-note"),
-  images: $("images"),
-  options: $("options"),
-  confidenceButtons: $("confidence-buttons"),
-  submit: $("submit"),
-  feedback: $("feedback-card"),
-  verdict: $("verdict"),
-  feedbackMeta: $("feedback-meta"),
-  feedbackTitle: $("feedback-title"),
-  answerLine: $("answer-line"),
-  explanation: $("explanation"),
-  source: $("source"),
-  next: $("next"),
-  teach: $("teach-card"),
-  teachMeta: $("teach-meta"),
-  teachTitle: $("teach-title"),
-  teachSummary: $("teach-summary"),
-  teachSection: $("teach-section"),
-  teachDoc: $("teach-doc"),
-  teachNext: $("teach-next"),
-  mock: $("mock-card"),
-  mockMeta: $("mock-meta"),
-  mockTitle: $("mock-title"),
-  mockNote: $("mock-note"),
-  mockResults: $("mock-results"),
-  mockNew: $("mock-new"),
-  mockPractice: $("mock-practice"),
-  statusLog: $("status-log"),
-  chatLog: $("chat-log"),
-  chatForm: $("chat-form"),
-  chatInput: $("chat-input"),
-  chatSend: $("chat-send"),
-  chatStop: $("chat-stop"),
-  chatStatus: $("chat-status"),
-  nav: document.querySelector(".nav"),
-  sideNav: document.querySelector(".side-nav"),
-  layoutButtons: [...document.querySelectorAll("[data-app-layout]")],
-  cmdReadiness: $("cmd-readiness"),
-  cmdCoverage: $("cmd-coverage"),
-  cmdDue: $("cmd-due"),
-  cmdWeak: $("cmd-weak"),
-  cmdWeakNote: $("cmd-weak-note"),
-  cmdReadinessBar: $("cmd-readiness-bar"),
-  cmdCoverageBar: $("cmd-coverage-bar"),
-  cmdDomains: $("cmd-domains"),
-  studyView: $("study-view"),
-  pathView: $("path-view"),
-  pathMeta: $("path-meta"),
-  pathRoute: $("path-route"),
-  pathDetail: $("path-detail"),
-  dashboardView: $("dashboard-view"),
-  theoryView: $("theory-view"),
-  logsView: $("logs-view"),
-  dashboardBody: $("dashboard-body"),
-  dashboardMeta: $("dashboard-meta"),
-  theoryNodes: $("theory-nodes"),
-  theoryBody: $("theory-body"),
-  logsBody: $("logs-body"),
-};
-
-let state = null;
-let selected = new Set();
-let confidence = 2;
-let startedAt = 0;
-let questionKey = "";
-let timerHandle = null;
-let eventSource = null;
-let chatEnabled = false;
-let chatReason = "";
-let chatBusy = false;
-let chatStream = null;
-let pendingUser = "";
-const toolCards = new Map();
-let mermaidSeq = 0;
-let mermaidLoading = null;
-
-function ensureMermaid() {
-  if (window.mermaid) return Promise.resolve(window.mermaid);
-  if (!mermaidLoading) {
-    mermaidLoading = new Promise((resolve, reject) => {
-      const script = document.createElement("script");
-      script.src = "/vendor/mermaid.min.js";
-      script.async = true;
-      script.onload = () => {
-        if (!window.mermaid) return reject(new Error("Mermaid failed to initialize"));
-        window.mermaid.initialize({ startOnLoad: false, securityLevel: "strict", theme: "dark" });
-        resolve(window.mermaid);
-      };
-      script.onerror = () => reject(new Error("Mermaid failed to load"));
-      document.head.append(script);
-    });
-  }
-  return mermaidLoading;
-}
-
-async function renderMermaidInto(container) {
-  if (!container || !container.querySelector("pre.diagram")) return;
-  try { await ensureMermaid(); } catch { return; }
-  for (const pre of container.querySelectorAll("pre.diagram")) {
-    if (pre.dataset.rendered === "1") continue;
-    const code = pre.textContent || "";
-    if (!code.trim()) continue;
-    try {
-      const { svg } = await window.mermaid.render("mmd" + (++mermaidSeq), code);
-      pre.innerHTML = svg;
-      pre.dataset.rendered = "1";
-      pre.classList.add("rendered");
-    } catch {
-      pre.classList.add("mermaid-error");
-    }
-  }
-}
-let theoryNodesCache = null;
-let activeTheoryNode = "";
-let activeView = "study";
-let activeLayout = "triptych";
-
-function setConnection(kind) {
-  el.connection.classList.remove("live", "down");
-  if (kind === "live") el.connection.classList.add("live");
-  if (kind === "down") el.connection.classList.add("down");
-  el.connection.title = kind === "live" ? "live" : kind === "down" ? "reconnecting" : "connecting";
-}
-
-function showNotice(text) {
-  if (!text) {
-    el.notice.hidden = true;
-    el.notice.textContent = "";
-    return;
-  }
-  el.notice.hidden = false;
-  el.notice.textContent = text;
-}
-
-function only(card) {
-  for (const c of [el.loading, el.idle, el.question, el.feedback, el.teach, el.mock]) {
-    if (c) c.hidden = c !== card;
-  }
-}
-
-function setPhase(phase) {
-  el.phasePill.textContent = phase || "idle";
-}
-
-function renderImages(images) {
-  el.images.replaceChildren();
-  for (const im of images || []) {
-    const src = imageSrc(im);
-    if (!src) continue;
-    const fig = document.createElement("figure");
-    fig.className = "exhibit";
-    const img = document.createElement("img");
-    img.src = src;
-    img.alt = im.label || "exhibit";
-    img.loading = "lazy";
-    img.addEventListener("click", () => window.open(img.src, "_blank", "noopener"));
-    const cap = document.createElement("figcaption");
-    cap.textContent = im.label || "exhibit";
-    fig.append(img, cap);
-    el.images.append(fig);
-  }
-  el.images.hidden = !el.images.children.length;
-}
-
-function renderOptions(q, readOnly) {
-  el.options.replaceChildren();
-  for (const opt of q.options || []) {
-    const b = document.createElement("button");
-    b.type = "button";
-    b.className = "option";
-    b.dataset.value = opt.value;
-    b.disabled = readOnly;
-    b.setAttribute("aria-pressed", selected.has(opt.value) ? "true" : "false");
-    if (selected.has(opt.value)) b.classList.add("selected");
-    const key = document.createElement("span");
-    key.className = "key";
-    key.textContent = opt.value;
-    const text = document.createElement("span");
-    text.textContent = opt.text || "(image option)";
-    b.append(key, text);
-    b.addEventListener("click", () => toggleOption(opt.value));
-    el.options.append(b);
-  }
-}
-
-function toggleOption(value) {
-  if (!state || state.phase !== "question" || !state.q) return;
-  if (state.q.multi) {
-    if (selected.has(value)) selected.delete(value);
-    else selected.add(value);
-  } else {
-    selected = new Set([value]);
-  }
-  updateSelectionUI();
-}
-
-function updateSelectionUI() {
-  const multi = state?.q?.multi === true;
-  for (const b of el.options.querySelectorAll(".option")) {
-    const on = selected.has(b.dataset.value);
-    b.classList.toggle("selected", on);
-    b.setAttribute("aria-pressed", on ? "true" : "false");
-  }
-  for (const b of el.confidenceButtons.querySelectorAll("button")) {
-    b.classList.toggle("active", Number(b.dataset.confidence) === confidence);
-  }
-  el.submit.disabled = !(state?.phase === "question" && selected.size > 0);
-  el.submit.textContent = multi ? "Submit selection" : "Submit answer";
-}
-
-function startTimer(key) {
-  if (timerHandle) clearInterval(timerHandle);
-  timerHandle = null;
-  if (key !== questionKey) {
-    questionKey = key;
-    startedAt = Date.now();
-    confidence = 2;
-    selected = new Set();
-  }
-  const tick = () => {
-    if (!state || state.phase !== "question") return;
-    const deadline = Number(state.meta?.mock?.deadline) || 0;
-    if (deadline) {
-      const left = Math.max(0, Math.floor((deadline - Date.now()) / 1000));
-      el.timer.textContent = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, "0")} left`;
-      return;
-    }
-    const s = Math.max(0, Math.floor((Date.now() - startedAt) / 1000));
-    el.timer.textContent = `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
-  };
-  tick();
-  timerHandle = setInterval(tick, 1000);
-}
-
-function stopTimer() {
-  if (timerHandle) clearInterval(timerHandle);
-  timerHandle = null;
-  if (state) el.timer.textContent = "";
-}
-
-function setStemSize(node, text) {
-  const len = String(text || "").length;
-  node.classList.remove("stem-long", "stem-xlong");
-  if (len > 420) node.classList.add("stem-xlong");
-  else if (len > 220) node.classList.add("stem-long");
-}
-
-function renderQuestion(s, readOnly) {
-  only(el.question);
-  const q = s.q || {};
-  setPhase(s.phase);
-  const mockMeta = s.meta?.mock ? `mock ${(s.meta.mock.answered || 0) + 1}/${s.meta.mock.total || "?"}` : "";
-  const probeMeta = s.meta?.probe ? `probe ${s.meta.probe.answered || 1}/${s.meta.probe.total || 20}` : "";
-  el.qmeta.textContent = [q.domain, q.node, q.index ? `#${q.index}` : "", mockMeta || probeMeta].filter(Boolean).join(" · ");
-  el.stem.textContent = q.stem || "";
-  setStemSize(el.stem, q.stem || "");
-  el.questionNote.hidden = !readOnly;
-  el.questionNote.textContent = readOnly ? "Submitted; grading..." : "";
-  renderImages(q.images);
-  renderOptions(q, readOnly);
-  updateSelectionUI();
-  if (!readOnly) startTimer(`${q.id}:${s.rev}`);
-  else stopTimer();
-}
-
-function renderFeedback(s) {
-  only(el.feedback);
-  setPhase(s.phase);
-  stopTimer();
-  const f = s.feedback || {};
-  el.verdict.textContent = f.correct ? "Correct" : "Incorrect";
-  el.verdict.className = "verdict " + (f.correct ? "good" : "bad");
-  el.feedbackMeta.textContent = [f.box != null ? `box ${f.box}` : "", f.due ? `due ${String(f.due).slice(0, 10)}` : "", s.meta?.readiness || ""].filter(Boolean).join(" · ");
-  el.feedbackTitle.textContent = s.q?.stem || "Feedback";
-  setStemSize(el.feedbackTitle, s.q?.stem || "Feedback");
-  el.answerLine.textContent = `Answer: ${(f.answer || []).join(", ") || "?"} · you: ${(f.selected || []).join(", ") || "?"}`;
-  el.explanation.textContent = f.explanation || "";
-  const src = safeHttpUrl(f.source || "");
-  el.source.hidden = !src;
-  el.source.href = src || "#";
-  el.source.textContent = src || "";
-}
-
-function renderTeach(s) {
-  only(el.teach);
-  setPhase(s.phase);
-  stopTimer();
-  const t = s.teach || {};
-  el.teachMeta.textContent = [t.domain, t.reason].filter(Boolean).join(" · ");
-  el.teachTitle.textContent = t.title || t.node || "Teach";
-  el.teachSummary.textContent = t.summary || "";
-  el.teachTitle.classList.remove("stem-long", "stem-xlong");
-  el.teachSection.replaceChildren();
-  renderMarkdownInto(el.teachSection, t.section || "");
-  const doc = safeHttpUrl(t.docUrl || "");
-  el.teachDoc.hidden = !doc;
-  el.teachDoc.href = doc || "#";
-  el.teachDoc.textContent = doc || "";
-}
-
-function renderMock(s) {
-  only(el.mock);
-  setPhase("mock_summary");
-  stopTimer();
-  const m = s.mock || {};
-  el.mockMeta.textContent = `${m.correct || 0}/${m.completed ?? m.total ?? 0} correct · ${m.completed ?? m.total ?? 0}/${m.requested ?? m.total ?? 0} completed`;
-  el.mockTitle.textContent = m.score != null ? `Mock score: ${Math.round(m.score * 100)}%` : "Mock complete";
-  el.mockNote.textContent = `${m.timedOut ? "Time expired. " : ""}Requested ${m.requested ?? "?"} questions; completed ${m.completed ?? m.total ?? 0}. Feedback is shown now that the run is over. progress.json was not modified.`;
-  el.mockResults.replaceChildren();
-  for (const a of m.answers || []) {
-    const row = document.createElement("div");
-    row.className = "mock-row";
-    const mark = document.createElement("span");
-    mark.className = a.correct ? "ok" : "bad";
-    mark.textContent = a.correct ? "OK" : "MISS";
-    const q = document.createElement("span");
-    q.className = "q";
-    q.textContent = `${a.qid} · ${a.domain || ""}/${a.node || ""} · you ${(a.selected || []).join(",")} · answer ${(a.answer || []).join(",")}`;
-    const secs = document.createElement("span");
-    secs.className = "muted";
-    secs.textContent = a.seconds != null ? `${a.seconds}s` : "";
-    row.append(mark, q, secs);
-    el.mockResults.append(row);
-  }
-}
-
-function renderIdle(s) {
-  only(el.idle);
-  setPhase("idle");
-  stopTimer();
-  el.idleNote.textContent = s.meta?.note || "Start a practice run when you are ready.";
-}
-
-function render(s) {
-  state = s;
-  showNotice("");
-  el.certLine.textContent = `${s.cert || "cert"} · ${s.mode || "practice"}`;
-  el.readiness.textContent = s.meta?.readiness ? `readiness ${s.meta.readiness}` : "";
-  const phase = s.phase || "idle";
-  if (phase === "question") renderQuestion(s, false);
-  else if (phase === "submitted") renderQuestion(s, true);
-  else if (phase === "feedback") renderFeedback(s);
-  else if (phase === "teach") renderTeach(s);
-  else if (phase === "mock_summary") renderMock(s);
-  else renderIdle(s);
-  if (activeLayout === "command") void updateCommandStrip();
-}
-
-async function api(path, body) {
-  const res = await fetch(path, {
-    method: body === undefined ? "GET" : "POST",
-    credentials: "same-origin",
-    headers: body === undefined ? {} : { "content-type": "application/json" },
-    body: body === undefined ? undefined : JSON.stringify(body),
-  });
-  let data = {};
-  try { data = await res.json(); } catch { /* non-json */ }
-  if (!res.ok) {
-    if (res.status === 401) showNotice("Session expired. Reopen the token URL printed by the server.");
-    if (res.status === 409) await refresh();
-    throw new Error(data.error || `HTTP ${res.status}`);
-  }
-  return data;
-}
+/**
+ * Study console wiring: boot, fetch, submit/next, event stream, and input
+ * binding. Presentation lives in the sibling spa-*.js modules; this file is the
+ * only place that talks to the server and the only place that wires listeners.
+ */
+import { el } from "./spa-dom.js";
+import { store } from "./spa-store.js";
+import { api } from "./spa-api.js";
+import { only, setConnection, showNotice, setLayout, appendStatus } from "./spa-ui.js";
+import { renderState, toggleOption, updateSelectionUI } from "./spa-question.js";
+import { setView, updateCommandStrip } from "./spa-views.js";
+import { handleChatEvent, renderChatHistory, sendChat, abortChat, syncChatControls } from "./spa-chat.js";
 
 async function refresh() {
-  const s = await api("/api/state");
-  render(s);
-}
-
-async function submitAnswer() {
-  if (!state || state.phase !== "question" || !state.q || !selected.size) return;
-  el.submit.disabled = true;
-  try {
-    const seconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
-    const data = await api("/api/answer", {
-      runId: state.runId,
-      rev: state.rev,
-      qid: state.q.id,
-      selected: [...selected],
-      confidence,
-      seconds,
-    });
-    render(data.state || await api("/api/state"));
-  } catch (e) {
-    showNotice(e.message);
-    try { await refresh(); } catch { /* keep notice */ }
-  }
-}
-
-async function nextQuestion() {
-  if (!state || !["feedback", "teach"].includes(state.phase)) return;
-  try {
-    const data = await api("/api/next", { runId: state.runId, rev: state.rev });
-    render(data.state || await api("/api/state"));
-  } catch (e) {
-    showNotice(e.message);
-    try { await refresh(); } catch { /* keep notice */ }
-  }
+  renderState(await api("/api/state"));
 }
 
+/** Enter a study mode: practice, probe, or timed mock. */
 async function startPractice(mode = "practice") {
   el.start.disabled = true;
   try {
@@ -434,7 +25,7 @@ async function startPractice(mode = "practice") {
         ? { mode: "probe", probe_size: 20 }
         : { mode: "practice" };
     const data = await api("/api/start", body);
-    render(data.state || await api("/api/state"));
+    renderState(data.state || await api("/api/state"));
   } catch (e) {
     showNotice(e.message);
     try { await refresh(); } catch { /* keep notice */ }
@@ -443,509 +34,74 @@ async function startPractice(mode = "practice") {
   }
 }
 
-function renderMarkdownInto(node, text) {
-  node.replaceChildren(markdownFragment(document, text));
-  void renderMermaidInto(node);
-}
-
-function chatScroll(force = false) {
-  if (!el.chatLog) return;
-  const near = el.chatLog.scrollHeight - el.chatLog.scrollTop - el.chatLog.clientHeight < 80;
-  if (force || near) el.chatLog.scrollTop = el.chatLog.scrollHeight;
-}
-
-function appendChatMessage(role, text) {
-  const div = document.createElement("div");
-  div.className = "chat-msg " + (role === "user" ? "user" : role === "system" ? "system" : "assistant");
-  if (role === "assistant") renderMarkdownInto(div, text);
-  else div.textContent = text;
-  el.chatLog.append(div);
-  chatScroll();
-  return div;
-}
-
-function setChatStatus(kind, text) {
-  el.chatStatus.className = "chat-status" + (kind === "live" ? " live" : kind === "busy" ? " busy" : "");
-  el.chatStatus.textContent = text;
-}
-
-function renderChatHistory(messages) {
-  el.chatLog.replaceChildren();
-  for (const m of messages || []) {
-    if (m.role === "user" || m.role === "assistant") appendChatMessage(m.role, m.text);
-  }
-  if (!el.chatLog.children.length) {
-    const empty = document.createElement("div");
-    empty.className = "chat-empty";
-    empty.textContent = chatEnabled
-      ? "Ask about the current question, a concept, or why an answer is right. The coach teaches; the quiz card grades."
-      : (chatReason || "Teaching chat is disabled. Start the server with --pi <pi|path> or set PI_BIN.");
-    el.chatLog.append(empty);
-  }
-}
-
-function renderTool(event) {
-  let card = toolCards.get(event.id);
-  if (event.status === "start" || !card) {
-    card = document.createElement("div");
-    card.className = "chat-tool";
-    const head = document.createElement("div");
-    head.className = "tool-head";
-    const name = document.createElement("span");
-    name.textContent = event.name || "tool";
-    const state = document.createElement("span");
-    state.className = "muted";
-    head.append(name, state);
-    const body = document.createElement("pre");
-    body.className = "tool-body";
-    card.append(head, body);
-    el.chatLog.append(card);
-    toolCards.set(event.id, card);
-  }
-  const state = card.querySelector(".tool-head .muted");
-  const body = card.querySelector(".tool-body");
-  if (event.status === "end") {
-    state.textContent = event.isError ? "error" : "done";
-    if (event.isError) card.classList.add("error");
-    body.textContent = (event.text || "").slice(0, 3000);
-  } else {
-    state.textContent = event.status === "start" ? "running" : "…";
-    if (event.partial) body.textContent = JSON.stringify(event.partial).slice(0, 1000);
-    else if (event.args) body.textContent = JSON.stringify(event.args).slice(0, 1000);
-  }
-  chatScroll();
-}
-
-function handleChatEvent(event) {
-  switch (event.type) {
-    case "chat.user": {
-      if (pendingUser && pendingUser === event.text) pendingUser = "";
-      else appendChatMessage("user", event.text);
-      break;
-    }
-    case "chat.start": {
-      chatBusy = true;
-      el.chatStop.hidden = false;
-      el.chatSend.disabled = true;
-      setChatStatus("busy", "thinking");
-      chatStream = { div: appendChatMessage("assistant", ""), text: "" };
-      break;
-    }
-    case "chat.delta": {
-      if (!chatStream) chatStream = { div: appendChatMessage("assistant", ""), text: "" };
-      chatStream.text += event.text || "";
-      chatStream.div.textContent = chatStream.text;
-      chatScroll();
-      break;
-    }
-    case "chat.message": {
-      if (!chatStream) chatStream = { div: appendChatMessage("assistant", ""), text: "" };
-      renderMarkdownInto(chatStream.div, event.text || "");
-      chatStream = null;
-      chatScroll();
-      break;
-    }
-    case "chat.tool": {
-      renderTool(event);
-      break;
-    }
-    case "chat.done": {
-      chatBusy = false;
-      el.chatStop.hidden = true;
-      el.chatSend.disabled = !chatEnabled;
-      setChatStatus(chatEnabled ? "live" : "off", chatEnabled ? "ready" : "offline");
-    el.chatStatus.title = chatEnabled ? "Teaching chat ready" : (chatReason || "Teaching chat disabled");
-      if (!chatStream) break;
-      chatStream = null;
-      break;
-    }
-    case "chat.error": {
-      chatBusy = false;
-      el.chatStop.hidden = true;
-      el.chatSend.disabled = !chatEnabled;
-      setChatStatus("off", "error");
-      showNotice(event.error || "Chat failed.");
-      break;
-    }
-    case "chat.rotated": {
-      // The server compacted the session before it ran out of context.
-      appendChatMessage(
-        "system",
-        event.reason === "context-overflow"
-          ? "Context limit reached - earlier turns were summarised. Keep going."
-          : "Long session - starting a fresh context with a recap of earlier turns."
-      );
-      break;
-    }
-    default:
-      break;
-  }
-}
-
-async function sendChat() {
-  const text = el.chatInput.value.trim();
-  if (!text || !chatEnabled || chatBusy) return;
-  el.chatInput.value = "";
-  pendingUser = text;
-  appendChatMessage("user", text);
-  chatBusy = true;
-  el.chatSend.disabled = true;
-  el.chatStop.hidden = false;
-  setChatStatus("busy", "thinking");
+async function submitAnswer() {
+  if (!store.state || store.state.phase !== "question" || !store.state.q || !store.selected.size) return;
+  el.submit.disabled = true;
   try {
-    const res = await api("/api/prompt", { text });
-    if (res.disposition === "handled") {
-      chatBusy = false;
-      el.chatStop.hidden = true;
-      el.chatSend.disabled = false;
-      setChatStatus("live", "ready");
-    }
+    const seconds = Math.max(1, Math.round((Date.now() - store.startedAt) / 1000));
+    const data = await api("/api/answer", {
+      runId: store.state.runId,
+      rev: store.state.rev,
+      qid: store.state.q.id,
+      selected: [...store.selected],
+      confidence: store.confidence,
+      seconds,
+    });
+    renderState(data.state || await api("/api/state"));
   } catch (e) {
-    chatBusy = false;
-    pendingUser = "";
-    el.chatStop.hidden = true;
-    el.chatSend.disabled = !chatEnabled;
-    setChatStatus("off", "error");
     showNotice(e.message);
+    try { await refresh(); } catch { /* keep notice */ }
   }
 }
 
-async function abortChat() {
+async function nextQuestion() {
+  if (!store.state || !["feedback", "teach"].includes(store.state.phase)) return;
   try {
-    await api("/api/abort", {});
+    const data = await api("/api/next", { runId: store.state.runId, rev: store.state.rev });
+    renderState(data.state || await api("/api/state"));
   } catch (e) {
     showNotice(e.message);
+    try { await refresh(); } catch { /* keep notice */ }
   }
 }
 
-function setLayout(name) {
-  activeLayout = ["triptych", "command"].includes(name) ? name : "triptych";
-  el.app.dataset.layout = activeLayout;
-  for (const b of el.layoutButtons) b.classList.toggle("active", b.dataset.appLayout === activeLayout);
-  localStorage.setItem("certCoachLayout", activeLayout);
-  if (activeLayout === "command") void updateCommandStrip();
-}
-
-async function updateCommandStrip() {
+async function loadCertPicker(current) {
   try {
-    const data = await api("/api/status");
-    const d = data.dashboard || {};
-    const p = data.plan || {};
-    const r = d.readiness || {};
-    const readiness = Math.round((r.value || 0) * 100);
-    const coverage = Math.round((r.coverage || 0) * 100);
-    el.cmdReadiness.textContent = `${readiness}%`;
-    el.cmdCoverage.textContent = `${coverage}%`;
-    el.cmdDue.textContent = String(d.due || 0);
-    const weak = (p.weakNodes || [])[0];
-    el.cmdWeak.textContent = weak?.domain || "—";
-    el.cmdWeakNote.textContent = weak ? `${weak.title} · ${Math.round((weak.accuracy || 0) * 100)}%` : "No attempts yet";
-    el.cmdReadinessBar.style.setProperty("--value", `${readiness}%`);
-    el.cmdCoverageBar.style.setProperty("--value", `${coverage}%`);
-    el.cmdDomains.replaceChildren();
-    for (const dom of p.domains || []) {
-      const row = document.createElement("div");
-      row.className = "domain-row";
-      const name = document.createElement("span");
-      name.textContent = dom.name;
-      const meter = document.createElement("div");
-      meter.className = "domain-meter";
-      const fill = document.createElement("i");
-      fill.style.setProperty("--value", `${Math.round((dom.accuracy || 0) * 100)}%`);
-      meter.append(fill);
-      const val = document.createElement("b");
-      val.textContent = `${Math.round((dom.accuracy || 0) * 100)}%`;
-      row.append(name, meter, val);
-      el.cmdDomains.append(row);
+    const data = await api("/api/certs");
+    el.certSelect.replaceChildren();
+    for (const c of data.certs || []) {
+      const opt = document.createElement("option");
+      opt.value = c.code;
+      opt.textContent = c.title ? `${c.code} — ${c.title}` : c.code;
+      if (c.code === current) opt.selected = true;
+      el.certSelect.append(opt);
     }
+    el.certSelect.disabled = (data.certs || []).length < 2;
   } catch {
-    /* command strip is optional */
-  }
-}
-
-function setView(name) {
-  activeView = name;
-  for (const b of document.querySelectorAll(".nav button, .side-nav button")) b.classList.toggle("active", b.dataset.tab === name);
-  el.studyView.hidden = name !== "study";
-  el.pathView.hidden = name !== "path";
-  el.dashboardView.hidden = name !== "dashboard";
-  el.theoryView.hidden = name !== "theory";
-  el.logsView.hidden = name !== "logs";
-  if (name === "path") loadPath();
-  if (name === "dashboard") loadDashboard();
-  if (name === "theory") loadTheory();
-  if (name === "logs") loadLogs();
-}
-
-function stat(k, v) {
-  const d = document.createElement("div");
-  d.className = "stat";
-  const kk = document.createElement("div");
-  kk.className = "k";
-  kk.textContent = k;
-  const vv = document.createElement("div");
-  vv.className = "v";
-  vv.textContent = String(v);
-  d.append(kk, vv);
-  return d;
-}
-
-async function loadPath() {
-  el.pathRoute.textContent = "Loading...";
-  el.pathDetail.textContent = "";
-  try {
-    const data = await api("/api/status");
-    const p = data.plan || {};
-    el.pathMeta.textContent = p.ready
-      ? "target met"
-      : `probe ${Math.min(p.seenQuestions || 0, p.probeSize || 20)}/${p.probeSize || 20} · target ${Math.round((p.target?.readiness || 0.85) * 100)}% readiness / ${Math.round((p.target?.coverage || 0.8) * 100)}% coverage`;
-    el.pathRoute.replaceChildren();
-    const steps = document.createElement("div");
-    steps.className = "route-steps";
-    for (const step of p.steps || []) {
-      const d = document.createElement("div");
-      d.className = "route-step " + (step.state || "");
-      d.textContent = `${step.name} · ${step.state || ""}`;
-      steps.append(d);
-    }
-    el.pathRoute.append(steps);
-    const callout = document.createElement("div");
-    callout.className = "route-callout";
-    const phase = document.createElement("h3");
-    phase.textContent = p.ready ? "READY" : String(p.phase || "progress").toUpperCase();
-    const why = document.createElement("p");
-    why.textContent = p.why || "";
-    const next = document.createElement("p");
-    next.textContent = "Next: " + (p.next || "");
-    const criteria = document.createElement("p");
-    criteria.className = "muted";
-    criteria.textContent = p.criteria || "";
-    callout.append(phase, why, next, criteria);
-    el.pathRoute.append(callout);
-
-    el.pathDetail.replaceChildren();
-    for (const d of p.domains || []) {
-      const section = document.createElement("section");
-      section.className = "path-domain";
-      const h = document.createElement("h3");
-      h.textContent = `${d.name} · ${Math.round((d.weight_min || 0) * 100)}–${Math.round((d.weight_max || 0) * 100)}% of exam`;
-      const summary = document.createElement("p");
-      summary.className = "muted";
-      summary.textContent = `${d.seen}/${d.total} questions seen · ${d.accuracy == null ? "no accuracy yet" : `${Math.round(d.accuracy * 100)}% accuracy`} · coverage ${Math.round((d.coverage || 0) * 100)}%`;
-      section.append(h, summary);
-      if (d.skills?.length) {
-        const skills = document.createElement("ul");
-        skills.className = "path-skills";
-        for (const s of d.skills) { const li = document.createElement("li"); li.textContent = s; skills.append(li); }
-        section.append(skills);
-      }
-      const table = document.createElement("table");
-      table.className = "node-table";
-      const head = document.createElement("tr");
-      for (const label of ["Node / subdomain", "Status", "Questions", "Accuracy", "Box"]) {
-        const th = document.createElement("th"); th.textContent = label; head.append(th);
-      }
-      table.append(head);
-      for (const n of d.nodes || []) {
-        const tr = document.createElement("tr");
-        const title = document.createElement("td");
-        title.className = "path-node-title";
-        title.textContent = n.title;
-        const small = document.createElement("small");
-        small.textContent = n.summary || n.id;
-        title.append(small);
-        const status = document.createElement("td");
-        const tag = document.createElement("span");
-        tag.className = "status-tag " + (n.status || "unseen");
-        tag.textContent = n.status || "unseen";
-        status.append(tag);
-        const qs = document.createElement("td");
-        qs.className = "num";
-        qs.textContent = `${n.seen}/${n.total}`;
-        const acc = document.createElement("td");
-        acc.className = "num";
-        acc.textContent = n.accuracy == null ? "—" : `${Math.round(n.accuracy * 100)}%`;
-        const box = document.createElement("td");
-        box.className = "num";
-        box.textContent = String(n.box ?? 0);
-        tr.append(title, status, qs, acc, box);
-        table.append(tr);
-      }
-      section.append(table);
-      el.pathDetail.append(section);
-    }
-  } catch (e) {
-    el.pathRoute.textContent = e.message;
-  }
-}
-
-async function loadDashboard() {
-  el.dashboardBody.textContent = "Loading...";
-  try {
-    const data = await api("/api/status");
-    const d = data.dashboard || {};
-    const r = d.readiness || {};
-    el.dashboardMeta.textContent = `${d.title || ""} · ${d.verified || 0}/${d.total || 0} verified`;
-    el.dashboardBody.replaceChildren();
-    const grid = document.createElement("div");
-    grid.className = "dash-grid";
-    grid.append(
-      stat("Readiness", `${((r.value || 0) * 100).toFixed(1)}%`),
-      stat("Coverage", `${((r.coverage || 0) * 100).toFixed(0)}%`),
-      stat("Due now", d.due || 0),
-      stat("Gaps / review", `${d.boxes?.[1] || 0} / ${d.boxes?.[2] || 0}`),
-      stat("Mastered", d.boxes?.[3] || 0),
-      stat("Sessions", d.sessions || 0)
-    );
-    el.dashboardBody.append(grid);
-
-    const domains = document.createElement("div");
-    for (const [id, v] of Object.entries(r.by_domain || {})) {
-      const row = document.createElement("div");
-      row.className = "domain-row";
-      const name = document.createElement("span");
-      name.textContent = id;
-      const bar = document.createElement("div");
-      bar.className = "bar";
-      const fill = document.createElement("span");
-      fill.style.width = `${Math.round((v.accuracy || 0) * 100)}%`;
-      bar.append(fill);
-      const num = document.createElement("span");
-      num.className = "muted";
-      num.textContent = `${v.seen}/${v.total}${v.accuracy == null ? "" : ` · ${Math.round(v.accuracy * 100)}%`}`;
-      row.append(name, bar, num);
-      domains.append(row);
-    }
-    el.dashboardBody.append(domains);
-    if (d.weak?.length) {
-      const weak = document.createElement("div");
-      weak.className = "weak-list";
-      weak.textContent = "Weakest domains: " + d.weak.map((x) => `${x.domain} ${Math.round((x.accuracy || 0) * 100)}%`).join(" · ");
-      el.dashboardBody.append(weak);
-    }
-  } catch (e) {
-    el.dashboardBody.textContent = e.message;
-  }
-}
-
-async function loadTheory() {
-  try {
-    if (!theoryNodesCache) {
-      const data = await api("/api/theory");
-      theoryNodesCache = data.nodes || [];
-      el.theoryNodes.replaceChildren();
-      for (const n of theoryNodesCache) {
-        const b = document.createElement("button");
-        b.type = "button";
-        b.textContent = n.title || n.id;
-        b.dataset.node = n.id;
-        b.addEventListener("click", () => selectTheory(n.id));
-        el.theoryNodes.append(b);
-      }
-    }
-    const preferred = state?.q?.node || state?.teach?.node || theoryNodesCache[0]?.id;
-    if (preferred) await selectTheory(preferred);
-  } catch (e) {
-    el.theoryBody.textContent = e.message;
-  }
-}
-
-async function selectTheory(node) {
-  activeTheoryNode = node;
-  for (const b of el.theoryNodes.querySelectorAll("button")) b.classList.toggle("active", b.dataset.node === node);
-  el.theoryBody.textContent = "Loading...";
-  try {
-    const t = await api("/api/theory?node=" + encodeURIComponent(node));
-    el.theoryBody.replaceChildren();
-    const h = document.createElement("h2");
-    h.textContent = t.title || node;
-    const meta = document.createElement("p");
-    meta.className = "muted";
-    meta.textContent = [t.domain, t.summary].filter(Boolean).join(" · ");
-    el.theoryBody.append(h, meta);
-    const body = document.createElement("div");
-    renderMarkdownInto(body, t.section || "No theory section yet.");
-    el.theoryBody.append(body);
-    const doc = safeHttpUrl(t.docUrl || "");
-    if (doc) {
-      const p = document.createElement("p");
-      const a = document.createElement("a");
-      a.href = doc;
-      a.target = "_blank";
-      a.rel = "noreferrer";
-      a.textContent = doc;
-      p.append(a);
-      el.theoryBody.append(p);
-    }
-  } catch (e) {
-    el.theoryBody.textContent = e.message;
-  }
-}
-
-async function loadLogs() {
-  el.logsBody.textContent = "Loading...";
-  try {
-    const data = await api("/api/log");
-    el.logsBody.textContent = data.text || "No study log yet.";
-  } catch (e) {
-    el.logsBody.textContent = e.message;
-  }
-}
-
-function appendStatus(lines) {
-  for (const item of lines || []) {
-    const div = document.createElement("div");
-    div.className = "status-line";
-    const t = item?.at ? new Date(item.at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "";
-    const strong = document.createElement("strong");
-    strong.textContent = t ? `${t} ` : "";
-    const span = document.createElement("span");
-    span.textContent = item?.line || "";
-    div.append(strong, span);
-    el.statusLog.prepend(div);
+    el.certSelect.hidden = true;
   }
-  while (el.statusLog.children.length > 80) el.statusLog.lastChild.remove();
-  // Newest just under the "Coach log" title; older entries stay below.
-  el.statusLog.parentElement.scrollTop = 0;
 }
 
 function connectEvents() {
-  if (eventSource) eventSource.close();
-  eventSource = new EventSource("/api/events");
-  eventSource.onopen = () => setConnection("live");
-  eventSource.onerror = () => setConnection("down");
-  eventSource.addEventListener("state", (event) => {
+  if (store.eventSource) store.eventSource.close();
+  store.eventSource = new EventSource("/api/events");
+  store.eventSource.onopen = () => setConnection("live");
+  store.eventSource.onerror = () => setConnection("down");
+  store.eventSource.addEventListener("state", (event) => {
     try {
       const data = JSON.parse(event.data);
-      if (data.state) render(data.state);
+      if (data.state) renderState(data.state);
       if (data.status?.length) appendStatus(data.status);
       setConnection("live");
     } catch {
       /* ignore malformed event */
     }
   });
-  eventSource.addEventListener("chat", (event) => {
+  store.eventSource.addEventListener("chat", (event) => {
     try { handleChatEvent(JSON.parse(event.data)); } catch { /* ignore malformed event */ }
   });
 }
 
-async function loadCertPicker(current) {
-  try {
-    const data = await api("/api/certs");
-    el.certSelect.replaceChildren();
-    for (const c of data.certs || []) {
-      const opt = document.createElement("option");
-      opt.value = c.code;
-      opt.textContent = c.title ? `${c.code} — ${c.title}` : c.code;
-      if (c.code === current) opt.selected = true;
-      el.certSelect.append(opt);
-    }
-    el.certSelect.disabled = (data.certs || []).length < 2;
-  } catch {
-    el.certSelect.hidden = true;
-  }
-}
-
 async function bootstrap() {
   try {
     // Strip the token from the address bar; the server exchanged it for a cookie.
@@ -957,15 +113,12 @@ async function bootstrap() {
     const data = await api("/api/bootstrap");
     el.certLine.textContent = `${data.cert || "cert"} · ${data.title || ""}`;
     setLayout(localStorage.getItem("certCoachLayout") || "triptych");
-    chatEnabled = Boolean(data.chat?.enabled);
-    chatReason = data.chat?.status?.error || "";
-    el.chatInput.disabled = !chatEnabled;
-    el.chatSend.disabled = !chatEnabled;
-    el.chatSend.textContent = chatEnabled ? "Send" : "Chat off";
-    setChatStatus(chatEnabled ? "live" : "off", chatEnabled ? "ready" : "offline");
+    store.chat.enabled = Boolean(data.chat?.enabled);
+    store.chat.reason = data.chat?.status?.error || "";
+    syncChatControls();
     renderChatHistory(data.chat?.messages || []);
     await loadCertPicker(data.cert);
-    render(data.state);
+    renderState(data.state);
     setView("study");
     connectEvents();
   } catch (e) {
@@ -975,9 +128,11 @@ async function bootstrap() {
   }
 }
 
+// ── listeners ────────────────────────────────────────────────────────────────
 el.submit.addEventListener("click", submitAnswer);
 el.next.addEventListener("click", nextQuestion);
 el.teachNext.addEventListener("click", nextQuestion);
+
 el.certSelect.addEventListener("change", async () => {
   const code = el.certSelect.value;
   try {
@@ -989,6 +144,7 @@ el.certSelect.addEventListener("change", async () => {
     el.certSelect.disabled = false;
   }
 });
+
 el.certNew.addEventListener("click", async () => {
   const raw = window.prompt("New certification code (e.g. AZ-104, DP-600, AWS-SAA):");
   if (!raw) return;
@@ -999,18 +155,27 @@ el.certNew.addEventListener("click", async () => {
     showNotice(e.message);
   }
 });
+
 el.start.addEventListener("click", () => startPractice("practice"));
 el.startProbe.addEventListener("click", () => startPractice("probe"));
 el.startMock.addEventListener("click", () => startPractice("mock"));
 el.mockNew.addEventListener("click", () => startPractice("mock"));
 el.mockPractice.addEventListener("click", () => startPractice("practice"));
+
 for (const nav of [el.nav, el.sideNav]) {
   nav?.addEventListener("click", (e) => {
     const b = e.target.closest("button[data-tab]");
     if (b) setView(b.dataset.tab);
   });
 }
-for (const b of el.layoutButtons) b.addEventListener("click", () => setLayout(b.dataset.appLayout));
+
+for (const b of el.layoutButtons) {
+  b.addEventListener("click", () => {
+    setLayout(b.dataset.appLayout);
+    if (store.activeLayout === "command") void updateCommandStrip();
+  });
+}
+
 el.chatForm.addEventListener("submit", (e) => { e.preventDefault(); sendChat(); });
 el.chatStop.addEventListener("click", abortChat);
 el.chatInput.addEventListener("keydown", (e) => {
@@ -1019,31 +184,33 @@ el.chatInput.addEventListener("keydown", (e) => {
     sendChat();
   }
 });
+
 for (const b of el.confidenceButtons.querySelectorAll("button")) {
   b.addEventListener("click", () => {
-    confidence = Number(b.dataset.confidence);
+    store.confidence = Number(b.dataset.confidence);
     updateSelectionUI();
   });
 }
 
+// Keyboard: letter/number picks an option, Enter submits or advances.
 document.addEventListener("keydown", (e) => {
-  if (!state) return;
+  if (!store.state) return;
   const tag = (e.target?.tagName || "").toLowerCase();
   if (["input", "textarea", "select"].includes(tag)) return;
-  if (state.phase === "question" && state.q) {
+  if (store.state.phase === "question" && store.state.q) {
     const key = e.key.toUpperCase();
     if (/^[A-H]$/.test(key) || /^[1-8]$/.test(key)) {
       const idx = /^[1-8]$/.test(key) ? Number(key) - 1 : key.charCodeAt(0) - 65;
-      const opt = state.q.options?.[idx];
+      const opt = store.state.q.options?.[idx];
       if (opt) {
         e.preventDefault();
         toggleOption(opt.value);
       }
-    } else if (e.key === "Enter" && selected.size) {
+    } else if (e.key === "Enter" && store.selected.size) {
       e.preventDefault();
       submitAnswer();
     }
-  } else if (["feedback", "teach"].includes(state.phase) && e.key === "Enter") {
+  } else if (["feedback", "teach"].includes(store.state.phase) && e.key === "Enter") {
     e.preventDefault();
     nextQuestion();
   }