updateday 0.0.0-stage → 0.2.0

package/ui/events.js

@@ -0,0 +1,249 @@
+const EVENT_CATEGORIES = [
+	["newContent", "New content"], ["newFeature", "New feature"], ["newSeason", "New season"],
+	["newMap", "New map"], ["newLocation", "New location"], ["itemDrop", "Item drop"], ["festival", "Festival"],
+	["challenge", "Challenge"], ["quest", "Quest"], ["earlyAccess", "Early access"], ["expansion", "Expansion"],
+	["moreLevels", "More levels"],
+];
+const DEFAULT_AUTO_EVENT = { title: "New update!", subtitle: "Come play the update", durationHours: 2, visibility: "Public" };
+const EVENT_LEAD_MINUTES = 15;
+
+let editingEvent = undefined;
+let eventsCache = null;
+
+function categoryLabel(category) {
+	return EVENT_CATEGORIES.find(([value]) => value === category)?.[1] ?? category;
+}
+
+function eventTimeRange(event) {
+	const time = (date) => new Date(date).toLocaleTimeString(LOCALE, { hour: "numeric", minute: "2-digit" });
+	return `${time(event.startTime)} – ${time(event.endTime)}`;
+}
+
+function eventRowHtml(event) {
+	const start = new Date(event.startTime);
+	const past = Date.parse(event.endTime) < Date.now();
+	const live = !past && start.getTime() <= Date.now();
+	const categories = (event.categories ?? []).map((item) => `<span class="badge">${h(categoryLabel(item.category))}</span>`).join(" ");
+	const state = live ? `<span class="badge badge-success">Live</span>` : past ? `<span class="badge">Ended</span>` : "";
+	return `
+		<div class="event-row" data-id="${h(event.id)}">
+			<div class="date-badge" aria-hidden="true"><span>${start.toLocaleDateString(LOCALE, { month: "short" })}</span><b>${start.getDate()}</b></div>
+			<div style="min-width:0">
+				<b>${h(event.title)}</b> ${state}
+				${event.subtitle ? `<div class="hint">${h(event.subtitle)}</div>` : ""}
+				<div class="hint">${h(start.toLocaleDateString(LOCALE, { weekday: "short", month: "short", day: "numeric" }))}, ${eventTimeRange(event)} · ${event.visibility === "private" ? "Private" : "Everyone"} ${categories}</div>
+			</div>
+			<div style="display:flex;gap:6px">
+				<button class="btn btn-sm" data-act="edit" aria-label="Edit ${h(event.title)}">Edit</button>
+				<button class="btn btn-sm btn-danger-ghost" data-act="delete" aria-label="Delete ${h(event.title)}">Delete</button>
+			</div>
+		</div>`;
+}
+
+function eventFormHtml(event) {
+	const auto = UD.draft.event || DEFAULT_AUTO_EVENT;
+	const updateAt = gameUpdateAt(currentGame()).toISOString();
+	const values = event ?? {
+		title: auto.title ?? "",
+		subtitle: auto.subtitle ?? "",
+		description: "",
+		startTime: updateAt,
+		endTime: new Date(Date.parse(updateAt) + (auto.durationHours ?? 2) * 36e5).toISOString(),
+		visibility: "public",
+		categories: [{ category: "newContent", rank: 0 }],
+	};
+	const category = values.categories?.[0]?.category ?? "newContent";
+	return `
+		<div class="card" id="evForm">
+			<div class="card-head"><div><h2>${event ? "Edit event" : "New event"}</h2><div class="hint">Events have to start at least ${EVENT_LEAD_MINUTES} minutes from now.</div></div></div>
+			<label class="field"><span>Title</span><input type="text" id="evTitle" maxlength="50" value="${h(values.title)}" required></label>
+			<label class="field"><span>Subtitle</span><input type="text" id="evSubtitle" maxlength="100" value="${h(values.subtitle)}"></label>
+			<label class="field"><span>Description</span><textarea id="evDescription" rows="3">${h(values.description ?? "")}</textarea></label>
+			<div class="row">
+				<label class="field"><span>Starts</span><input type="datetime-local" id="evStart" value="${toLocalInput(values.startTime)}"></label>
+				<label class="field"><span>Ends</span><input type="datetime-local" id="evEnd" value="${toLocalInput(values.endTime)}"></label>
+			</div>
+			<div class="row">
+				<label class="field"><span>Category</span><select id="evCategory">${EVENT_CATEGORIES.map(([value, label]) => `<option value="${value}" ${value === category ? "selected" : ""}>${label}</option>`).join("")}</select></label>
+				<label class="field"><span>Who can see it</span>
+					<select id="evVisibility">
+						<option value="public" ${values.visibility !== "private" ? "selected" : ""}>Everyone</option>
+						<option value="private" ${values.visibility === "private" ? "selected" : ""}>Only me (private)</option>
+					</select>
+				</label>
+			</div>
+			<label class="field"><span>Thumbnail</span><input type="file" id="evImage" accept="image/*"><span class="hint">Optional. 16:9 works best.</span></label>
+			<div id="evError"></div>
+			<div style="display:flex;gap:8px;justify-content:flex-end">
+				<button class="btn" id="evCancel">Cancel</button>
+				<button class="btn btn-primary" id="evSave">${event ? "Save changes" : "Create event"}</button>
+			</div>
+		</div>`;
+}
+
+function autoEventHtml() {
+	const auto = UD.draft.event;
+	return `
+		<div class="card">
+			${switchHtml("evAuto", Boolean(auto), "Create an event automatically", "Every game gets an event that starts at its update.")}
+			<div class="revealed" id="evAutoFields" ${auto ? "" : "hidden"}>
+				<label class="field"><span>Title</span><input type="text" id="evAutoTitle" maxlength="50" value="${h(auto?.title ?? "")}"></label>
+				<label class="field"><span>Subtitle</span><input type="text" id="evAutoSubtitle" maxlength="100" value="${h(auto?.subtitle ?? "")}"></label>
+				<label class="field"><span>Length (hours)</span><input type="number" id="evAutoHours" min="1" max="2160" value="${auto?.durationHours ?? 2}"></label>
+			</div>
+		</div>`;
+}
+
+function bindAutoEvent(root) {
+	const fields = root.querySelector("#evAutoFields");
+	const auto = () => UD.draft.event || (UD.draft.event = { ...DEFAULT_AUTO_EVENT });
+	root.querySelector("#evAuto").addEventListener("change", (event) => {
+		if (event.target.checked) {
+			const values = auto();
+			root.querySelector("#evAutoTitle").value = values.title;
+			root.querySelector("#evAutoSubtitle").value = values.subtitle;
+			root.querySelector("#evAutoHours").value = values.durationHours;
+		} else {
+			delete UD.draft.event;
+		}
+		fields.hidden = !event.target.checked;
+		markDirty();
+	});
+	root.querySelector("#evAutoTitle").addEventListener("input", (event) => {
+		auto().title = event.target.value;
+		markDirty();
+	});
+	root.querySelector("#evAutoSubtitle").addEventListener("input", (event) => {
+		auto().subtitle = event.target.value;
+		markDirty();
+	});
+	root.querySelector("#evAutoHours").addEventListener("input", (event) => {
+		auto().durationHours = Number(event.target.value);
+		markDirty();
+	});
+}
+
+async function eventThumbnail() {
+	const file = $("evImage").files[0];
+	if (!file) {
+		return null;
+	}
+	const result = await api("POST", `/api/event-image?${gameQuery()}`, await file.arrayBuffer(), true);
+	return [{ mediaId: result.assetId, rank: 0 }];
+}
+
+async function saveEventForm() {
+	const button = $("evSave");
+	const title = $("evTitle").value.trim();
+	if (!title) {
+		$("evError").innerHTML = errorBox("Give the event a title.");
+		$("evTitle").focus();
+		return;
+	}
+	button.disabled = true;
+	button.textContent = "Saving…";
+	try {
+		const body = {
+			title,
+			subtitle: $("evSubtitle").value.trim(),
+			description: $("evDescription").value.trim(),
+			startTime: fromLocalInput($("evStart").value),
+			endTime: fromLocalInput($("evEnd").value),
+			visibility: $("evVisibility").value === "private" ? "Private" : "Public",
+			categories: [{ category: $("evCategory").value, rank: 0 }],
+		};
+		const thumbnails = await eventThumbnail();
+		if (thumbnails) {
+			body.thumbnails = thumbnails;
+		}
+		const id = editingEvent?.id;
+		await api(id ? "PATCH" : "POST", `/api/events?${gameQuery()}${id ? `&id=${encodeURIComponent(id)}` : ""}`, body);
+		toast(id ? "Event updated" : "Event created", "success");
+		editingEvent = undefined;
+		renderEvents($("view"));
+	} catch (error) {
+		button.disabled = false;
+		button.textContent = "Try again";
+		$("evError").innerHTML = errorBox(error);
+	}
+}
+
+function openEventForm(event) {
+	editingEvent = event;
+	const slot = $("evFormSlot");
+	slot.innerHTML = eventFormHtml(event);
+	$("evSave").addEventListener("click", saveEventForm);
+	$("evCancel").addEventListener("click", () => {
+		editingEvent = undefined;
+		slot.innerHTML = "";
+	});
+	slot.scrollIntoView({ block: "nearest", behavior: "smooth" });
+	$("evTitle").focus();
+}
+
+function eventListHtml(events) {
+	if (!events.length) {
+		return emptyState("No events yet", "Events show on your game page and in players' calendars. Make one for every update.");
+	}
+	const upcoming = events.filter((event) => Date.parse(event.endTime) >= Date.now()).sort((a, b) => Date.parse(a.startTime) - Date.parse(b.startTime));
+	const past = events.filter((event) => Date.parse(event.endTime) < Date.now()).sort((a, b) => Date.parse(b.startTime) - Date.parse(a.startTime));
+	const group = (title, list) => list.length ? `<div class="section-title" style="margin-top:8px">${title}</div>${list.map(eventRowHtml).join("")}` : "";
+	return group("Upcoming", upcoming) + group("Past", past);
+}
+
+async function loadEvents(root) {
+	const list = root.querySelector("#evList");
+	try {
+		const { events } = await api("GET", `/api/events?${gameQuery()}`);
+		eventsCache = events;
+		list.innerHTML = eventListHtml(events);
+		for (const row of list.querySelectorAll(".event-row")) {
+			const event = events.find((item) => item.id === row.dataset.id);
+			row.querySelector("[data-act=edit]").addEventListener("click", () => openEventForm(event));
+			row.querySelector("[data-act=delete]").addEventListener("click", async () => {
+				const sure = await dialog({ title: "Delete this event?", body: `"${event.title}" will be removed from Roblox. This can't be undone.`, confirmText: "Delete event", danger: true });
+				if (!sure) {
+					return;
+				}
+				try {
+					await api("DELETE", `/api/events?${gameQuery()}&id=${encodeURIComponent(event.id)}`);
+					toast("Event deleted", "success");
+					loadEvents(root);
+				} catch (error) {
+					toast(error.message, "danger");
+				}
+			});
+		}
+	} catch (error) {
+		list.innerHTML = errorBox(error);
+	}
+}
+
+function renderEvents(root) {
+	root.innerHTML = `
+		<div class="grid-2">
+			<div class="stack">
+				<div id="evFormSlot"></div>
+				<div class="card">
+					<div class="card-head">
+						<div><h2>Roblox events</h2><div class="hint">Live from Roblox for this game.</div></div>
+						<button class="btn btn-primary btn-sm" id="evNew">+ New event</button>
+					</div>
+					<div id="evList"><div class="skeleton" style="height:64px;margin-bottom:10px"></div><div class="skeleton" style="height:64px"></div></div>
+				</div>
+			</div>
+			<div class="stack">${autoEventHtml()}</div>
+		</div>`;
+	root.querySelector("#evNew").addEventListener("click", () => openEventForm(null));
+	bindAutoEvent(root);
+	if (!currentGame()?.universeId) {
+		root.querySelector("#evList").innerHTML = emptyState("Add the game link first", "Events load once UpdateDay knows the game.");
+		return;
+	}
+	loadEvents(root);
+}
+
+UD.views.events = {
+	label: "Events",
+	render: renderEvents,
+};

