updateday 0.0.0-stage → 0.2.0

package/ui/players.js

@@ -0,0 +1,256 @@
+const DEFAULT_KEY_FORMAT = "{userId}";
+const MAX_DIFF_LINES = 12;
+
+let currentPlayer = null;
+let currentEntry = null;
+let playerEditor = null;
+
+function playerHtml(player, extra) {
+	return `
+		<div class="player">
+			${player.avatarUrl ? `<img src="${h(player.avatarUrl)}" alt="">` : `<img alt="">`}
+			<div class="grow"><b>${h(player.displayName)}</b><div class="hint">@${h(player.name)} · ID ${player.id}</div></div>
+			${extra ?? ""}
+		</div>`;
+}
+
+function lookupHtml(id) {
+	return `
+		<form class="row" id="${id}Form" style="align-items:flex-end">
+			<label class="field" style="flex:1"><span>Player</span><input type="search" id="${id}" placeholder="Username or user ID" value="${h(currentPlayer?.name ?? "")}" autocomplete="off"></label>
+			<div class="field" style="flex:none"><button class="btn btn-primary" type="submit">Look up</button></div>
+		</form>`;
+}
+
+function bindLookup(id, onFound) {
+	const input = $(id);
+	$(`${id}Form`).addEventListener("submit", async (event) => {
+		event.preventDefault();
+		const query = input.value.trim();
+		if (!query) {
+			input.focus();
+			return;
+		}
+		const button = event.submitter;
+		button.disabled = true;
+		try {
+			const result = await api("GET", `/api/player?${gameQuery()}&q=${encodeURIComponent(query)}`);
+			currentPlayer = result.player;
+			onFound(result);
+		} catch (error) {
+			toast(error.message, "danger");
+		} finally {
+			button.disabled = false;
+		}
+	});
+}
+
+function playerDataSettings() {
+	const game = currentGame();
+	game.playerData = game.playerData || { dataStore: "", keyFormat: DEFAULT_KEY_FORMAT };
+	return game.playerData;
+}
+
+function playerKey() {
+	const format = $("pdKey").value.trim() || DEFAULT_KEY_FORMAT;
+	return format.replace(/\{userId\}/g, String(currentPlayer.id));
+}
+
+function changedPaths(before, after, prefix = "") {
+	if (JSON.stringify(before) === JSON.stringify(after)) {
+		return [];
+	}
+	const isObject = (value) => value && typeof value === "object" && !Array.isArray(value);
+	const bothArrays = Array.isArray(before) && Array.isArray(after);
+	if (!bothArrays && (!isObject(before) || !isObject(after))) {
+		return [{ path: prefix || "(whole value)", before, after }];
+	}
+	const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
+	const childPath = (key) => (bothArrays ? `${prefix}[${key}]` : prefix ? `${prefix}.${key}` : key);
+	return [...keys].flatMap((key) => changedPaths(before[key], after[key], childPath(key)));
+}
+
+function entryQuery(store, key) {
+	return `${gameQuery()}&ds=${encodeURIComponent(store)}&key=${encodeURIComponent(key)}`;
+}
+
+async function savePlayerData(store, key) {
+	let value;
+	try {
+		value = playerEditor.getValue();
+	} catch (error) {
+		$("pdError").innerHTML = errorBox(error);
+		return;
+	}
+	$("pdError").innerHTML = "";
+	const changes = changedPaths(currentEntry?.value ?? null, value);
+	if (changes.length === 0) {
+		toast("Nothing changed");
+		return;
+	}
+	const shown = (value, missing) => (value === undefined ? missing : JSON.stringify(value));
+	const lines = changes.slice(0, MAX_DIFF_LINES).map((change) => `${change.path}: ${shown(change.before, "(new)")} → ${shown(change.after, "(removed)")}`);
+	if (changes.length > MAX_DIFF_LINES) {
+		lines.push(`…and ${changes.length - MAX_DIFF_LINES} more`);
+	}
+	const sure = await dialog({
+		title: `Save ${currentPlayer.name}'s data?`,
+		body: `<p>A backup is saved first.</p><pre>${h(lines.join("\n"))}</pre>`,
+		html: true,
+		confirmText: "Save changes",
+	});
+	if (!sure) {
+		return;
+	}
+	try {
+		await api("PUT", `/api/entry?${entryQuery(store, key)}`, { value, etag: currentEntry?.etag ?? null });
+		toast("Saved. The old data is in the backups.", "success");
+		showPlayerData();
+	} catch (error) {
+		$("pdError").innerHTML = errorBox(error);
+	}
+}
+
+function pendingChanges() {
+	try {
+		return changedPaths(currentEntry?.value ?? null, playerEditor.getValue()).length;
+	} catch {
+		return 0;
+	}
+}
+
+function showChangeCount() {
+	const count = pendingChanges();
+	$("pdChanges").textContent = count ? `${count} unsaved change${count === 1 ? "" : "s"}` : "";
+}
+
+async function reloadPlayerData() {
+	if (pendingChanges() > 0) {
+		const sure = await dialog({ title: "Discard your edits?", body: "Reloading reads the player's data from Roblox again and drops the changes you haven't saved.", confirmText: "Discard and reload", danger: true });
+		if (!sure) {
+			return;
+		}
+	}
+	showPlayerData();
+}
+
+function backupsHtml(backups) {
+	if (!backups.length) {
+		return `<div class="hint">None yet. One is made before every change.</div>`;
+	}
+	return `<div class="list">${backups.map((backup) => `
+		<div class="list-row">
+			<span class="hint">${h(formatWhen(backup.savedAt))}</span>
+			<span>${h(backup.reason)}</span>
+			<button class="btn btn-sm" data-file="${h(backup.file)}">Restore</button>
+		</div>`).join("")}</div>`;
+}
+
+async function showPlayerData() {
+	const result = $("pdResult");
+	const store = $("pdStore").value;
+	if (!store) {
+		result.innerHTML = playerHtml(currentPlayer) + `<div class="callout callout-info">Pick the data store your game saves players in.</div>`;
+		return;
+	}
+	const key = playerKey();
+	result.innerHTML = playerHtml(currentPlayer) + `<div class="skeleton" style="height:220px"></div>`;
+	try {
+		const { entry, backups } = await api("GET", `/api/entry?${entryQuery(store, key)}`);
+		currentEntry = entry;
+		result.innerHTML = `
+			${playerHtml(currentPlayer, `<span class="badge">${h(store)} / ${h(key)}</span>`)}
+			${entry ? "" : `<div class="callout callout-warning" style="margin-bottom:12px">No saved data for this player under that key yet.</div>`}
+			<div class="field"><span>Saved data</span><div id="pdEditor"></div></div>
+			<div id="pdError"></div>
+			<div style="display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-bottom:18px">
+				<span class="change-count" id="pdChanges" aria-live="polite"></span>
+				<span style="flex:1"></span>
+				<button class="btn" id="pdReload">Reload</button>
+				<button class="btn btn-primary" id="pdSave">Save changes</button>
+			</div>
+			<div class="section-title">Backups, newest first</div>
+			${backupsHtml(backups)}`;
+		playerEditor = createJsonEditor($("pdEditor"), entry ? entry.value : null, showChangeCount);
+		$("pdSave").addEventListener("click", () => savePlayerData(store, key));
+		$("pdReload").addEventListener("click", reloadPlayerData);
+		for (const button of result.querySelectorAll("[data-file]")) {
+			button.addEventListener("click", async () => {
+				const sure = await dialog({ title: "Restore this backup?", body: "The player's current data is backed up first, so you can undo this too.", confirmText: "Restore" });
+				if (!sure) {
+					return;
+				}
+				try {
+					await api("POST", `/api/entry?${entryQuery(store, key)}`, { restore: button.dataset.file });
+					toast("Backup restored", "success");
+					showPlayerData();
+				} catch (error) {
+					toast(error.message, "danger");
+				}
+			});
+		}
+	} catch (error) {
+		result.innerHTML = playerHtml(currentPlayer) + errorBox(error);
+	}
+}
+
+async function loadDataStores(settings) {
+	const select = $("pdStore");
+	try {
+		const { dataStores } = await api("GET", `/api/datastores?${gameQuery()}`);
+		select.innerHTML = `<option value="">Pick a data store</option>` + dataStores.map((name) => `<option ${name === settings.dataStore ? "selected" : ""}>${h(name)}</option>`).join("");
+		select.disabled = false;
+	} catch (error) {
+		select.innerHTML = `<option value="">Couldn't load data stores</option>`;
+		$("pdStoreError").innerHTML = errorBox(error);
+	}
+}
+
+function renderPlayers(root) {
+	if (!currentGame()?.universeId) {
+		root.innerHTML = `<div class="card">${emptyState("Add the game link first", "Player data is read from the game's data stores.")}</div>`;
+		return;
+	}
+	const settings = currentGame().playerData ?? { dataStore: "", keyFormat: DEFAULT_KEY_FORMAT };
+	root.innerHTML = `
+		<div class="grid-2">
+			<div class="stack">
+				<div class="card">
+					<div class="card-head"><div><h2>Find a player</h2><div class="hint">Look up a player's saved data, change it, and put it back.</div></div></div>
+					${lookupHtml("pdLookup")}
+					<div id="pdResult">${currentPlayer ? "" : emptyState("No player picked", "Search by username or user ID.")}</div>
+				</div>
+			</div>
+			<div class="stack">
+				<div class="card">
+					<div class="card-head"><div><h2>Where players are saved</h2><div class="hint">Remembered for this game.</div></div></div>
+					<label class="field"><span>Data store</span><select id="pdStore" disabled><option>Loading…</option></select></label>
+					<div id="pdStoreError"></div>
+					<label class="field"><span>Key</span><input type="text" id="pdKey" class="mono" value="${h(settings.keyFormat)}"><span class="hint">{userId} becomes the player's ID, e.g. Player_{userId}.</span></label>
+				</div>
+				<div class="callout callout-info">A backup is saved before every change, and saves check nobody else wrote in between.</div>
+			</div>
+		</div>`;
+	$("pdKey").addEventListener("change", (event) => {
+		playerDataSettings().keyFormat = event.target.value.trim() || DEFAULT_KEY_FORMAT;
+		markDirty();
+	});
+	$("pdStore").addEventListener("change", (event) => {
+		playerDataSettings().dataStore = event.target.value;
+		markDirty();
+		if (currentPlayer) {
+			showPlayerData();
+		}
+	});
+	bindLookup("pdLookup", showPlayerData);
+	loadDataStores(settings).then(() => {
+		if (currentPlayer && UD.view === "players") {
+			showPlayerData();
+		}
+	});
+}
+
+UD.views.players = {
+	label: "Player data",
+	render: renderPlayers,
+};

