@seedvault/server 0.1.4 → 0.2.0

package/dist/index.html

@@ -74,6 +74,33 @@
 			cursor: pointer;
 		}
 
+		#menu-toggle {
+			display: none;
+			font-size: 18px;
+			padding: 4px 10px;
+		}
+
+		#nav-close {
+			display: none;
+			float: right;
+			border: none;
+			font-size: 16px;
+			padding: 0 4px;
+			line-height: 1;
+		}
+
+		#backdrop {
+			display: none;
+			position: fixed;
+			inset: 0;
+			background: rgba(0, 0, 0, 0.4);
+			z-index: 90;
+		}
+
+		#backdrop.visible {
+			display: block;
+		}
+
 		.grid {
 			display: flex;
 			gap: 0;
@@ -103,8 +130,32 @@
 		}
 
 		@media (max-width: 600px) {
+			#menu-toggle {
+				display: block;
+			}
+
+			#nav-close {
+				display: block;
+			}
+
 			.grid {
 				flex-direction: column;
+				position: relative;
+			}
+
+			#nav {
+				position: fixed;
+				top: 0;
+				left: -100vw;
+				width: 100vw !important;
+				height: 100%;
+				z-index: 100;
+				background: Canvas;
+				transition: transform 0.2s ease;
+			}
+
+			#nav.open {
+				transform: translateX(100vw);
 			}
 
 			.grid>.panel:first-child {
@@ -178,17 +229,31 @@
 		}
 
 		.tree-row {
-			display: block;
+			display: flex;
+			align-items: baseline;
 			width: 100%;
 			text-align: left;
 			border: none;
 			padding: 4px 8px;
 			white-space: nowrap;
 			overflow: hidden;
-			text-overflow: ellipsis;
 			cursor: pointer;
 		}
 
+		.tree-row .name {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			flex: 1;
+			min-width: 0;
+		}
+
+		.tree-row .ctime {
+			flex-shrink: 0;
+			margin-left: 8px;
+			opacity: 0.45;
+			font-size: 10px;
+		}
+
 		.tree-row:hover {
 			background: color-mix(in srgb, currentColor 8%, transparent);
 		}
@@ -329,18 +394,256 @@
 			font-size: 11px;
 			opacity: 0.6;
 			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+		}