package/ui/gifts.js

@@ -0,0 +1,215 @@
+const MAX_GIFT_AMOUNT = 50;
+
+let giftCategory = null;
+let pendingGifts = null;
+
+function giftCatalog() {
+	return currentGame().gifts?.catalog ?? UD.draft.gifts?.catalog ?? {};
+}
+
+function setGiftCatalog(catalog) {
+	const game = currentGame();
+	game.gifts = { ...(game.gifts ?? {}), catalog };
+	markDirty();
+}
+
+function splitList(text) {
+	return text.split(",").map((item) => item.trim()).filter(Boolean);
+}
+
+function catalogHtml() {
+	const rows = Object.entries(giftCatalog()).map(([name, category]) => `
+		<div class="cat-row" data-name="${h(name)}">
+			<b>${h(name)}</b>
+			<input type="text" data-k="items" value="${h((category.items ?? []).join(", "))}" placeholder="Items, comma separated" aria-label="${h(name)} items">
+			<input type="text" data-k="tiers" value="${h((category.tiers ?? []).join(", "))}" placeholder="Tiers (optional)" aria-label="${h(name)} tiers">
+			<button class="icon-btn" data-act="remove" aria-label="Remove ${h(name)}" title="Remove">✕</button>
+		</div>`).join("");
+	return `
+		<div class="card">
+			<div class="card-head"><div><h2>What this game can give</h2><div class="hint">Category names must match the handlers in UpdateDayGifts.luau.</div></div></div>
+			${rows || `<div class="hint" style="margin-bottom:10px">No categories yet. Add one, e.g. Pet, Currency or Boost.</div>`}
+			<form class="row" id="catForm" style="align-items:flex-end;margin-top:6px">
+				<label class="field" style="flex:1"><span>New category</span><input type="text" id="catNew" placeholder="e.g. Pet"></label>
+				<div class="field" style="flex:none"><button class="btn" type="submit">Add</button></div>
+			</form>
+		</div>`;
+}
+
+function bindCatalog(root) {
+	for (const row of root.querySelectorAll(".cat-row")) {
+		const name = row.dataset.name;
+		for (const input of row.querySelectorAll("input")) {
+			input.addEventListener("change", () => {
+				const catalog = giftCatalog();
+				catalog[name] = { ...(catalog[name] ?? {}), [input.dataset.k]: splitList(input.value) };
+				setGiftCatalog(catalog);
+				renderGiftForm();
+			});
+		}
+		row.querySelector("[data-act=remove]").addEventListener("click", async () => {
+			const sure = await dialog({ title: `Remove ${name}?`, body: "It comes off this game's gift list. Gifts already sent are not affected.", confirmText: "Remove", danger: true });
+			if (!sure) {
+				return;
+			}
+			const catalog = giftCatalog();
+			delete catalog[name];
+			setGiftCatalog(catalog);
+			renderGifts(root);
+		});
+	}
+	root.querySelector("#catForm").addEventListener("submit", (event) => {
+		event.preventDefault();
+		const name = $("catNew").value.trim();
+		if (!name) {
+			return;
+		}
+		setGiftCatalog({ ...giftCatalog(), [name]: { items: [], tiers: [] } });
+		giftCategory = name;
+		renderGifts(root);
+	});
+}
+
+function renderGiftForm() {
+	const slot = $("giftForm");
+	if (!slot) {
+		return;
+	}
+	const catalog = giftCatalog();
+	const names = Object.keys(catalog);
+	if (!currentPlayer) {
+		slot.innerHTML = "";
+		return;
+	}
+	if (names.length === 0) {
+		slot.innerHTML = `<div class="callout callout-info">Add what this game can give first.</div>`;
+		return;
+	}
+	giftCategory = names.includes(giftCategory) ? giftCategory : names[0];
+	const category = catalog[giftCategory];
+	const tiers = category.tiers ?? [];
+	const items = category.items ?? [];
+	slot.innerHTML = `
+		<div class="section-title">Send a gift</div>
+		<div class="chips" style="margin-bottom:12px" role="radiogroup" aria-label="Gift category">${names.map((name) => `<button type="button" class="chip ${name === giftCategory ? "active" : ""}" role="radio" aria-checked="${name === giftCategory}" data-cat="${h(name)}">${h(name)}</button>`).join("")}</div>
+		<div class="row">
+			<label class="field"><span>What</span>
+				${items.length ? `<select id="giftItem">${items.map((item) => `<option>${h(item)}</option>`).join("")}</select>` : `<input type="text" id="giftItem" placeholder="Item name">`}
+			</label>
+			${tiers.length ? `<label class="field"><span>Tier</span><select id="giftTier">${tiers.map((tier) => `<option>${h(tier)}</option>`).join("")}</select></label>` : ""}
+			<label class="field" style="max-width:130px"><span>How many</span><input type="number" id="giftAmount" min="1" max="${MAX_GIFT_AMOUNT}" value="1"></label>
+		</div>
+		<div style="display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap">
+			<span class="hint">Arrives right away if @${h(currentPlayer.name)} is in a server, otherwise next time they join.</span>
+			<button class="btn btn-primary" id="giftSend">Send gift</button>
+		</div>`;
+	for (const chip of slot.querySelectorAll("[data-cat]")) {
+		chip.addEventListener("click", () => {
+			giftCategory = chip.dataset.cat;
+			renderGiftForm();
+		});
+	}
+	$("giftSend").addEventListener("click", sendGift);
+}
+
+function pendingHtml() {
+	if (!pendingGifts) {
+		return "";
+	}
+	const rows = pendingGifts.map((gift) => `
+		<div class="list-row">
+			<span><b>${gift.amount}×</b></span>
+			<span>${h(gift.item)}${gift.tier ? ` <span class="badge">${h(gift.tier)}</span>` : ""}<div class="hint">${h(gift.category)} · sent ${h(formatWhen(gift.sentAt))}</div></span>
+			<button class="btn btn-sm btn-danger-ghost" data-gift="${h(gift.id)}">Cancel</button>
+		</div>`).join("");
+	return `
+		<div class="section-title">Waiting in their gift box</div>
+		${rows ? `<div class="list" style="margin-bottom:16px">${rows}</div>` : `<div class="hint" style="margin-bottom:16px">Nothing waiting. Delivered gifts leave the box.</div>`}`;
+}
+
+function showPending(gifts) {
+	pendingGifts = gifts ?? [];
+	const slot = $("giftPending");
+	if (!slot) {
+		return;
+	}
+	slot.innerHTML = pendingHtml();
+	for (const button of slot.querySelectorAll("[data-gift]")) {
+		button.addEventListener("click", async () => {
+			try {
+				const result = await api("DELETE", `/api/gifts?${gameQuery()}&userId=${currentPlayer.id}&id=${encodeURIComponent(button.dataset.gift)}`);
+				showPending(result.gifts);
+				toast("Gift cancelled", "success");
+			} catch (error) {
+				toast(error.message, "danger");
+			}
+		});
+	}
+}
+
+async function sendGift() {
+	const amount = Number($("giftAmount").value);
+	if (!(amount >= 1 && amount <= MAX_GIFT_AMOUNT)) {
+		toast(`Send between 1 and ${MAX_GIFT_AMOUNT} at a time`, "danger");
+		return;
+	}
+	const item = $("giftItem").value.trim();
+	if (!item) {
+		$("giftItem").focus();
+		return;
+	}
+	const button = $("giftSend");
+	button.disabled = true;
+	try {
+		const result = await api("POST", `/api/gifts?${gameQuery()}&userId=${currentPlayer.id}`, {
+			category: giftCategory,
+			item,
+			tier: $("giftTier")?.value ?? null,
+			amount,
+		});
+		showPending(result.gifts);
+		toast(`Sent ${amount}× ${item} to @${currentPlayer.name}`, "success");
+	} catch (error) {
+		toast(error.message, "danger");
+	} finally {
+		button.disabled = false;
+	}
+}
+
+function renderGifts(root) {
+	if (!currentGame()?.universeId) {
+		root.innerHTML = `<div class="card">${emptyState("Add the game link first", "Gifts go through the game's own gift box.")}</div>`;
+		return;
+	}
+	root.innerHTML = `
+		<div class="grid-2">
+			<div class="stack">
+				<div class="card">
+					<div class="card-head"><div><h2>Gift a player</h2><div class="hint">Give something through your game's gift box.</div></div></div>
+					${lookupHtml("giftLookup")}
+					<div id="giftPlayer">${currentPlayer ? playerHtml(currentPlayer) : emptyState("No player picked", "Search by username or user ID.")}</div>
+					<div id="giftPending">${pendingHtml()}</div>
+					<div id="giftForm"></div>
+				</div>
+			</div>
+			<div class="stack">
+				${catalogHtml()}
+				<div class="callout callout-info">Needs <code>roblox/UpdateDayGifts.luau</code> in your game. Gifts are claimed safely, so a player never gets one twice.</div>
+			</div>
+		</div>`;
+	bindCatalog(root);
+	bindLookup("giftLookup", (result) => {
+		$("giftPlayer").innerHTML = playerHtml(result.player);
+		showPending(result.gifts);
+		renderGiftForm();
+	});
+	if (pendingGifts) {
+		showPending(pendingGifts);
+	}
+	renderGiftForm();
+}
+
+UD.views.gifts = {
+	label: "Gifts",
+	render: renderGifts,
+};

