cert-coach-web 0.1.1 → 0.1.2

package/web/public/spa-ui.js

@@ -0,0 +1,62 @@
+/**
+ * Leaf UI helpers: connection dot, notice bar, card switching, phase pill,
+ * layout toggle, and the coach status log.
+ *
+ * No feature logic lives here, so every module can depend on these freely.
+ */
+import { el } from "./spa-dom.js";
+import { store } from "./spa-store.js";
+
+export 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";
+}
+
+export function showNotice(text) {
+  if (!text) {
+    el.notice.hidden = true;
+    el.notice.textContent = "";
+    return;
+  }
+  el.notice.hidden = false;
+  el.notice.textContent = text;
+}
+
+/** Show exactly one of the study cards. `null` shows none. */
+export 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;
+  }
+}
+
+export function setPhase(phase) {
+  el.phasePill.textContent = phase || "idle";
+}
+
+export function setLayout(name) {
+  store.activeLayout = ["triptych", "command"].includes(name) ? name : "triptych";
+  el.app.dataset.layout = store.activeLayout;
+  for (const b of el.layoutButtons) b.classList.toggle("active", b.dataset.appLayout === store.activeLayout);
+  localStorage.setItem("certCoachLayout", store.activeLayout);
+  return store.activeLayout;
+}
+
+/** Prepend coach log lines (newest first) and cap the list at 80. */
+export 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);
+  }
+  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;
+}

package/web/public/spa-views.js

@@ -0,0 +1,279 @@
+/**
+ * The non-study views: Path (blueprint route), Dashboard (readiness), Theory
+ * (per-node reference) and Logs (study_log.md), plus the command-center strip.
+ *
+ * Every loader reads the same /api/status or /api/theory endpoints and never
+ * mutates progress.
+ */
+import { el } from "./spa-dom.js";
+import { store } from "./spa-store.js";
+import { api } from "./spa-api.js";
+import { renderMarkdownInto } from "./spa-mermaid.js";
+import { safeHttpUrl } from "./spa-logic.js";
+
+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;
+}
+
+/** Compact readiness/domains strip shown in the command-center layout. */
+export async function updateCommandStrip() {
+  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);
+    }
+  } catch {
+    /* command strip is optional */
+  }
+}
+
+export function setView(name) {
+  store.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") void loadPath();
+  if (name === "dashboard") void loadDashboard();
+  if (name === "theory") void loadTheory();
+  if (name === "logs") void loadLogs();
+}
+
+export 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;
+  }
+}
+
+export 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;
+  }
+}
+
+export async function loadTheory() {
+  try {
+    if (!store.theoryNodes) {
+      const data = await api("/api/theory");
+      store.theoryNodes = data.nodes || [];
+      el.theoryNodes.replaceChildren();
+      for (const n of store.theoryNodes) {
+        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 = store.state?.q?.node || store.state?.teach?.node || store.theoryNodes[0]?.id;
+    if (preferred) await selectTheory(preferred);
+  } catch (e) {
+    el.theoryBody.textContent = e.message;
+  }
+}
+
+export async function selectTheory(node) {
+  store.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;
+  }
+}
+
+export 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;
+  }
+}

package/web/server/http.mjs

@@ -383,14 +383,13 @@ export function createStudyServer({ root, loop, token = "", chat = null, runtime
       if (method === "GET" && url.pathname === "/preview.js") {
         return sendFile(res, path.join(PUBLIC, "preview.js"), "text/javascript; charset=utf-8");
       }
-      if (method === "GET" && url.pathname === "/app.js") {
-        return sendFile(res, path.join(PUBLIC, "app.js"), "text/javascript; charset=utf-8");
-      }
-      if (method === "GET" && url.pathname === "/spa-logic.js") {
-        return sendFile(res, path.join(PUBLIC, "spa-logic.js"), "text/javascript; charset=utf-8");
-      }
-      if (method === "GET" && url.pathname === "/spa-render.js") {
-        return sendFile(res, path.join(PUBLIC, "spa-render.js"), "text/javascript; charset=utf-8");
+      // Serve any top-level module in web/public: /app.js, /spa-logic.js,
+      // /spa-render.js, /spa-store.js, ... The pattern forbids slashes and dots
+      // except the trailing .js, so it cannot escape PUBLIC.
+      if (method === "GET" && /^\/[a-z0-9-]+\.js$/.test(url.pathname)) {
+        const name = url.pathname.slice(1);
+        const file = path.join(PUBLIC, name);
+        if (fs.existsSync(file)) return sendFile(res, file, "text/javascript; charset=utf-8");
       }
       if (method === "GET" && url.pathname === "/styles.css") {
         return sendFile(res, path.join(PUBLIC, "styles.css"), "text/css; charset=utf-8");