+
+		#status-text {
+			flex: 1;
+		}
+
+		#activity-btn {
+			border: none;
+			font-size: 11px;
+			padding: 0 4px;
+			opacity: 0.6;
+			display: flex;
+			align-items: center;
+			gap: 3px;
+		}
+
+		#activity-btn:hover {
+			opacity: 1;
+		}
+
+		#activity-modal {
+			display: none;
+			position: fixed;
+			inset: 0;
+			z-index: 300;
+		}
+
+		#activity-modal.open {
+			display: flex;
+		}
+
+		#activity-overlay {
+			position: absolute;
+			inset: 0;
+			background: rgba(0, 0, 0, 0.4);
+		}
+
+		#activity-dialog {
+			position: absolute;
+			inset: 0;
+			background: Canvas;
+			color: CanvasText;
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+			z-index: 1;
+		}
+
+		#activity-dialog-head {
+			padding: 8px 12px;
+			border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+			font-weight: bold;
+			font-size: 11px;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+		}
+
+		#activity-dialog-head button {
+			margin-left: auto;
+			border: none;
+			font-size: 16px;
+			padding: 0 4px;
+			line-height: 1;
+		}
+
+		#activity-dialog-body {
+			flex: 1;
+			overflow-y: auto;
+			scrollbar-width: thin;
+			scrollbar-color: color-mix(in srgb, currentColor 20%, transparent) transparent;
+		}
+
+		.activity-list {
+			padding: 16px 0;
+			margin: 0;
+			list-style: none;
+		}
+
+		.activity-item {
+			display: grid;
+			grid-template-columns: 90px 20px 1fr;
+			gap: 0 8px;
+			min-height: 40px;
+		}
+
+		.activity-time-col {
+			text-align: right;
+			padding-top: 6px;
+		}
+
+		.activity-time {
+			font-size: 11px;
+			opacity: 0.7;
+			white-space: nowrap;
+		}
+
+		.activity-date {
+			font-size: 10px;
+			opacity: 0.35;
+		}
+
+		.activity-dot-col {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.activity-dot-col::after {
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			transform: translateX(-50%);
+			background: color-mix(in srgb, currentColor 15%, transparent);
+		}
+
+		.activity-item:first-child .activity-dot-col::after {
+			top: 13px;
+		}
+
+		.activity-item:last-child .activity-dot-col::after {
+			bottom: calc(100% - 14px);
+		}
+
+		.activity-dot {
+			width: 5px;
+			height: 5px;
+			border-radius: 50%;
+			background: CanvasText;
+			opacity: 0.35;
+			flex-shrink: 0;
+			margin-top: 11px;
+			position: relative;
+			z-index: 1;
+		}
+
+		.activity-line {
+			display: none;
+		}
+
+		.activity-content {
+			padding: 6px 0 0;
+			min-width: 0;
+		}
+
+		.activity-action {
+			font-family: ui-monospace, monospace;
+			font-size: 11px;
+		}
+
+		.activity-by {
+			font-size: 11px;
+			opacity: 0.45;
+		}
+
+		.activity-contributor {
+			font-weight: 600;
+			opacity: 1;
+		}
+
+		.activity-detail {
+			margin-top: 2px;
+			font-size: 11px;
+			opacity: 0.45;
+			font-family: ui-monospace, monospace;
+			word-break: break-all;
+		}
+
+		.activity-diff {
+			margin-top: 4px;
+			font-family: ui-monospace, monospace;
+			font-size: 11px;
+			line-height: 1.4;
+			white-space: pre-wrap;
+			word-break: break-all;
+			padding: 4px 6px;
+			background: color-mix(in srgb, currentColor 4%, transparent);
+			border-radius: 3px;
+			overflow-x: auto;
+		}
+
+		.activity-diff .diff-add {
+			color: #22863a;
+		}
+
+		.activity-diff .diff-del {
+			color: #cb2431;
+		}
+
+		.activity-diff .diff-hunk {
+			color: #6f42c1;
+			opacity: 0.7;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			.activity-diff .diff-add {
+				color: #85e89d;
+			}
+
+			.activity-diff .diff-del {
+				color: #f97583;
+			}
+
+			.activity-diff .diff-hunk {
+				color: #b392f0;
+			}
+		}
+
+		.activity-diff-truncated {
+			font-size: 10px;
+			opacity: 0.5;
+			font-style: italic;
+		}
+
+		#activity-load-more {
+			width: 100%;
+			padding: 8px;
+			border: none;
+			border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+			font-size: 11px;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			opacity: 0.6;
+		}
+
+		#activity-load-more:hover {
+			opacity: 1;
+			background: color-mix(in srgb, currentColor 5%, transparent);
 		}
 	</style>
 </head>
 
 <body>
 	<div class="top">
+		<button id="menu-toggle" aria-label="Toggle navigation">&#9776;</button>
 		<input id="token" type="password" placeholder="API key (&quot;sv_...&quot;)" />
 		<button id="connect">Load</button>
 	</div>
+	<div id="backdrop"></div>
 	<div class="grid">
 		<section id="nav" class="panel" style="width:220px">
-			<div class="panel-head">Files</div>
+			<div class="panel-head">Files<button id="nav-close" aria-label="Close navigation">&times;</button></div>
 			<div class="panel-body" id="nav-body" tabindex="0">
 				<ul id="files" class="tree"></ul>
 			</div>
@@ -353,11 +656,22 @@
 			</div>
 		</section>
 	</div>