package/ui/history.js

@@ -0,0 +1,156 @@
+const HISTORY_REFRESH_MS = 10000;
+const HISTORY_KINDS = {
+	step: ["Step", "badge-accent"],
+	sale: ["Price", "badge-success"],
+	reminder: ["Reminder", "badge-warning"],
+	error: ["Problem", "badge-danger"],
+	skip: ["Skipped", ""],
+	info: ["Note", ""],
+};
+const HISTORY_FILTERS = [["all", "All"], ["step", "Steps"], ["sale", "Prices"], ["reminder", "Reminders"], ["error", "Problems"]];
+
+let historyEntries = null;
+let historyScope = "game";
+let historyFilter = "all";
+let historyQuery = "";
+let historyTimer = null;
+
+function historyText(entry) {
+	return entry.text
+		.replace(/^RUN\s+/, "")
+		.replace(/^REMINDER [^:]+: /, "")
+		.replace(/ in Creator Hub now: .*$/, " in Creator Hub")
+		.replace(/^FAILED /, "");
+}
+
+function visibleEntries() {
+	const query = historyQuery.trim().toLowerCase();
+	return (historyEntries ?? []).filter((entry) => {
+		const kindMatch = historyFilter === "all" || entry.kind === historyFilter;
+		const textMatch = !query || `${entry.text} ${entry.game}`.toLowerCase().includes(query);
+		return kindMatch && textMatch;
+	});
+}
+
+function dayLabel(date) {
+	const day = new Date(date);
+	const today = new Date();
+	const yesterday = new Date(Date.now() - 864e5);
+	if (day.toDateString() === today.toDateString()) {
+		return "Today";
+	}
+	if (day.toDateString() === yesterday.toDateString()) {
+		return "Yesterday";
+	}
+	return day.toLocaleDateString(LOCALE, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+}
+
+function historyListHtml() {
+	if (historyEntries === null) {
+		return `<div class="skeleton" style="height:48px;margin-bottom:8px"></div>`.repeat(4);
+	}
+	if (historyEntries.length === 0) {
+		return emptyState("Nothing has run yet", "Everything UpdateDay does is recorded here: each step, every price it changes and puts back, reminders and problems.");
+	}
+	const entries = visibleEntries();
+	if (entries.length === 0) {
+		return emptyState("No matches", "Try another filter or search.");
+	}
+	const groups = new Map();
+	for (const entry of entries) {
+		const label = dayLabel(entry.at);
+		groups.set(label, [...(groups.get(label) ?? []), entry]);
+	}
+	const showGame = historyScope === "all";
+	return [...groups].map(([label, items]) => `
+		<div class="section-title" style="margin-top:14px">${h(label)}</div>
+		<div class="list">${items.map((entry) => {
+			const [kindLabel, tone] = HISTORY_KINDS[entry.kind] ?? HISTORY_KINDS.info;
+			return `
+				<div class="list-row history-row">
+					<span class="hint mono">${h(formatTime(entry.at))}</span>
+					<span style="min-width:0">${h(historyText(entry))}${showGame ? `<div class="hint">${h(entry.game)}</div>` : ""}</span>
+					<span class="badge ${tone}">${kindLabel}</span>
+				</div>`;
+		}).join("")}</div>`).join("");
+}
+
+function csvCell(value) {
+	return `"${String(value).replace(/"/g, '""')}"`;
+}
+
+function downloadHistory() {
+	const rows = [["Time", "Game", "Type", "What happened"], ...visibleEntries().map((entry) => [entry.at, entry.game, HISTORY_KINDS[entry.kind]?.[0] ?? entry.kind, entry.text])];
+	const blob = new Blob([rows.map((row) => row.map(csvCell).join(",")).join("\n")], { type: "text/csv" });
+	const url = URL.createObjectURL(blob);
+	downloadUrl(url);
+	setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+async function loadHistory() {
+	try {
+		const query = historyScope === "game" ? `${gameQuery()}&` : "";
+		historyEntries = (await api("GET", `/api/history?${query}limit=1000`)).entries;
+	} catch (error) {
+		historyEntries = [];
+		toast(error.message, "danger");
+	}
+	const list = $("hiList");
+	if (list) {
+		list.innerHTML = historyListHtml();
+	}
+}
+
+function renderHistory(root) {
+	root.innerHTML = `
+		<div class="card">
+			<div class="items-head">
+				<div><h2>History</h2><div class="hint">Everything UpdateDay did, newest first. Kept in updateday-history.jsonl next to your plan.</div></div>
+				<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+					${UD.draft.games.length > 1 ? segmentedHtml("hiScope", [["game", "This game"], ["all", "All games"]], historyScope) : ""}
+					<button class="btn btn-sm" id="hiCsv">Download CSV</button>
+				</div>
+			</div>
+			<div class="je-bar" style="margin-bottom:6px">
+				<div class="chips">${HISTORY_FILTERS.map(([value, label]) => `<button type="button" class="chip ${value === historyFilter ? "active" : ""}" aria-pressed="${value === historyFilter}" data-filter="${value}">${label}</button>`).join("")}</div>
+				<span class="je-spacer"></span>
+				<input type="search" id="hiSearch" class="je-search" placeholder="Search history" aria-label="Search history" value="${h(historyQuery)}">
+			</div>
+			<div id="hiList">${historyListHtml()}</div>
+		</div>`;
+	bindSegmented(root, "hiScope", (scope) => {
+		historyScope = scope;
+		historyEntries = null;
+		$("hiList").innerHTML = historyListHtml();
+		loadHistory();
+	});
+	for (const chip of root.querySelectorAll("[data-filter]")) {
+		chip.addEventListener("click", () => {
+			historyFilter = chip.dataset.filter;
+			for (const other of root.querySelectorAll("[data-filter]")) {
+				other.classList.toggle("active", other === chip);
+				other.setAttribute("aria-pressed", String(other === chip));
+			}
+			$("hiList").innerHTML = historyListHtml();
+		});
+	}
+	root.querySelector("#hiSearch").addEventListener("input", (event) => {
+		historyQuery = event.target.value;
+		$("hiList").innerHTML = historyListHtml();
+	});
+	root.querySelector("#hiCsv").addEventListener("click", downloadHistory);
+	loadHistory();
+	clearInterval(historyTimer);
+	historyTimer = setInterval(() => {
+		if (UD.view !== "history") {
+			clearInterval(historyTimer);
+			return;
+		}
+		loadHistory();
+	}, HISTORY_REFRESH_MS);
+}
+
+UD.views.history = {
+	label: "History",
+	render: renderHistory,
+};