package/ui/run.js

@@ -0,0 +1,391 @@
+const POLL_RUNNING_MS = 2000;
+const POLL_IDLE_MS = 6000;
+const DOCTOR_SYMBOLS = { ok: "✓", missing: "✗", error: "!", untested: "–" };
+const LOG_LINE = /^(\d{4}-\d{2}-\d{2}T[\d:.]+Z)\s+(.*)$/;
+const ALERT_LINE = /REMINDER|FAILED|^ERROR|update day is done|Every schedule is complete/i;
+const CHECK_SYMBOLS_RUN = { ok: "✓", warn: "!", bad: "✗", info: "i" };
+
+let runMode = "idle";
+let pollTimer = null;
+let drawerOpen = false;
+let lastLog = "";
+let lastLines = null;
+
+function nextStep() {
+	const steps = (UD.schedule?.games ?? []).flatMap((game) => (game?.steps ?? []).filter((step) => !step.done).map((step) => ({ ...step, game: game.name })));
+	steps.sort((a, b) => (a.at ? Date.parse(a.at) : 0) - (b.at ? Date.parse(b.at) : 0));
+	return steps[0] ?? null;
+}
+
+function keyEnvs() {
+	const games = (UD.schedule?.games ?? []).filter(Boolean);
+	return [...new Map(games.map((game) => [game.apiKeyEnv, game])).values()];
+}
+
+function runbarHtml() {
+	return `
+		<div class="runbar-main">
+			<div class="run-state">
+				<span class="pulse" id="runPulse" aria-hidden="true"></span>
+				<div class="run-text"><b id="runTitle">Not running</b><span id="runNext"></span></div>
+			</div>
+			<div class="run-actions">
+				<span id="runKey"></span>
+				<button class="btn btn-ghost btn-sm" id="runCheck" title="Check the key, times, icons, sale items and alerts">Check plan</button>
+				<button class="btn btn-ghost btn-sm" id="runDry" title="Show what would happen right now, without changing anything">Dry run</button>
+				<button class="btn btn-ghost btn-sm" id="runUndo" title="Put prices, names and the icon back">Undo all</button>
+				<button class="btn btn-primary" id="runStart">Start</button>
+				<button class="btn btn-danger" id="runStop" hidden>Stop</button>
+				<button class="icon-btn" id="runDrawer" aria-expanded="false" aria-controls="drawer" aria-label="Show log and API key">▴</button>
+			</div>
+		</div>
+		<div class="drawer" id="drawer">
+			<div class="drawer-inner">
+				<div>
+					<div class="section-title">API key</div>
+					<div id="runKeys"></div>
+					<div class="hint" style="margin-bottom:12px">Pasted keys stay in memory until UpdateDay closes and are never written to disk. To keep one, set it as an environment variable.</div>
+					<button class="btn btn-sm" id="runDoctor">Check key permissions</button>
+					<div id="runDoctorResult" style="margin-top:12px"></div>
+				</div>
+				<div>
+					<div class="section-title">Log</div>
+					<pre class="log" id="runLog" tabindex="0" aria-label="Run log"></pre>
+				</div>
+			</div>
+		</div>`;
+}
+
+function logHtml(lines) {
+	if (!lines.length) {
+		return `<span class="t">Nothing has run yet. Start runs the plan on time; Dry run shows what would happen right now.</span>`;
+	}
+	return lines.map((line) => {
+		const match = LOG_LINE.exec(line);
+		const text = match ? match[2] : line;
+		const kind = /error|failed|refused|couldn't/i.test(text) ? "err" : /^\s*RUN\b/.test(text) ? "run" : /REMINDER|warn|skipp/i.test(text) ? "warn" : "";
+		const time = match ? `<span class="t">${h(formatTime(match[1]))}</span>  ` : "";
+		return `${time}<span class="${kind}">${h(text.replace(/^\s*RUN\s+/, "▸ "))}</span>`;
+	}).join("\n");
+}
+
+function renderRunState() {
+	const running = runMode !== "idle";
+	$("runPulse").classList.toggle("on", running);
+	$("runTitle").textContent = runMode === "watching" ? "Running" : running ? "Busy" : "Not running";
+	const next = nextStep();
+	const multi = (UD.schedule?.games ?? []).filter(Boolean).length > 1;
+	const nextText = next
+		? `Next: ${next.label}${multi ? ` (${next.game})` : ""} · ${next.at ? (Date.parse(next.at) <= Date.now() ? "due now" : `in ${formatSpan(Date.parse(next.at) - Date.now())}`) : "right away"}`
+		: "Everything is done";
+	$("runNext").textContent = nextText;
+	$("runNext").title = nextText;
+	$("runStart").hidden = running;
+	$("runStop").hidden = !running;
+	$("runDry").disabled = running;
+	$("runUndo").disabled = running;
+	const envs = keyEnvs();
+	const missing = envs.filter((game) => !game.hasKey).length;
+	$("runKey").innerHTML = envs.length
+		? `<button class="badge ${missing ? "badge-warning" : "badge-success"}" id="runKeyBadge" style="cursor:pointer;border:0">${missing ? "No API key" : "Key ready"}</button>`
+		: "";
+	$("runKeyBadge")?.addEventListener("click", () => setDrawer(true));
+}
+
+function renderKeys() {
+	const box = $("runKeys");
+	const envs = keyEnvs();
+	if (!envs.length) {
+		box.innerHTML = `<div class="hint" style="margin-bottom:10px">Add a game first.</div>`;
+		return;
+	}
+	box.innerHTML = envs.map((game) => `
+		<form class="key-row" data-env="${h(game.apiKeyEnv)}">
+			<label class="field" style="margin:0">
+				<span>${h(game.apiKeyEnv)} <span class="badge ${game.hasKey ? "badge-success" : "badge-warning"}">${game.hasKey ? "Set" : "Missing"}</span></span>
+				<input type="password" placeholder="${game.hasKey ? "Paste to replace" : "Paste your Open Cloud API key"}" autocomplete="off">
+			</label>
+			<div class="field" style="margin:0;justify-content:flex-end"><button class="btn btn-sm" type="submit">Use key</button></div>
+		</form>`).join("");
+	for (const form of box.querySelectorAll("form")) {
+		form.addEventListener("submit", async (event) => {
+			event.preventDefault();
+			const input = form.querySelector("input");
+			const value = input.value.trim();
+			if (!value) {
+				input.focus();
+				return;
+			}
+			try {
+				await api("POST", "/api/key", { env: form.dataset.env, value });
+				input.value = "";
+				await refreshSchedule();
+				renderKeys();
+				renderRunState();
+				saleItems.game = null;
+				renderView();
+				toast("Key added for this session", "success");
+			} catch (error) {
+				toast(error.message, "danger");
+			}
+		});
+	}
+}
+
+function doctorRowHtml(probe) {
+	const level = probe.status === "ok" ? "ok" : probe.status === "untested" ? "info" : probe.used ? "bad" : "warn";
+	return `
+		<li class="check ${level}">
+			<span class="dot" aria-hidden="true">${DOCTOR_SYMBOLS[probe.status]}</span>
+			<div><b>${h(probe.feature)}</b>${probe.used ? "" : ` <span class="hint">not in your plan</span>`}
+				<div class="hint mono">${h(probe.permission)}</div>
+				${probe.detail ? `<div class="hint">${h(probe.detail)}</div>` : ""}
+			</div>
+		</li>`;
+}
+
+async function runDoctor() {
+	const box = $("runDoctorResult");
+	const button = $("runDoctor");
+	button.disabled = true;
+	box.innerHTML = `<div class="skeleton" style="height:120px"></div>`;
+	try {
+		const { probes } = await api("GET", `/api/doctor?${gameQuery()}`);
+		const blocking = probes.filter((probe) => probe.used && (probe.status === "missing" || probe.status === "error"));
+		const heading = blocking.length
+			? `<div class="callout callout-danger">${blocking.length} permission${blocking.length === 1 ? "" : "s"} missing for your plan. Edit the key in Creator Hub (Open Cloud → API Keys) and add them for this game.</div>`
+			: `<div class="callout callout-info">The key has everything your plan needs.</div>`;
+		box.innerHTML = `${heading}<ul class="checks">${probes.map(doctorRowHtml).join("")}</ul>`;
+	} catch (error) {
+		box.innerHTML = errorBox(error);
+	} finally {
+		button.disabled = false;
+	}
+}
+
+function setDrawer(open) {
+	drawerOpen = open;
+	$("drawer").classList.toggle("open", open);
+	$("runDrawer").setAttribute("aria-expanded", String(open));
+	$("runDrawer").textContent = open ? "▾" : "▴";
+	if (open) {
+		renderKeys();
+		const log = $("runLog");
+		log.scrollTop = log.scrollHeight;
+	}
+}
+
+function preflightHtml(reports) {
+	const multi = reports.length > 1;
+	return reports.map((report) => `
+		${multi ? `<div class="section-title" style="margin-top:10px">${h(report.game)} ${report.ready ? `<span class="badge badge-success">Ready</span>` : `<span class="badge badge-danger">Needs fixing</span>`}</div>` : ""}
+		<ul class="checks">${report.checks.map((check) => `
+			<li class="check ${check.level}">
+				<span class="dot" aria-hidden="true">${CHECK_SYMBOLS_RUN[check.level]}</span>
+				<div><b>${h(check.title)}</b>${check.detail ? `<div class="hint">${h(check.detail)}</div>` : ""}</div>
+			</li>`).join("")}</ul>`).join("");
+}
+
+async function fetchPreflight() {
+	const { reports, error } = await api("GET", "/api/preflight");
+	if (error) {
+		throw new Error(error);
+	}
+	return reports;
+}
+
+async function checkPlan() {
+	const button = $("runCheck");
+	button.disabled = true;
+	button.textContent = "Checking…";
+	try {
+		const reports = await fetchPreflight();
+		const problems = reports.flatMap((report) => report.checks).filter((check) => check.level === "bad").length;
+		await dialog({
+			title: problems ? `${problems} thing${problems === 1 ? "" : "s"} to fix first` : "Ready for the update",
+			body: preflightHtml(reports),
+			html: true,
+			confirmText: "Close",
+			cancelText: null,
+		});
+	} catch (error) {
+		toast(error.message, "danger");
+	} finally {
+		button.disabled = false;
+		button.textContent = "Check plan";
+	}
+}
+
+function desktopAlert(line) {
+	if (readSetting(DESKTOP_ALERTS_KEY) !== "on" || typeof Notification === "undefined" || Notification.permission !== "granted") {
+		return;
+	}
+	const match = LOG_LINE.exec(line);
+	const text = (match ? match[2] : line).replace(/^\s*/, "");
+	const title = /REMINDER/.test(text) ? "Upload the next countdown icon" : /FAILED|ERROR/.test(text) ? "UpdateDay hit a problem" : "UpdateDay";
+	try {
+		new Notification(title, { body: text.replace(/^REMINDER [^:]+: /, "").slice(0, 180), tag: "updateday" });
+	} catch {
+	}
+}
+
+function alertNewLines(lines) {
+	if (lastLines === null) {
+		lastLines = lines;
+		return;
+	}
+	const previous = lastLines[lastLines.length - 1];
+	const start = previous === undefined ? 0 : lines.lastIndexOf(previous) + 1;
+	for (const line of lines.slice(start)) {
+		if (ALERT_LINE.test(line)) {
+			desktopAlert(line);
+		}
+	}
+	lastLines = lines;
+}
+
+async function pollRun() {
+	clearTimeout(pollTimer);
+	try {
+		const status = await api("GET", "/api/status");
+		const changed = status.mode !== runMode;
+		runMode = status.mode;
+		const text = status.log.join("\n");
+		if (text !== lastLog) {
+			lastLog = text;
+			alertNewLines(status.log);
+			const log = $("runLog");
+			const atBottom = log.scrollTop + log.clientHeight >= log.scrollHeight - 8;
+			log.innerHTML = logHtml(status.log);
+			if (atBottom) {
+				log.scrollTop = log.scrollHeight;
+			}
+			if (runMode !== "idle") {
+				await refreshSchedule();
+			}
+		}
+		if (changed) {
+			await refreshSchedule();
+		}
+		renderRunState();
+	} catch {
+	}
+	pollTimer = setTimeout(pollRun, runMode === "idle" ? POLL_IDLE_MS : POLL_RUNNING_MS);
+}
+
+async function ensureSaved(verb) {
+	if (!UD.dirty) {
+		return true;
+	}
+	const sure = await dialog({ title: "Save first?", body: `${verb} uses the saved plan. Save your changes and continue?`, confirmText: "Save and continue" });
+	if (!sure) {
+		return false;
+	}
+	await save();
+	return !UD.dirty;
+}
+
+async function runAction(action) {
+	try {
+		await api("POST", `/api/run/${action}`);
+	} catch (error) {
+		toast(error.message, "danger");
+	}
+	pollRun();
+}
+
+async function startRun() {
+	if (!(await ensureSaved("Starting"))) {
+		return;
+	}
+	const missing = keyEnvs().filter((game) => !game.hasKey);
+	if (missing.length) {
+		setDrawer(true);
+		toast(`Add the API key (${missing[0].apiKeyEnv}) first`, "danger");
+		return;
+	}
+	const button = $("runStart");
+	button.disabled = true;
+	button.textContent = "Checking…";
+	let reports = [];
+	try {
+		reports = await fetchPreflight();
+	} catch (error) {
+		toast(`Couldn't check the plan: ${error.message}`, "danger");
+	} finally {
+		button.disabled = false;
+		button.textContent = "Start";
+	}
+	const problems = reports.flatMap((report) => report.checks).filter((check) => check.level === "bad").length;
+	if (problems) {
+		const anyway = await dialog({
+			title: `${problems} thing${problems === 1 ? "" : "s"} to fix first`,
+			body: preflightHtml(reports),
+			html: true,
+			confirmText: "Start anyway",
+			cancelText: "Fix first",
+			danger: true,
+		});
+		if (!anyway) {
+			return;
+		}
+	}
+	await runAction("start");
+	toast("Running. Keep UpdateDay open until the update is done.", "success");
+}
+
+async function dryRun() {
+	if (!(await ensureSaved("A dry run"))) {
+		return;
+	}
+	setDrawer(true);
+	runAction("dryrun");
+}
+
+async function undoAll() {
+	const sure = await dialog({
+		title: "Undo everything?",
+		body: "Puts every saved price and name back, removes the countdown icons and restores the game's language settings. Use this if an update is cancelled.",
+		confirmText: "Undo everything",
+		danger: true,
+	});
+	if (!sure) {
+		return;
+	}
+	setDrawer(true);
+	await runAction("restore");
+	toast("Undo started. Watch the log for each item.", "success");
+}
+
+async function stopRun() {
+	const sure = await dialog({ title: "Stop the run?", body: "Nothing more happens until you start again. Anything already changed stays as it is; use Undo all to put it back.", confirmText: "Stop", danger: true });
+	if (sure) {
+		runAction("stop");
+	}
+}
+
+function initRunbar() {
+	$("runbar").innerHTML = runbarHtml();
+	$("runStart").addEventListener("click", startRun);
+	$("runStop").addEventListener("click", stopRun);
+	$("runDry").addEventListener("click", dryRun);
+	$("runCheck").addEventListener("click", checkPlan);
+	$("runUndo").addEventListener("click", undoAll);
+	$("runDoctor").addEventListener("click", runDoctor);
+	$("runDrawer").addEventListener("click", () => setDrawer(!drawerOpen));
+	document.addEventListener("click", (event) => {
+		if (event.target.closest(".js-add-key")) {
+			setDrawer(true);
+			document.querySelector("#runKeys input")?.focus();
+		}
+	});
+	onChange(() => {
+		renderRunState();
+		const typing = [...document.querySelectorAll("#runKeys input")].some((input) => input.value);
+		if (drawerOpen && !typing) {
+			renderKeys();
+		}
+	});
+	renderRunState();
+	pollRun();
+}