-	<div id="status"></div>
+	<div id="activity-modal">
+		<div id="activity-overlay"></div>
+		<div id="activity-dialog">
+			<div id="activity-dialog-head">Activity Log<button id="activity-close" aria-label="Close">&times;</button></div>
+			<div id="activity-dialog-body"></div>
+		</div>
+	</div>
+	<div id="status">
+		<span id="status-text"></span>
+		<button id="activity-btn" aria-label="Activity log"><i class="ph ph-pulse"></i> Activity Log</button>
+	</div>
 	<script type="module">
 		const { marked } = await import("https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js");
 		const matter = (await import("https://cdn.jsdelivr.net/npm/gray-matter@4.0.3/+esm")).default;
 		const DOMPurify = (await import("https://cdn.jsdelivr.net/npm/dompurify@3.0.9/+esm")).default;
+		const morphdom = (await import("https://cdn.jsdelivr.net/npm/morphdom@2.7.4/+esm")).default;
 
 		function renderMarkdown(raw) {
 			if (typeof raw !== "string") return "";
@@ -379,12 +693,28 @@
 		const tokenEl = $("token");
 		const filesEl = $("files");
 		const contentEl = $("content");
-		const statusEl = $("status");
+		const statusTextEl = $("status-text");
+		const backdropEl = $("backdrop");
+		const menuToggleEl = $("menu-toggle");
+
+		function closeSidebar() {
+			$("nav").classList.remove("open");
+			backdropEl.classList.remove("visible");
+		}
+
+		menuToggleEl.addEventListener("click", () => {
+			const nav = $("nav");
+			nav.classList.toggle("open");
+			backdropEl.classList.toggle("visible", nav.classList.contains("open"));
+		});
+
+		backdropEl.addEventListener("click", closeSidebar);
+		$("nav-close").addEventListener("click", closeSidebar);
 
 		let token = localStorage.getItem("sv-token") || "";
 		tokenEl.value = token;
 
-		function status(msg) { statusEl.textContent = msg; }
+		function status(msg) { statusTextEl.textContent = msg; }
 
 		async function api(url, opts = {}) {
 			const res = await fetch(url, {
@@ -404,6 +734,15 @@
 		const savedContributor = localStorage.getItem("sv-contributor") || "";
 		const savedFile = localStorage.getItem("sv-file") || "";
 
+		function getExpandedKeys() {
+			try {
+				return new Set(JSON.parse(localStorage.getItem("sv-expanded") || "[]"));
+			} catch { return new Set(); }
+		}
+		function saveExpandedKeys(keys) {
+			localStorage.setItem("sv-expanded", JSON.stringify([...keys]));
+		}
+
 		function buildTree(fileEntries) {
 			const root = {};
 			for (const f of fileEntries) {
@@ -418,8 +757,18 @@
 			return root;
 		}
 
+		function formatCtime(iso) {
+			if (!iso) return "";
+			const d = new Date(iso);
+			const mon = d.toLocaleString(undefined, { month: "short" });
+			const day = d.getDate();
+			const now = new Date();
+			if (d.getFullYear() === now.getFullYear()) return mon + " " + day;
+			return mon + " " + day + ", " + d.getFullYear();
+		}
+
 		function getNewestCtime(node) {
-			if (node.__file) return node.__file.originCtime || node.__file.serverCreatedAt || "";
+			if (node.__file) return node.__file.createdAt || "";
 			let newest = "";
 			for (const key of Object.keys(node)) {
 				if (key === "__file") continue;
@@ -438,7 +787,7 @@
 			return count;
 		}
 
-		function renderTree(node, parentUl, username, depth) {
+		function renderTree(node, parentUl, username, depth, pathPrefix = "") {
 			const keys = Object.keys(node).filter((k) => k !== "__file").sort((a, b) => {
 				const aDir = Object.keys(node[a]).some((k) => k !== "__file");
 				const bDir = Object.keys(node[b]).some((k) => k !== "__file");
@@ -450,26 +799,30 @@
 			});
 			for (const key of keys) {
 				const child = node[key];
+				const nodePath = pathPrefix ? pathPrefix + "/" + key : key;
 				const isFile = child.__file && Object.keys(child).length === 1;
 				const li = document.createElement("li");
+				li.dataset.key = nodePath;
 				const row = document.createElement("div");
 				row.className = "tree-row";
 				row.style.paddingLeft = (depth * 12 + 8) + "px";
 
 				if (isFile) {
-					row.innerHTML = '<span class="arrow">&nbsp;</span><i class="ph ph-file-text"></i> ' + key;
+					const ctime = child.__file.createdAt || "";
+					row.innerHTML = '<span class="name"><span class="arrow">&nbsp;</span><i class="ph ph-file-text"></i> ' + key + '</span><span class="ctime">' + formatCtime(ctime) + '</span>';
 					row.dataset.path = child.__file.path;
 					row.dataset.contributor = username;
-					row.onclick = () => loadContent(username, child.__file.path, row);
+					row.dataset.action = "open";
 				} else {
 					const sub = document.createElement("ul");
 					const fileCount = countFiles(child);
-					row.innerHTML = '<span class="arrow">&#9660;</span><i class="ph ph-folder"></i> ' + key + ' <span style="opacity:0.5">(' + fileCount + ')</span>';
-					row.onclick = () => {
-						sub.classList.toggle("collapsed");
-						row.querySelector(".arrow").innerHTML = sub.classList.contains("collapsed") ? "&#9654;" : "&#9660;";
-					};
-					renderTree(child, sub, username, depth + 1);
+					const expanded = getExpandedKeys().has(username + ":" + nodePath);
+					const arrow = expanded ? "&#9660;" : "&#9654;";
+					if (!expanded) sub.classList.add("collapsed");
+					row.innerHTML = '<span class="name"><span class="arrow">' + arrow + '</span><i class="ph ph-folder"></i> ' + key + ' <span style="opacity:0.5">(' + fileCount + ')</span></span>';
+					row.dataset.action = "toggle";
+					row.dataset.toggleKey = username + ":" + nodePath;
+					renderTree(child, sub, username, depth + 1, nodePath);
 					li.appendChild(row);
 					li.appendChild(sub);
 					parentUl.appendChild(li);
@@ -530,9 +883,46 @@
 			);
 		}
 
+		filesEl.addEventListener("click", (e) => {
+			const row = e.target.closest(".tree-row");
+			if (!row) return;
+			const action = row.dataset.action;
+			if (action === "open") {
+				loadContent(row.dataset.contributor, row.dataset.path, row);
+			} else if (action === "toggle") {
+				const sub = row.nextElementSibling;
+				if (!sub) return;
+				sub.classList.toggle("collapsed");
+				const arrow = row.querySelector(".arrow");
+				if (arrow) arrow.innerHTML = sub.classList.contains("collapsed") ? "&#9654;" : "&#9660;";
+				const keys = getExpandedKeys();
+				const toggleKey = row.dataset.toggleKey;
+				if (toggleKey) {
+					if (sub.classList.contains("collapsed")) keys.delete(toggleKey);
+					else keys.add(toggleKey);
+					saveExpandedKeys(keys);
+				}
+			} else if (action === "contributor") {
+				const sub = row.nextElementSibling;
+				if (!sub) return;
+				const collapsed = sub.classList.contains("collapsed");
+				const keys = getExpandedKeys();
+				const toggleKey = "contributor:" + row.dataset.contributor;
+				if (collapsed) {
+					sub.classList.remove("collapsed");
+					row.querySelector(".arrow").innerHTML = "&#9660;";
+					keys.add(toggleKey);
+				} else {
+					sub.classList.add("collapsed");
+					row.querySelector(".arrow").innerHTML = "&#9654;";
+					keys.delete(toggleKey);
+				}
+				saveExpandedKeys(keys);
+			}
+		});
+
 		async function loadContributorFiles(username, sub, opts = {}) {
 			const silent = !!opts.silent;
-			sub.innerHTML = "";
 			if (!silent) status("Loading files...");
 			const { files } = await (await api("/v1/files?prefix=" + encodeURIComponent(username + "/"))).json();
 			const prefix = username + "/";
@@ -540,14 +930,24 @@
 				...f,
 				path: f.path.startsWith(prefix) ? f.path.slice(prefix.length) : f.path,
 			})));
-			renderTree(tree, sub, username, 1);
+			const tmp = document.createElement("ul");
+			renderTree(tree, tmp, username, 1);
+			if (sub.hasChildNodes()) {
+				morphdom(sub, tmp, {
+					childrenOnly: true,
+					getNodeKey(node) {
+						return node.dataset?.key || "";
+					},
+				});
+			} else {
+				sub.append(...tmp.childNodes);
+			}
 			markActiveRow();
 			if (!silent) status(files.length + " file(s)");
-			// Update contributor row with file count
 			const row = sub.parentElement && sub.parentElement.querySelector(".tree-row");
 			if (row) {
 				const arrow = row.querySelector(".arrow").outerHTML;
-				row.innerHTML = arrow + '<i class="ph ph-user"></i> ' + username + ' <span style="opacity:0.5">(' + files.length + ')</span>';
+				row.innerHTML = '<span class="name">' + arrow + '<i class="ph ph-user"></i> ' + username + ' <span style="opacity:0.5">(' + files.length + ')</span></span>';
 			}
 		}
 
@@ -556,6 +956,7 @@
 			contentEl.innerHTML = "";
 			status("Loading contributors...");
 			const { contributors } = await (await api("/v1/contributors")).json();
+			const expandedKeys = getExpandedKeys();
 
 			for (const b of contributors) {
 				const li = document.createElement("li");
@@ -564,40 +965,28 @@
 				row.style.paddingLeft = "8px";
 				const sub = document.createElement("ul");
 				sub.dataset.contributor = b.username;
-				sub.dataset.loaded = "false";
-				let loaded = false;
-				row.innerHTML = '<span class="arrow">&#9654;</span><i class="ph ph-user"></i> ' + b.username;
-				row.onclick = async () => {
-					const collapsed = sub.classList.contains("collapsed") || !sub.hasChildNodes();
-					if (collapsed) {
-						sub.classList.remove("collapsed");
-						row.querySelector(".arrow").innerHTML = "&#9660;";
-						if (!loaded) {
-							loaded = true;
-							sub.dataset.loaded = "true";
-							await loadContributorFiles(b.username, sub);
-						}
-					} else {
-						sub.classList.add("collapsed");
-						row.querySelector(".arrow").innerHTML = "&#9654;";
-					}
-				};
+				sub.dataset.loaded = "true";
+				const expanded = expandedKeys.has("contributor:" + b.username);
+				if (!expanded) sub.classList.add("collapsed");
+				const arrow = expanded ? "&#9660;" : "&#9654;";
+				row.innerHTML = '<span class="name"><span class="arrow">' + arrow + '</span><i class="ph ph-user"></i> ' + b.username + '</span>';
+				row.dataset.action = "contributor";
+				row.dataset.contributor = b.username;
 				li.appendChild(row);
 				li.appendChild(sub);
 				filesEl.appendChild(li);
+			}
 
-				if (b.username === savedContributor) {
-					sub.classList.remove("collapsed");
-					row.querySelector(".arrow").innerHTML = "&#9660;";
-					loaded = true;
-					sub.dataset.loaded = "true";
-					await loadContributorFiles(b.username, sub);
-					if (savedFile) {
-						const match = filesEl.querySelector('[data-path="' + CSS.escape(savedFile) + '"]');
-						if (match) await loadContent(b.username, savedFile, match);
-					}
-				}
+			await Promise.all(contributors.map((b) => {
+				const sub = getLoadedContributorList(b.username);
+				return sub ? loadContributorFiles(b.username, sub, { silent: true }) : null;
+			}));
+
+			if (savedFile && savedContributor) {
+				const match = filesEl.querySelector('[data-path="' + CSS.escape(savedFile) + '"]');
+				if (match) await loadContent(savedContributor, savedFile, match);
 			}
+
 			status(contributors.length + " contributor(s)");
 		}
 
@@ -607,12 +996,10 @@
 			row.scrollIntoView({ block: "nearest", behavior: "smooth" });
 			localStorage.setItem("sv-contributor", username);
 			localStorage.setItem("sv-file", path);
+			closeSidebar();
 			status("Loading " + path + "...");
-			const res = await api("/v1/sh", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ cmd: 'cat "' + username + "/" + path + '"' }),
-			});
+			const encodedPath = path.split("/").map(encodeURIComponent).join("/");
+			const res = await api("/v1/files/" + encodeURIComponent(username) + "/" + encodedPath);
 			const text = await res.text();
 			contentEl.innerHTML = renderMarkdown(text);
 			contentEl.parentElement.scrollTop = 0;
