v0.1.0-alpha: interactive demo platform core

- Fastify API: demos/steps CRUD, content-addressed assets, scoped API keys
  (read/author/publish/admin, draft-only default per D4)
- Player: image + sandboxed DOM steps, hotspots, tooltips, keyboard nav,
  privacy-first beacons (no IP storage, viewer tokens only — R7)
- Editor: React SPA — demo list, drag-to-draw hotspots, annotations, publish
- MCP server: Streamable HTTP, scope-filtered tools, untrusted-data wrapping
  on viewer-supplied content (R8); platform never calls a model
- Capture extension (MV3): screenshot-flow recording, hotspots pre-placed
  from real clicks
- Docker: single app image + postgres, Traefik-ready (expose only)

E2E verified: capture->author->publish->play->beacon->lead->analytics + full
MCP tool surface with scope filtering.

apps/api/public/player.js

@@ -0,0 +1,113 @@
+/* Demo player. Renders image or dom steps with hotspot overlay; emits privacy-first beacons. */
+(function () {
+  "use strict";
+  var token = location.pathname.split("/").pop();
+  var params = new URLSearchParams(location.search);
+  var viewerToken = params.get("v") || null; // R7: identity only via explicit link token
+
+  var state = { demo: null, i: 0 };
+  var snap = document.getElementById("snap");
+  var dots = document.getElementById("dots");
+  var titleEl = document.getElementById("title");
+
+  function beacon(event, stepId) {
+    if (!state.demo) return;
+    var payload = JSON.stringify({
+      demo_id: state.demo.demo_id,
+      step_id: stepId || null,
+      viewer_token: viewerToken,
+      event: event,
+    });
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon("/api/public/analytics", new Blob([payload], { type: "application/json" }));
+    } else {
+      fetch("/api/public/analytics", { method: "POST", headers: { "Content-Type": "application/json" }, body: payload });
+    }
+  }
+
+  function render() {
+    var step = state.demo.steps[state.i];
+    snap.innerHTML = "";
+
+    var container;
+    if (step.snapshot_type === "image") {
+      container = document.createElement("img");
+      container.src = "/assets/" + step.asset_id;
+      container.draggable = false;
+    } else {
+      container = document.createElement("iframe");
+      container.setAttribute("sandbox", ""); // R1/R2: fully inert document, no scripts
+      container.srcdoc = step.dom_html || "";
+    }
+    snap.appendChild(container);
+
+    if (step.hotspot) {
+      var h = document.createElement("div");
+      h.className = "hotspot";
+      h.style.left = step.hotspot.x + "%";
+      h.style.top = step.hotspot.y + "%";
+      h.style.width = step.hotspot.w + "%";
+      h.style.height = step.hotspot.h + "%";
+      h.addEventListener("click", next);
+      snap.appendChild(h);
+
+      if (step.annotation) {
+        var t = document.createElement("div");
+        t.className = "tooltip";
+        var below = step.hotspot.y < 70;
+        t.style.left = Math.min(step.hotspot.x, 70) + "%";
+        t.style.top = below ? (step.hotspot.y + step.hotspot.h + 2) + "%" : "auto";
+        if (!below) t.style.bottom = (100 - step.hotspot.y + 2) + "%";
+        t.innerHTML =
+          (step.annotation.title ? "<h3></h3>" : "") + (step.annotation.body ? "<p></p>" : "");
+        if (step.annotation.title) t.querySelector("h3").textContent = step.annotation.title;
+        if (step.annotation.body) t.querySelector("p").textContent = step.annotation.body;
+        snap.appendChild(t);
+      }
+    }
+
+    dots.innerHTML = "";
+    state.demo.steps.forEach(function (_, j) {
+      var d = document.createElement("div");
+      d.className = "dot" + (j === state.i ? " active" : "");
+      dots.appendChild(d);
+    });
+  }
+
+  function next() {
+    var cur = state.demo.steps[state.i];
+    if (state.i >= state.demo.steps.length - 1) {
+      beacon("complete", cur.id);
+      return;
+    }
+    state.i++;
+    beacon("advance", state.demo.steps[state.i].id);
+    render();
+  }
+  function prev() {
+    if (state.i === 0) return;
+    state.i--;
+    beacon("back", state.demo.steps[state.i].id);
+    render();
+  }
+
+  document.getElementById("next").addEventListener("click", next);
+  document.getElementById("prev").addEventListener("click", prev);
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "ArrowRight") next();
+    if (e.key === "ArrowLeft") prev();
+  });
+
+  fetch("/api/public/demo/" + token)
+    .then(function (r) { if (!r.ok) throw new Error("not found"); return r.json(); })
+    .then(function (demo) {
+      state.demo = demo;
+      titleEl.textContent = demo.name;
+      document.title = demo.name;
+      beacon("view", demo.steps.length ? demo.steps[0].id : null);
+      render();
+    })
+    .catch(function () {
+      snap.innerHTML = "<div style='padding:40px;color:#64748b'>This demo is not available.</div>";
+    });
+})();