scot/demo-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v0.2.0-alpha: DOM capture, all three output slices, lead gates

Browse source 
- Extension DOM mode: auth-context serializer — inlines CSS + images as data
  URLs, freezes form state, masks [data-dp-mask], strips scripts (R3 client)
- API: extractDataUrls rewrites large inline resources into content-addressed
  assets (R3 server; verified 939KB inline -> 82-byte row + served asset)
- Lead-gate steps: config on step, player overlay form blocks advance,
  submits to leads endpoint (editor toggle + MCP set_lead_gate)
- Step-guide export (v2 slice): authed markdown + public HTML at /p/:token/guide
- Video export (v3 slice, v0): ffmpeg slideshow of image steps + optional
  narration mux; DOM rasterization deferred to Chromium service (R4)
- Editor: reorder arrows, embed-code copy, guide link, video export
- REST reorder endpoint; MCP surface now 13 tools (export_guide,
  set_lead_gate, render_video)
- ffmpeg added to runtime image

E2E verified incl. R3 extraction round-trip, lead_gate in public JSON,
guide renders, MCP agent exported guide + rendered video.
This commit is contained in:
Scot Thom 2026-07-18 05:27:58 +00:00
parent 9b09f14916
commit a535e15253
18 changed files with 541 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

35
extension/popup.js
View file

@ -1,9 +1,11 @@
const $ = (id) => document.getElementById(id);
chrome.storage.local.get(["base", "key"], (v) => {
chrome.storage.local.get(["base", "key", "mode"], (v) => {
if (v.base) $("base").value = v.base;
if (v.key) $("key").value = v.key;
if (v.mode) $("mode").value = v.mode;
});
$("mode").addEventListener("change", () => chrome.storage.local.set({ mode: $("mode").value }));
const save = () => chrome.storage.local.set({ base: $("base").value.trim(), key: $("key").value.trim() });
$("base").addEventListener("change", save);
$("key").addEventListener("change", save);
@ -21,13 +23,13 @@ refresh();
$("start").addEventListener("click", async () => {
save();
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.runtime.sendMessage({ type: "start", tabId: tab.id }, refresh);
chrome.runtime.sendMessage({ type: "start", tabId: tab.id, mode: $("mode").value }, refresh);
});
$("discard").addEventListener("click", () => chrome.runtime.sendMessage({ type: "discard" }, refresh));
$("finish").addEventListener("click", () => {
chrome.runtime.sendMessage({ type: "stop" }, async ({ steps }) => {
chrome.runtime.sendMessage({ type: "stop" }, async ({ steps, mode }) => {
const base = $("base").value.trim().replace(/\/$/, "");
const key = $("key").value.trim();
if (!base || !key) { $("status").textContent = "Set platform URL and API key first."; return; }
@ -41,15 +43,24 @@ $("finish").addEventListener("click", () => {
body: JSON.stringify({ name: `Capture ${new Date().toLocaleString()}` }),
})).json();
for (const s of steps) {
const blob = await (await fetch(s.dataUrl)).blob();
const fd = new FormData();
fd.append("file", blob, "step.png");
const asset = await (await fetch(`${base}/api/assets`, { method: "POST", headers: auth, body: fd })).json();
const step = await (await fetch(`${base}/api/demos/${demo.id}/steps`, {
method: "POST",
headers: { ...auth, "Content-Type": "application/json" },
body: JSON.stringify({ snapshot_type: "image", asset_id: asset.id }),
})).json();
let step;
if (mode === "dom") {
step = await (await fetch(`${base}/api/demos/${demo.id}/steps`, {
method: "POST",
headers: { ...auth, "Content-Type": "application/json" },
body: JSON.stringify({ snapshot_type: "dom", dom_html: s.html }),
})).json();
} else {
const blob = await (await fetch(s.dataUrl)).blob();
const fd = new FormData();
fd.append("file", blob, "step.png");
const asset = await (await fetch(`${base}/api/assets`, { method: "POST", headers: auth, body: fd })).json();
step = await (await fetch(`${base}/api/demos/${demo.id}/steps`, {
method: "POST",
headers: { ...auth, "Content-Type": "application/json" },
body: JSON.stringify({ snapshot_type: "image", asset_id: asset.id }),
})).json();
}
// pre-place a hotspot centred on the recorded click
await fetch(`${base}/api/steps/${step.id}`, {
method: "PATCH",