@@ -656,11 +1043,8 @@
 				scheduleContributorReload(contributor);
 				// If this file is currently open, reload its content
 				if (localStorage.getItem("sv-file") === path && localStorage.getItem("sv-contributor") === contributor) {
-					api("/v1/sh", {
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify({ cmd: 'cat "' + contributor + "/" + path + '"' }),
-					})
+					const encodedPath = path.split("/").map(encodeURIComponent).join("/");
+					api("/v1/files/" + encodeURIComponent(contributor) + "/" + encodedPath)
 						.then((res) => res.text())
 						.then((text) => { contentEl.innerHTML = renderMarkdown(text); });
 				}
@@ -676,6 +1060,10 @@
 				}
 			});
 
+			evtSource.addEventListener("activity", (e) => {
+				handleActivitySSE(e);
+			});
+
 			evtSource.onerror = () => {
 				// EventSource auto-reconnects
 			};
@@ -717,6 +1105,176 @@
 			document.addEventListener("mousemove", onMove);
 			document.addEventListener("mouseup", onUp);
 		});
+
+		// --- Activity modal ---
+
+		const activityModal = $("activity-modal");
+		const activityBody = $("activity-dialog-body");
+		const ACTIVITY_PAGE_SIZE = 1000;
+		let activitySeenIds = new Set();
+		let activityOffset = 0;
+		let activityHasMore = false;
+
+		function openActivityModal() {
+			activitySeenIds = new Set();
+			activityOffset = 0;
+			activityBody.innerHTML = "";
+			activityModal.classList.add("open");
+			loadActivityPage();
+		}
+
+		function closeActivityModal() {
+			activityModal.classList.remove("open");
+		}
+
+		function handleActivitySSE(ev) {
+			if (!activityModal.classList.contains("open")) return;
+			const event = JSON.parse(ev.detail || ev.data);
+			if (activitySeenIds.has(event.id)) return;
+			activitySeenIds.add(event.id);
+			activityOffset++;
+			let list = activityBody.querySelector(".activity-list");
+			if (!list) {
+				const empty = activityBody.querySelector("p");
+				if (empty) empty.remove();
+				list = document.createElement("ul");
+				list.className = "activity-list";
+				activityBody.prepend(list);
+			}
+			list.insertAdjacentHTML("afterbegin", renderActivityItems([event]));
+		}
+
+		$("activity-btn").addEventListener("click", openActivityModal);
+		$("activity-close").addEventListener("click", closeActivityModal);
+		$("activity-overlay").addEventListener("click", closeActivityModal);
+
+		document.addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && activityModal.classList.contains("open")) {
+				closeActivityModal();
+			}
+		});
+
+		function formatActivityTime(iso) {
+			if (!iso) return { time: "", date: "" };
+			const d = new Date(iso);
+			const hh = String(d.getHours()).padStart(2, "0");
+			const mm = String(d.getMinutes()).padStart(2, "0");
+			const ss = String(d.getSeconds()).padStart(2, "0");
+			const ms = String(d.getMilliseconds()).padStart(3, "0");
+			const mon = d.toLocaleString(undefined, { month: "short" });
+			const day = d.getDate();
+			const yr = d.getFullYear();
+			const now = new Date();
+			const dateStr = yr === now.getFullYear()
+				? mon + " " + day
+				: mon + " " + day + ", " + yr;
+			return {
+				time: hh + ":" + mm + ":" + ss + "." + ms,
+				date: dateStr,
+			};
+		}
+
+		function parseDetail(raw) {
+			if (!raw) return null;
+			try { return JSON.parse(raw); } catch { return null; }
+		}
+
+		function esc(str) {
+			return String(str)
+				.replace(/&/g, "&amp;")
+				.replace(/</g, "&lt;")
+				.replace(/>/g, "&gt;")
+				.replace(/"/g, "&quot;");
+		}
+
+		function formatDetail(detail) {
+			if (!detail || typeof detail !== "object") return "";
+			return Object.entries(detail)
+				.filter(([k]) => k !== "diff" && k !== "diff_truncated")
+				.map(([k, v]) => k + "=" + v)
+				.join("  ");
+		}
+
+		function renderDiff(raw) {
+			if (!raw) return "";
+			const lines = raw.split("\n");
+			const htmlLines = lines.map((line) => {
+				const escaped = esc(line);
+				if (line.startsWith("@@")) return '<span class="diff-hunk">' + escaped + '</span>';
+				if (line.startsWith("+")) return '<span class="diff-add">' + escaped + '</span>';
+				if (line.startsWith("-")) return '<span class="diff-del">' + escaped + '</span>';
+				return escaped;
+			});
+			return htmlLines.join("\n");
+		}
+
+		function renderActivityItems(events) {
+			return events.map((ev) => {
+				const { time, date } = formatActivityTime(ev.created_at);
+				const parsed = parseDetail(ev.detail);
+				const detail = formatDetail(parsed);
+				const diff = parsed?.diff || null;
+				const truncated = parsed?.diff_truncated || false;
+
+				let content = '<span class="activity-action">' + esc(ev.action) + '</span>' +
+					' <span class="activity-by">by</span>' +
+					' <span class="activity-contributor">' + esc(ev.contributor) + '</span>';
+				if (detail) content += '<div class="activity-detail">' + esc(detail) + '</div>';
+				if (diff) {
+					content += '<div class="activity-diff">' + renderDiff(diff) + '</div>';
+					if (truncated) content += '<span class="activity-diff-truncated">diff truncated</span>';
+				}
+
+				return '<li class="activity-item">' +
+					'<div class="activity-time-col">' +
+						'<div class="activity-time">' + time + '</div>' +
+						'<div class="activity-date">' + date + '</div>' +
+					'</div>' +
+					'<div class="activity-dot-col">' +
+						'<div class="activity-dot"></div>' +
+						'<div class="activity-line"></div>' +
+					'</div>' +
+					'<div class="activity-content">' + content + '</div>' +
+					'</li>';
+			}).join("");
+		}
+
+		async function loadActivityPage() {
+			const existingBtn = activityBody.querySelector("#activity-load-more");
+			if (existingBtn) existingBtn.remove();
+
+			const limit = ACTIVITY_PAGE_SIZE;
+			const offset = activityOffset;
+			const url = "/v1/activity?limit=" + (limit + 1) + "&offset=" + offset;
+			const { events } = await (await api(url)).json();
+
+			activityHasMore = events.length > limit;
+			const page = activityHasMore ? events.slice(0, limit) : events;
+			for (const ev of page) activitySeenIds.add(ev.id);
+			activityOffset += page.length;
+
+			let list = activityBody.querySelector(".activity-list");
+			if (!list) {
+				list = document.createElement("ul");
+				list.className = "activity-list";
+				activityBody.appendChild(list);
+			}
+
+			if (activitySeenIds.size === 0) {
+				activityBody.innerHTML = '<p style="padding:12px;opacity:0.5;font-size:12px">No activity.</p>';
+				return;
+			}
+
+			list.insertAdjacentHTML("beforeend", renderActivityItems(page));
+
+			if (activityHasMore) {
+				const btn = document.createElement("button");
+				btn.id = "activity-load-more";
+				btn.textContent = "Load more";
+				btn.addEventListener("click", () => loadActivityPage());
+				activityBody.appendChild(btn);
+			}
+		}
 	</script>
 </body>