-
- ${titleHtml(pull.title)} - #${pull.number} -
+ ${pageTitleHtml(pull.title, pull.number, pull.url)}
@@ -3255,19 +3536,23 @@ async function renderPull(route, sequence, { force = false } = {}) {
return;
}
- loadingView();
+ const refocus = Boolean(
+ document.activeElement && view.contains(document.activeElement),
+ );
+ pullLoadingView(pullNumber);
const [payload, cache] = await Promise.all([
requestPullPayload(requestPath, { force }),
api("/api/cache"),
]);
if (sequence !== renderSequence) return;
renderPullPayload(repository, pullNumber, payload, cache);
+ if (refocus) view.querySelector("[data-refresh-view]")?.focus();
}
function fileIconName(kind) {
if (kind === "asciinema") return "terminal";
if (kind === "html") return "browser";
- if (kind === "image") return "file-media";
+ if (kind === "image" || kind === "video") return "file-media";
if (kind === "markdown") return "markdown";
if (kind === "trx") return "check-circle";
if (kind === "json" || kind === "text" || kind === "xml") return "file-code";
@@ -3276,7 +3561,14 @@ function fileIconName(kind) {
return "file-binary";
}
+function reportModule(preview) {
+ return preview?.dataset.junit ? JunitPreview : TrxPreview;
+}
+
function artifactEntryKind(entry) {
+ if (/\.(?:webm|mp4|m4v|mov)$/i.test(String(entry.path ?? entry.name ?? ""))) {
+ return "video";
+ }
if (/\.trx$/i.test(String(entry.path ?? entry.name ?? ""))) {
return "trx";
}
@@ -3905,6 +4197,115 @@ function stepPlayerTextSize(direction) {
}
}
+let rawRequestToken = 0;
+let previewToken = 0;
+
+const reportViewStates = new Map();
+
+function reportStateKey(artifact, path) {
+ return `${artifact.id}\u0000${path}`;
+}
+
+function captureReportState(artifact, path) {
+ const preview = document.getElementById("preview-content");
+ const report = preview?.querySelector(".trx-preview");
+ if (!report) return;
+ const details = [...report.querySelectorAll("details")];
+ reportViewStates.set(reportStateKey(artifact, path), {
+ query: report.querySelector("[data-trx-search-input]")?.value ?? "",
+ filter: report.querySelector('[data-trx-filter][aria-pressed="true"]')?.dataset.trxFilter ?? "all",
+ open: details.map((item) => item.open),
+ scroll: preview.scrollTop,
+ });
+}
+
+function restoreReportState(artifact, path, preview) {
+ const state = reportViewStates.get(reportStateKey(artifact, path));
+ const report = preview.querySelector(".trx-preview");
+ if (!state || !report) return;
+ const input = report.querySelector("[data-trx-search-input]");
+ if (input) input.value = state.query;
+ for (const button of report.querySelectorAll("[data-trx-filter]")) {
+ button.setAttribute("aria-pressed", String(button.dataset.trxFilter === state.filter));
+ }
+ [...report.querySelectorAll("details")].forEach((item, index) => {
+ if (index < state.open.length) item.open = state.open[index];
+ });
+ reportModule(report).applyFilters(report);
+ preview.scrollTop = state.scroll;
+}
+
+function syncPreviewModeControl() {
+ const raw = currentArtifact?.rawMode === true;
+ for (const button of document.querySelectorAll("[data-preview-mode]")) {
+ const active = (button.dataset.previewMode === "raw") === raw;
+ button.setAttribute("aria-pressed", String(active));
+ button.classList.toggle("is-active", active);
+ }
+}
+
+async function setPreviewMode(mode) {
+ const artifact = currentArtifact;
+ if (!artifact?.selectedPath) return;
+ const raw = mode === "raw";
+ if ((artifact.rawMode === true) === raw) return;
+ if (raw) captureReportState(artifact, artifact.selectedPath);
+ artifact.rawMode = raw;
+ history.replaceState(
+ null,
+ "",
+ artifactHash(artifact.repository, artifact.pullNumber, artifact.id, artifact.selectedPath, raw),
+ );
+ navHistory.record();
+ const entry = artifact.analysis.entries.find((item) => item.path === artifact.selectedPath);
+ if (entry) await previewArtifactFile(entry, renderSequence);
+}
+
+async function renderRawPreview(entry, preview, sequence) {
+ const artifact = currentArtifact;
+ const token = ++rawRequestToken;
+ const stale = () =>
+ token !== rawRequestToken ||
+ sequence !== renderSequence ||
+ currentArtifact !== artifact ||
+ artifact.selectedPath !== entry.path ||
+ artifact.rawMode !== true;
+ preview.innerHTML = ``;
+ let result;
+ try {
+ result = await api(`/api/artifacts/${artifact.id}/raw?path=${encodeURIComponent(entry.path)}`);
+ } catch (error) {
+ if (stale()) return;
+ const box = document.createElement("div");
+ box.className = "preview-error";
+ box.setAttribute("role", "alert");
+ box.textContent = `Could not read the raw bytes: ${error instanceof Error ? error.message : String(error)}. Use Download to get the original file.`;
+ preview.replaceChildren(box);
+ return;
+ }
+ if (stale()) return;
+ const wrap = document.createElement("div");
+ wrap.className = "raw-view";
+ wrap.dataset.rawMode = result.mode;
+ const note = document.createElement("p");
+ note.className = "raw-note";
+ if (result.mode === "unsupported") {
+ note.textContent = result.reason || "These bytes cannot be inspected safely. Download the original artifact ZIP instead.";
+ wrap.append(note);
+ } else {
+ const parts = [formatBytes(result.size)];
+ if (result.encoding) parts.push(result.encoding);
+ if (result.truncated) parts.push(`partial: showing the first ${formatBytes(result.shown)}; Download has the full file`);
+ note.textContent = [parts.join(" · "), result.note].filter(Boolean).join(" — ");
+ const pre = document.createElement("pre");
+ pre.className = "raw-content";
+ pre.tabIndex = 0;
+ pre.textContent = result.mode === "empty" ? "(empty file)" : result.content;
+ wrap.append(note, pre);
+ }
+ preview.replaceChildren(wrap);
+}
+
async function previewArtifactFile(entry, sequence) {
disposePlayer();
const artifact = currentArtifact;
@@ -3923,6 +4324,21 @@ async function previewArtifactFile(entry, sequence) {
? `Download ${entry.path}`
: "This ZIP entry cannot be extracted safely; download the original artifact.";
downloadLink.hidden = false;
+ const browserAction = document.getElementById("preview-open-browser");
+ if (browserAction) browserAction.hidden = true;
+ syncPreviewModeControl(entry);
+ const token = ++previewToken;
+ const rawAtStart = artifact.rawMode === true;
+ const superseded = () =>
+ token !== previewToken ||
+ sequence !== renderSequence ||
+ currentArtifact !== artifact ||
+ artifact.selectedPath !== entry.path ||
+ (artifact.rawMode === true) !== rawAtStart;
+ if (rawAtStart) {
+ await renderRawPreview(entry, preview, sequence);
+ return;
+ }
preview.innerHTML = `
`;
} catch (error) {
+ if (superseded()) return;
preview.innerHTML = `
@@ -3938,7 +4354,7 @@ async function previewArtifactFile(entry, sequence) {
const result = await api(
`/api/artifacts/${artifact.id}/preview-url?path=${encodeURIComponent(entry.path)}&theme=${theme}`,
);
- if (sequence !== renderSequence || currentArtifact?.selectedPath !== entry.path) return;
+ if (superseded()) return;
// The preview uses a dedicated loopback origin, so storage access remains isolated from the canvas.
preview.innerHTML = `
`;
+ const openInBrowser = document.getElementById("preview-open-browser");
+ if (openInBrowser) {
+ openInBrowser.title = "Preview at mobile, tablet or desktop sizes with zoom, history and screenshots";
+ openInBrowser.href = browserHash({ url: result.url, preset: "desktop" });
+ openInBrowser.onclick = () => sessionStorage.setItem("pae.shareRoute", location.hash.replace(/([?&])v=[^&]*&?/, "$1").replace(/[?&]$/, ""));
+ openInBrowser.hidden = false;
+ }
const frame = preview.querySelector("iframe[data-theme-aware-preview]");
if (frame) {
frame.style.colorScheme = theme;
@@ -3983,9 +4406,19 @@ async function previewArtifactFile(entry, sequence) {
const result = await api(
`/api/artifacts/${artifact.id}/text?path=${encodeURIComponent(entry.path)}`,
);
- if (sequence !== renderSequence || currentArtifact?.selectedPath !== entry.path) return;
+ if (superseded()) return;
if (entryKind === "trx") {
TrxPreview.render(result.content, preview, { highlightXml });
+ restoreReportState(artifact, entry.path, preview);
+ return;
+ }
+ if (entryKind === "xml" && JunitPreview.detect(result.content)) {
+ JunitPreview.render(result.content, preview, { highlightXml });
+ restoreReportState(artifact, entry.path, preview);
+ return;
+ }
+ if (entryKind === "markdown" && window.MarkdownPreview) {
+ window.MarkdownPreview.render(result.content, preview);
return;
}
let content = result.content;
@@ -4004,6 +4437,47 @@ async function previewArtifactFile(entry, sequence) {
return;
}
+ if (entryKind === "video") {
+ const src = encodedEntryUrl(artifact.id, entry.path);
+ const download = encodedEntryUrl(artifact.id, entry.path, true);
+ preview.innerHTML = `
+
+
+
`;
+ const video = preview.querySelector("video");
+ const ext = (entry.path.match(/\.([a-z0-9]+)$/i)?.[1] ?? "video").toLocaleLowerCase();
+ video.addEventListener("error", async () => {
+ const code = video.error?.code;
+ if (code === 1) return;
+ let detail = `Your browser could not decode this .${ext} file. Support depends on the container and codec (for example H.264, HEVC, VP8/VP9 or AV1); WebM and MP4 are most widely supported and QuickTime MOV often is not. Download it to play it locally.`;
+ if (code === 2 || code === 4) {
+ try {
+ const probe = await fetch(src, { headers: { Range: "bytes=0-0" } });
+ if (!probe.ok) {
+ detail = `The video could not be loaded (HTTP ${probe.status}). The artifact may have failed integrity verification or the connection was interrupted. Retry, or download the artifact.`;
+ } else if (code === 2) {
+ detail = "The network connection was interrupted while loading the video. Retry, or download it to play it locally.";
+ }
+ } catch {
+ detail = "The video could not be loaded because the preview server was unreachable. Retry, or download the artifact.";
+ }
+ }
+ if (!video.isConnected || !preview.contains(video)) return;
+ const container = preview.querySelector(".video-preview-error");
+ const detailNode = preview.querySelector("[data-video-error-detail]");
+ if (!container || !detailNode) return;
+ detailNode.textContent = detail;
+ container.hidden = false;
+ video.hidden = true;
+ });
+ return;
+ }
+
preview.innerHTML = `
+ This video can't be played here.
+
+ ${icon("download")} Download video
+
+
@@ -4014,6 +4488,7 @@ async function previewArtifactFile(entry, sequence) {
Preview failed
@@ -4096,8 +4571,10 @@ async function selectArtifactFile(path, updateHash = true) {
currentArtifact.pullNumber,
currentArtifact.id,
path,
+ currentArtifact.rawMode === true,
),
);
+ navHistory.record();
}
await previewArtifactFile(entry, renderSequence);
}
@@ -4158,6 +4635,7 @@ async function renderArtifact(route, sequence) {
analysis,
fileTree: createArtifactFileTreeState(analysis.entries, preferredPath),
selectedPath: preferredPath,
+ rawMode: route.raw === true && Boolean(route.filePath),
};
setBreadcrumbs(artifactBreadcrumbItems(currentArtifact, preferredPath));
const primary = analysis.primary;
@@ -4213,6 +4691,11 @@ async function renderArtifact(route, sequence) {
>${icon(bootstrapState.prefs.explorer?.sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse")}
${icon("eye")}
${preferredPath ? escapeHtml(preferredPath) : "Select a file"}
+ ${icon("browser")} Browser view
+
+
+
+
${icon("download")} Download
@@ -4477,6 +4960,7 @@ async function renderRoute({ force = false } = {}) {
currentArtifact = null;
currentPullContext = null;
const sequence = ++renderSequence;
+ view.removeAttribute("aria-busy");
const route = parseRoute();
accountButton.classList.toggle("is-active", route.name === "accounts");
try {
@@ -4492,6 +4976,13 @@ async function renderRoute({ force = false } = {}) {
await renderArtifact(route, sequence);
} else if (route.name === "cache") await renderCache(sequence);
else if (route.name === "accounts") await renderAccountsPage(sequence);
+ else if (route.name === "issue") await renderIssue(route, sequence);
+ else if (route.name === "docs") renderDocs(route);
+ else if (route.name === "browser") {
+ setBreadcrumbs([{ label: "Browser view" }]);
+ renderBrowser(route);
+ }
+ if (route.name !== "browser") disposeBrowser();
} catch (error) {
if (sequence === renderSequence) renderError(error);
}
@@ -4526,6 +5017,7 @@ function routeFromInput(value) {
}
async function navigateToRepository(value) {
+ if (!isPlainRepositoryInput(value) && (await navigateNaturalLanguage(value))) return;
const target = repositoryTargetFromInput(value);
const searchIcon = repositoryCombobox.querySelector(".repository-search-icon");
repositoryInput.readOnly = true;
@@ -4588,10 +5080,14 @@ async function inspectArtifactButton(button) {
for (const control of controls) control.disabled = true;
statusButton.setAttribute("aria-label", "Downloading artifact");
try {
- await api("/api/artifacts/inspect", {
+ const started = await api("/api/artifacts/inspect", {
method: "POST",
body: { artifactId, repository },
});
+ const finalJob = await waitForJob(started.job.id);
+ if (finalJob.status !== "succeeded") {
+ throw new Error(finalJob.error || `Artifact job ${finalJob.status}.`);
+ }
updateCacheHeader(await api("/api/cache"));
artifactDownloadProgress.delete(String(artifactId));
location.hash = artifactHash(repository, pullNumber, artifactId);
@@ -4842,7 +5338,7 @@ view.addEventListener("submit", (event) => {
view.addEventListener("input", (event) => {
if (event.target.matches("[data-trx-search-input]")) {
- TrxPreview.applyFilters(event.target.closest(".trx-preview"));
+ reportModule(event.target.closest(".trx-preview")).applyFilters(event.target.closest(".trx-preview"));
return;
}
if (event.target.id === "pull-query") {
@@ -4869,12 +5365,22 @@ view.addEventListener("input", (event) => {
});
view.addEventListener("click", (event) => {
+ const modeButton = event.target.closest("[data-preview-mode]");
+ if (modeButton) {
+ event.preventDefault();
+ void setPreviewMode(modeButton.dataset.previewMode);
+ return;
+ }
const trxView = event.target.closest("[data-trx-view]");
if (trxView) {
event.preventDefault();
const preview = trxView.closest(".trx-preview");
const viewName = trxView.dataset.trxView;
- TrxPreview.showView(preview, viewName);
+ if (viewName === "raw" && currentArtifact?.selectedPath) {
+ void setPreviewMode("raw");
+ return;
+ }
+ reportModule(preview).showView(preview, viewName);
if (viewName === "structured") {
preview.querySelector("[data-trx-search-input]")?.focus();
}
@@ -4887,7 +5393,7 @@ view.addEventListener("click", (event) => {
for (const button of preview.querySelectorAll("[data-trx-filter]")) {
button.setAttribute("aria-pressed", String(button === trxFilter));
}
- TrxPreview.applyFilters(preview);
+ reportModule(preview).applyFilters(preview);
return;
}
const pullQuerySuggestion = event.target.closest("[data-pull-query-suggestion]");
@@ -5166,6 +5672,12 @@ view.addEventListener("click", (event) => {
void clearCache();
return;
}
+ const rerunButton = event.target.closest("[data-rerun-run]");
+ if (rerunButton) {
+ event.preventDefault();
+ void openRerunDialog(rerunButton);
+ return;
+ }
const refreshButton = event.target.closest("[data-refresh-view]");
if (refreshButton) {
event.preventDefault();
@@ -5292,13 +5804,13 @@ view.addEventListener("keydown", (event) => {
openPullSignal.focus();
return;
}
- if (event.key === "Escape" && !document.getElementById("pull-author-panel")?.hidden) {
+ if (event.key === "Escape" && !document.getElementById("pull-author-panel")?.hidden === false) {
event.preventDefault();
setPullAuthorPanelOpen(false);
document.querySelector("[data-toggle-pull-author]")?.focus();
return;
}
- if (event.key === "Escape" && !document.getElementById("pull-state-panel")?.hidden) {
+ if (event.key === "Escape" && !document.getElementById("pull-state-panel")?.hidden === false) {
event.preventDefault();
setPullStatePanelOpen(false);
document.querySelector("[data-toggle-pull-state]")?.focus();
@@ -5307,11 +5819,14 @@ view.addEventListener("keydown", (event) => {
});
window.addEventListener("hashchange", () => {
+ navHistory.record();
void renderRoute();
});
async function initialize() {
try {
+ // Record the landing route before any await so early navigation cannot skip it.
+ if (location.hash && location.hash !== "#/") navHistory.record();
installPreviewThemeSync();
bootstrapState = await api("/api/bootstrap");
repositoryInput.value = bootstrapState.prefs.repository;
@@ -5334,24 +5849,28 @@ async function initialize() {
events.addEventListener("refresh", () => {
void renderRoute();
});
+ events.addEventListener("job", (event) => handleJobEvent(JSON.parse(event.data)));
+ events.addEventListener("snapshot", (event) => handleSnapshotEvent(JSON.parse(event.data)));
+ events.addEventListener("restart", () => handleRestartEvent());
+ events.addEventListener("browser-command", (event) =>
+ handleBrowserCommand(JSON.parse(event.data)),
+ );
+ events.addEventListener("error", () => setConnectionState(false));
+ events.addEventListener("open", () => setConnectionState(true));
+ installJobPanel();
+ installGlobalShortcuts();
if (!location.hash || location.hash === "#/") {
const input = bootstrapState.initialInput ?? {};
- if (typeof input.url === "string" && input.url) {
- location.hash = routeFromInput(input.url);
- return;
- }
- if (typeof input.repository === "string" && input.pullNumber) {
- location.hash = pullHash(input.repository, input.pullNumber);
- return;
- }
- if (typeof input.repository === "string") {
- location.hash = pullsHashForRepository(input.repository);
+ const initialRoute = await initialRouteFromInput(input);
+ if (initialRoute) {
+ location.hash = initialRoute;
return;
}
location.hash = pullsHashForRepository(bootstrapState.prefs.repository);
return;
}
+ navHistory.record();
await renderRoute();
} catch (error) {
setBreadcrumbs([{ label: "PR Artifact Explorer" }]);
diff --git a/extensions/pr-artifact-explorer/assets/browser.js b/extensions/pr-artifact-explorer/assets/browser.js
new file mode 100644
index 0000000000..30839f1494
--- /dev/null
+++ b/extensions/pr-artifact-explorer/assets/browser.js
@@ -0,0 +1,1152 @@
+"use strict";
+/* Browser preview, jobs, docs, copy helpers and shortcuts. Loaded before app.js; app.js globals are used only at call time. */
+
+const BROWSER_PRESETS = {
+ native: { label: "Native (fit window)", width: null, height: null, dpr: 1 },
+ mobile: { label: "Mobile 390×844", width: 390, height: 844, dpr: 3 },
+ tablet: { label: "Tablet 768×1024", width: 768, height: 1024, dpr: 2 },
+ desktop: { label: "Desktop 1440×900", width: 1440, height: 900, dpr: 1 },
+ custom: { label: "Custom size", width: 1024, height: 768, dpr: 1 },
+};
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.25;
+
+let browserState = null;
+let browserCleanup = null;
+const jobsById = new Map();
+let jobWarnings = [];
+let jobPanel = null;
+const jobWaiters = new Map();
+
+/* ---------- base64url + view encoding (matches targets.mjs) ---------- */
+
+function encodeViewClient(view) {
+ const body = { v: 1 };
+ if (view.url) body.url = view.url;
+ if (view.preset) body.preset = view.preset;
+ if (view.width) body.w = view.width;
+ if (view.height) body.h = view.height;
+ if (view.zoom) body.z = view.zoom;
+ if (view.orientation) body.o = view.orientation;
+ const bytes = new TextEncoder().encode(JSON.stringify(body));
+ let binary = "";
+ for (const byte of bytes) binary += String.fromCharCode(byte);
+ return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/, "");
+}
+
+function safeHttpUrl(value) {
+ if (typeof value !== "string" || /[\u0000-\u001f\u007f]/.test(value)) return undefined;
+ try {
+ const url = new URL(value);
+ if (url.protocol !== "http:" && url.protocol !== "https:") return undefined;
+ if (url.username || url.password) return undefined;
+ return url.href;
+ } catch {
+ return undefined;
+ }
+}
+
+function decodeViewClient(text) {
+ if (!text) return {};
+ try {
+ const padded = text.replaceAll("-", "+").replaceAll("_", "/");
+ const binary = atob(padded + "=".repeat((4 - (padded.length % 4)) % 4));
+ const body = JSON.parse(new TextDecoder().decode(Uint8Array.from(binary, (c) => c.charCodeAt(0))));
+ if (!body || typeof body !== "object" || body.v !== 1) return {};
+ return { url: body.url === undefined ? undefined : safeHttpUrl(body.url), preset: body.preset, width: body.w, height: body.h, zoom: body.z, orientation: body.o };
+ } catch {
+ return {};
+ }
+}
+
+function browserHash(view) {
+ return `#/browser?v=${encodeViewClient(view)}`;
+}
+
+/* ---------- copy helpers ---------- */
+
+async function copyText(text, label = "Copied") {
+ try {
+ await navigator.clipboard.writeText(text);
+ showToast(`${label} to clipboard.`);
+ return true;
+ } catch {
+ const area = document.createElement("textarea");
+ area.value = text;
+ area.setAttribute("readonly", "");
+ area.style.position = "fixed";
+ area.style.opacity = "0";
+ document.body.append(area);
+ area.select();
+ let ok = false;
+ try {
+ ok = document.execCommand("copy");
+ } catch {
+ ok = false;
+ }
+ area.remove();
+ if (!ok) {
+ const previousFocus = document.activeElement;
+ const dialog = document.createElement("dialog");
+ dialog.className = "manual-copy-dialog";
+ dialog.setAttribute("aria-labelledby", "manual-copy-title");
+ dialog.innerHTML = `
+ ${escapeHtml(title)}
+
+ ${active ? `` : ""}
+ ${job.error ? ` `;
+}
+
+function renderJobPanel() {
+ if (!jobPanel) return;
+ const visible = [...jobsById.values()].filter((job) => job.status === "running" || job.status === "failed" || job.status === "interrupted" || (job.prompts?.length ?? 0) > 0);
+ const warnings = jobWarnings.map((text) => `
${caption} 
${capture.source === "controlled-current" ? "Current page state of the controlled Chromium" : "Fresh render (not the live frame's current state)"}, ${capture.viewport?.width ?? w}×${capture.viewport?.height ?? h}. Saved to ${escapeHtml(capture.path)}. `;
+ $("br-shots").prepend(figure);
+ void src;
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : String(error), "error");
+ } finally {
+ button.disabled = false;
+ }
+ };
+
+ $("br-form").addEventListener("submit", (event) => {
+ event.preventDefault();
+ void submitAddress($("br-address").value);
+ });
+ $("br-back").addEventListener("click", () => go(-1));
+ $("br-forward").addEventListener("click", () => go(1));
+ $("br-refresh").addEventListener("click", refresh);
+ $("br-preset").addEventListener("change", (event) => {
+ state.preset = event.target.value;
+ state.fit = true;
+ applyLayout();
+ if (state.preset === "custom") {
+ $("br-options").showPopover();
+ $("br-width").focus();
+ }
+ });
+ $("br-width").addEventListener("change", (event) => {
+ state.width = Number(event.target.value);
+ applyLayout();
+ });
+ $("br-height").addEventListener("change", (event) => {
+ state.height = Number(event.target.value);
+ applyLayout();
+ });
+ $("br-rotate").addEventListener("click", () => {
+ state.orientation = state.orientation === "portrait" ? "landscape" : "portrait";
+ applyLayout();
+ });
+ $("br-zoom-out").addEventListener("click", () => setZoom(state.zoom - ZOOM_STEP));
+ $("br-zoom-in").addEventListener("click", () => setZoom(state.zoom + ZOOM_STEP));
+ $("br-100").addEventListener("click", () => setZoom(1));
+ $("br-fit").addEventListener("click", () => {
+ state.fit = true;
+ applyLayout();
+ });
+ $("br-shot").addEventListener("click", () => void screenshot());
+ $("br-controlled").addEventListener("click", () => void setControlled(!state.controlled));
+ $("br-copy").addEventListener("click", () => {
+ const { w, h } = viewport();
+ const view = { preset: state.preset, width: state.preset === "custom" ? w : undefined, height: state.preset === "custom" ? h : undefined, zoom: state.fit ? undefined : state.zoom, orientation: state.orientation === "landscape" ? "landscape" : undefined };
+ let sourceRoute = null;
+ try {
+ sourceRoute = state.url && state.owned ? sessionStorage.getItem("pae.shareRoute") : null;
+ } catch {
+ sourceRoute = null;
+ }
+ // Artifact previews live on an ephemeral local port, so share the stable artifact route instead.
+ const route = sourceRoute ? `${sourceRoute}${sourceRoute.includes("?") ? "&" : "?"}v=${encodeViewClient(view)}` : browserHash({ ...view, url: state.url || undefined });
+ void copyText(route, sourceRoute ? "Copied artifact share route" : "Copied share route");
+ });
+ $("br-open-external").addEventListener("click", async (event) => {
+ if (!state.url) return showToast("Open an address first.", "error");
+ const button = event.currentTarget;
+ button.disabled = true;
+ try {
+ await api("/api/browser/open-external", { method: "POST", body: { url: state.url, theme: resolvedCanvasTheme() } });
+ showToast("Opened in your default browser");
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : String(error), "error");
+ } finally {
+ button.disabled = false;
+ }
+ });
+ frame.addEventListener("load", () => {
+ if (frame.hasAttribute("data-theme-aware-preview")) syncPreviewTheme();
+ });
+ const stopThemeObserver = observeCanvasTheme((theme) => {
+ if (state.controlled && browserState === state) {
+ void api("/api/controlled/theme", { method: "POST", body: { theme } })
+ .then(showControlledFrame)
+ .catch((error) => showToast(`Theme sync failed: ${error instanceof Error ? error.message : error}`, "error"));
+ }
+ });
+ $("br-kbd").addEventListener("click", (event) => {
+ const hints = $("br-hints");
+ hints.hidden = !hints.hidden;
+ event.currentTarget.setAttribute("aria-pressed", String(!hints.hidden));
+ event.currentTarget.setAttribute("aria-expanded", String(!hints.hidden));
+ if (!hints.hidden && !$("br-options").matches(":popover-open")) $("br-options").showPopover();
+ });
+
+ const onResize = () => applyLayout();
+ window.addEventListener("resize", onResize);
+ state.api = { go, refresh, setZoom, screenshot, load, applyLayout, viewport, setControlled };
+ browserCleanup = () => {
+ window.removeEventListener("resize", onResize);
+ stopThemeObserver();
+ disposeOptions();
+ };
+
+ applyLayout();
+ if (state.url) void load(state.url);
+}
+
+function handleBrowserCommand(command) {
+ const state = browserState;
+ if (!state?.api) {
+ showToast("Open the browser with g then b first.", "error");
+ return;
+ }
+ switch (command.command) {
+ case "back":
+ return state.api.go(-1);
+ case "forward":
+ return state.api.go(1);
+ case "refresh":
+ return state.api.refresh();
+ case "zoom":
+ if (Number.isFinite(command.zoom)) return state.api.setZoom(command.zoom);
+ if (command.step) return state.api.setZoom(state.zoom + command.step * 0.25);
+ if (command.fit) {
+ state.fit = true;
+ return state.api.applyLayout();
+ }
+ return undefined;
+ case "viewport":
+ if (BROWSER_PRESETS[command.preset]) {
+ state.preset = command.preset;
+ state.fit = true;
+ }
+ if (Number.isInteger(command.width)) state.width = command.width;
+ if (Number.isInteger(command.height)) state.height = command.height;
+ if (Number.isInteger(command.width) || Number.isInteger(command.height)) state.preset = "custom";
+ document.getElementById("br-preset").value = state.preset;
+ document.getElementById("br-width").value = state.width;
+ document.getElementById("br-height").value = state.height;
+ return state.api.applyLayout();
+ case "screenshot":
+ return state.api.screenshot();
+ case "rotate":
+ return document.getElementById("br-rotate")?.click();
+ default:
+ return undefined;
+ }
+}
+
+/* ---------- global shortcuts ---------- */
+
+function installGlobalShortcuts() {
+ let chord = null;
+ document.addEventListener("keydown", (event) => {
+ const target = event.target;
+ const typing = target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+ if (event.key === "Escape" && typing) {
+ target.blur();
+ return;
+ }
+ if (typing || event.ctrlKey || event.metaKey) {
+ if (event.ctrlKey && event.key.toLowerCase() === "r" && browserState?.api && !typing) {
+ event.preventDefault();
+ browserState.api.refresh();
+ }
+ return;
+ }
+ if (event.altKey && browserState?.api) {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ browserState.api.go(-1);
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ browserState.api.go(1);
+ }
+ return;
+ }
+ if (chord) {
+ const next = chord;
+ chord = null;
+ if (next === "g" && event.key === "d") location.hash = "#/docs";
+ else if (next === "g" && event.key === "b") location.hash = "#/browser";
+ return;
+ }
+ if (event.key === "g") {
+ chord = "g";
+ setTimeout(() => (chord = null), 1200);
+ } else if (event.key === "/") {
+ event.preventDefault();
+ (document.getElementById("br-address") ?? repositoryInput)?.focus();
+ } else if (event.key === "?") {
+ const hints = document.getElementById("br-hints");
+ if (hints) document.getElementById("br-kbd").click();
+ else location.hash = "#/docs/shortcuts";
+ } else if (browserState?.api) {
+ if (event.key === "+" || event.key === "=") browserState.api.setZoom(browserState.zoom + ZOOM_STEP);
+ else if (event.key === "-") browserState.api.setZoom(browserState.zoom - ZOOM_STEP);
+ else if (event.key === "0") browserState.api.setZoom(1);
+ else if (event.key === "S") void browserState.api.screenshot();
+ else if (event.key === "C") void browserState.api.setControlled(!browserState.controlled);
+ }
+ });
+}
diff --git a/extensions/pr-artifact-explorer/assets/docs/continuing-job.png b/extensions/pr-artifact-explorer/assets/docs/continuing-job.png
new file mode 100644
index 0000000000..6dd0621f75
Binary files /dev/null and b/extensions/pr-artifact-explorer/assets/docs/continuing-job.png differ
diff --git a/extensions/pr-artifact-explorer/assets/docs/preview-controls.png b/extensions/pr-artifact-explorer/assets/docs/preview-controls.png
new file mode 100644
index 0000000000..8e1fe1642e
Binary files /dev/null and b/extensions/pr-artifact-explorer/assets/docs/preview-controls.png differ
diff --git a/extensions/pr-artifact-explorer/assets/docs/preview-options.png b/extensions/pr-artifact-explorer/assets/docs/preview-options.png
new file mode 100644
index 0000000000..f7f40b7967
Binary files /dev/null and b/extensions/pr-artifact-explorer/assets/docs/preview-options.png differ
diff --git a/extensions/pr-artifact-explorer/assets/junit-preview.js b/extensions/pr-artifact-explorer/assets/junit-preview.js
new file mode 100644
index 0000000000..4fe9c873b3
--- /dev/null
+++ b/extensions/pr-artifact-explorer/assets/junit-preview.js
@@ -0,0 +1,372 @@
+(() => {
+ "use strict";
+
+ const MAX_RENDERED_RESULTS = 2_000;
+ const MAX_DETAIL_CHARS = 24_000;
+ const MAX_HIGHLIGHTED_RAW_CHARS = 4 * 1024 * 1024;
+ const CATEGORY_ORDER = { error: 0, failed: 1, skipped: 2, passed: 3 };
+ const LABELS = { error: "Error", failed: "Failed", skipped: "Skipped", passed: "Passed" };
+ const ICONS = { error: "x-circle", failed: "x-circle", skipped: "clock", passed: "check-circle" };
+ const ROOT_PATTERN = /^<(?:[A-Za-z_][\w.-]*:)?(testsuites|testsuite)(?=[\s/>])/;
+
+ function escapeHtml(value) {
+ return String(value ?? "")
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll('"', """)
+ .replaceAll("'", "'");
+ }
+
+ function icon(name) {
+ const safeName = /^[a-z-]+$/.test(name) ? name : "file";
+ return ``;
+ }
+
+ function formatSeconds(seconds) {
+ if (!Number.isFinite(seconds) || seconds < 0) return "";
+ if (seconds === 0) return "0 s";
+ if (seconds < 1) return `${Math.round(seconds * 1000)} ms`;
+ if (seconds < 60) return `${Number(seconds.toFixed(2))} s`;
+ const minutes = Math.floor(seconds / 60);
+ return `${minutes} m ${Number((seconds - minutes * 60).toFixed(1))} s`;
+ }
+
+ /**
+ * Returns the root element name ("testsuites" | "testsuite") when the text is a
+ * JUnit-shaped document, or "" otherwise. Only the root element is inspected, so
+ * arbitrary XML (or a file merely named results.xml) is never recognized.
+ */
+ function detect(value) {
+ let text = String(value ?? "").replace(/^\uFEFF/, "");
+ for (;;) {
+ const before = text;
+ text = text
+ .replace(/^\s+/, "")
+ .replace(/^<\?[\s\S]*?\?>/, "")
+ .replace(/^/, "")
+ .replace(/^[]*(?:\[[\s\S]*?\])?\s*>/i, "");
+ if (text === before) break;
+ }
+ return ROOT_PATTERN.exec(text)?.[1] ?? "";
+ }
+
+ function children(element, localName) {
+ return [...element.children].filter((child) => child.localName === localName);
+ }
+
+ function text(element) {
+ return element?.textContent ?? "";
+ }
+
+ function seconds(element) {
+ const raw = element.getAttribute("time");
+ if (raw === null || raw.trim() === "") return null;
+ const trimmed = raw.trim();
+ if (!/^(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/.test(trimmed)) return null;
+ const value = Number(trimmed);
+ return Number.isFinite(value) ? value : null;
+ }
+
+ function sentence(...parts) {
+ return parts.filter((part) => part && String(part).trim()).join(": ");
+ }
+
+ function outcomeOf(testcase) {
+ const error = children(testcase, "error")[0];
+ const failure = children(testcase, "failure")[0];
+ const skipped = children(testcase, "skipped")[0];
+ if (error) return { category: "error", node: error };
+ if (failure) return { category: "failed", node: failure };
+ if (skipped) return { category: "skipped", node: skipped };
+ return { category: "passed", node: null };
+ }
+
+ function parseReport(value) {
+ const source = String(value ?? "").replace(/^\uFEFF/, "");
+ const rootName = detect(source);
+ if (!rootName) throw new Error("The document is not a JUnit testsuites or testsuite report.");
+ if (/]*\[/i.test(source)) {
+ throw new Error("Reports with DTD declarations are not rendered. View the XML source instead.");
+ }
+ const document = new DOMParser().parseFromString(source, "application/xml");
+ const parserError = document.getElementsByTagName("parsererror")[0];
+ if (parserError || !document.documentElement) {
+ const detail = String(parserError?.textContent ?? "").trim().split("\n")[0];
+ throw new Error(detail || "The JUnit XML is not well formed.");
+ }
+ const root = document.documentElement;
+ if (root.localName !== "testsuites" && root.localName !== "testsuite") {
+ throw new Error("The root element is not a JUnit testsuites or testsuite element.");
+ }
+
+ const results = [];
+ const suites = [];
+ const topSuites = root.localName === "testsuite" ? [root] : children(root, "testsuite");
+
+ function visit(element, path) {
+ if (element.localName === "testsuite") {
+ const name = element.getAttribute("name") || "";
+ const next = name ? [...path, name] : path;
+ const stdout = children(element, "system-out").map(text).join("\n").trim();
+ const stderr = children(element, "system-err").map(text).join("\n").trim();
+ if (stdout || stderr) suites.push({ name: next.join(" / ") || "Test suite", stdout, stderr });
+ for (const child of element.children) visit(child, next);
+ return;
+ }
+ if (element.localName === "testcase") {
+ const { category, node } = outcomeOf(element);
+ const stdout = children(element, "system-out").map(text).join("\n").trim();
+ const stderr = children(element, "system-err").map(text).join("\n").trim();
+ results.push({
+ name: element.getAttribute("name") || "(unnamed test)",
+ className: element.getAttribute("classname") || "",
+ suite: path.join(" / "),
+ category,
+ seconds: seconds(element),
+ type: node?.getAttribute("type") || "",
+ message: node?.getAttribute("message") || "",
+ body: node ? text(node).trim() : "",
+ stdout,
+ stderr,
+ });
+ return;
+ }
+ if (element.localName === "testsuites") {
+ for (const child of element.children) visit(child, path);
+ }
+ }
+ for (const suite of topSuites) visit(suite, []);
+
+ const counts = { passed: 0, failed: 0, error: 0, skipped: 0 };
+ let caseSeconds = 0;
+ let allTimed = results.length > 0;
+ for (const result of results) {
+ counts[result.category] += 1;
+ if (result.seconds === null) allTimed = false;
+ else caseSeconds += result.seconds;
+ }
+ if (!allTimed) caseSeconds = null;
+ const declaredTotal = Number(root.getAttribute("tests"));
+ let elapsed = seconds(root);
+ if (elapsed === null) {
+ const top = topSuites.map(seconds);
+ elapsed = top.length > 0 && top.every((item) => item !== null)
+ ? top.reduce((sum, item) => sum + item, 0)
+ : caseSeconds;
+ }
+ return {
+ name: root.getAttribute("name") || (topSuites[0]?.getAttribute("name") ?? "") || "JUnit report",
+ results,
+ suites,
+ counts,
+ total: results.length,
+ declaredTotal: Number.isFinite(declaredTotal) && root.hasAttribute("tests") ? declaredTotal : null,
+ elapsed,
+ caseSeconds,
+ };
+ }
+
+ function block(label, value) {
+ if (!value) return "";
+ const truncated = value.length > MAX_DETAIL_CHARS;
+ return `
+
+ `;
+ }
+
+ function renderResult(result, open) {
+ const secondary = [result.suite, result.className].filter(Boolean).join(" | ");
+ const summary = sentence(result.type, result.message);
+ const details = [
+ result.category === "skipped"
+ ? block("Skipped", result.message || result.body)
+ : block(result.category === "error" ? "Error" : "Failure", sentence(summary, result.body && result.body !== result.message ? `\n${result.body}` : "")),
+ block("Standard output", result.stdout),
+ block("Standard error", result.stderr),
+ ].join("");
+ const searchValue = [result.name, result.className, result.suite, result.category, result.type, result.message]
+ .join(" ")
+ .toLocaleLowerCase();
+ return `
+
+ `;
+ }
+
+ function renderError(source, message, highlightXml) {
+ return `
+ $1");
+ return out.replace(/\u0000(\d+)\u0000/g, (_m, i) => codes[Number(i)]);
+ }
+
+ function splitRow(line) {
+ return line.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((cell) => cell.trim());
+ }
+
+ function toHtml(source) {
+ const lines = String(source).replace(/\r\n?/g, "\n").split("\n");
+ const out = [];
+ let i = 0;
+ const startsBlock = (line) =>
+ /^\s*(#{1,6}\s|```|~~~|>|[-*+]\s|\d+[.)]\s|(?:-\s*){3,}$|(?:\*\s*){3,}$)/.test(line);
+ while (i < lines.length) {
+ const line = lines[i];
+ if (!line.trim()) { i += 1; continue; }
+ const fence = line.match(/^\s*(```|~~~)\s*([\w+-]*)/);
+ if (fence) {
+ const body = [];
+ i += 1;
+ while (i < lines.length && !lines[i].trim().startsWith(fence[1])) body.push(lines[i++]);
+ i += 1;
+ out.push(`${inline(heading[2])} `);
+ i += 1;
+ continue;
+ }
+ if (/^\s*(?:(?:-\s*){3,}|(?:\*\s*){3,}|(?:_\s*){3,})$/.test(line)) {
+ out.push("
"); + i += 1; + continue; + } + if (/^\s*>/.test(line)) { + const body = []; + while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, "")); + out.push(`
`,
+ );
+ continue;
+ }
+ const list = line.match(/^(\s*)([-*+]|\d+[.)])\s+/);
+ if (list) {
+ const ordered = /\d/.test(list[2]);
+ const items = [];
+ while (i < lines.length) {
+ const m = lines[i].match(/^(\s*)([-*+]|\d+[.)])\s+(.*)$/);
+ if (m && /\d/.test(m[2]) === ordered && m[1].length < 2 + list[1].length) {
+ items.push([m[3]]);
+ i += 1;
+ } else if (m && items.length && m[1].length >= 2 + list[1].length) {
+ items[items.length - 1].push(lines[i].slice(2 + list[1].length));
+ i += 1;
+ } else if (lines[i].trim() && /^\s{2,}\S/.test(lines[i]) && items.length) {
+ items[items.length - 1].push(lines[i].trim());
+ i += 1;
+ } else break;
+ }
+ const tag = ordered ? "ol" : "ul";
+ out.push(
+ `<${tag}>${items
+ .map(([first, ...rest]) => {
+ const task = first.match(/^\[([ xX])\]\s+(.*)$/);
+ const head = task
+ ? ` ${inline(task[2])}`
+ : inline(first);
+ return `${head}${rest.length ? toHtml(rest.join("\n")) : ""} `;
+ })
+ .join("")}`,
+ );
+ continue;
+ }
+ const para = [];
+ while (i < lines.length && lines[i].trim() && !(para.length && startsBlock(lines[i]))) para.push(lines[i++]);
+ out.push(`${req.url} `);
+ });
+ await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+ const base = `http://127.0.0.1:${server.address().port}`;
+ const dir = await mkdtemp(join(tmpdir(), "pae-ctl-"));
+ const browser = new ControlledBrowser();
+ t.after(async () => {
+ await browser.close();
+ server.close();
+ await rm(dir, { recursive: true, force: true });
+ });
+ await assert.rejects(browser.history("back"), { code: "not_started" });
+ await assert.rejects(browser.navigate("file:///x"), { code: "invalid_url" });
+ let state;
+ try {
+ state = await browser.navigate(`${base}/one`, { preset: "tablet" });
+ } catch (error) {
+ if (error.code === "playwright_missing" || error.code === "chromium_missing") {
+ t.skip(error.message.split("\n")[0]);
+ return;
+ }
+ throw error;
+ }
+ assert.equal(state.page.innerWidth, 768);
+ await browser.navigate(`${base}/two`);
+ assert.match((await browser.history("back")).url, /\/one$/);
+ assert.match((await browser.history("forward")).url, /\/two$/);
+ assert.match((await browser.history("refresh")).url, /\/two$/);
+ const resized = await browser.setViewport({ preset: "custom", width: 500, height: 700 });
+ assert.equal(resized.page.innerWidth, 500);
+ // Device-trait change recreates the context; the logical history must survive without about:blank.
+ const mobile = await browser.setViewport({ preset: "mobile" });
+ assert.equal(mobile.page.innerWidth, 390);
+ assert.match(mobile.url, /\/two$/);
+ const back = await browser.history("back");
+ assert.match(back.url, /\/one$/);
+ assert.equal(back.page.innerWidth, 390);
+ assert.match((await browser.history("forward")).url, /\/two$/);
+ assert.match((await browser.setViewport({ preset: "desktop" })).url, /\/two$/);
+ assert.match((await browser.history("back")).url, /\/one$/);
+ assert.match((await browser.history("back")).url, /\/one$/, "no entry before the first page is not an error and never reaches about:blank");
+ await browser.history("forward");
+ await assert.rejects(browser.navigate("http://127.0.0.1:1/"), { code: "navigation_failed" });
+ const shot = await browser.screenshot({ outputDir: dir });
+ assert.equal(shot.source, "controlled-current");
+ assert.equal((await readFile(shot.path)).subarray(1, 4).toString(), "PNG");
+ assert.equal((await browser.frame()).subarray(1, 4).toString(), "PNG");
+ await browser.close();
+ assert.equal(browser.active, false);
+});
\ No newline at end of file
diff --git a/extensions/pr-artifact-explorer/close-bounded.test.mjs b/extensions/pr-artifact-explorer/close-bounded.test.mjs
new file mode 100644
index 0000000000..eee8917d30
--- /dev/null
+++ b/extensions/pr-artifact-explorer/close-bounded.test.mjs
@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { closeBrowserBounded } from "./capture.mjs";
+
+test("closeBrowserBounded returns false quickly when close never settles", async () => {
+ const started = Date.now();
+ const clean = await closeBrowserBounded({ close: () => new Promise(() => {}) }, 150);
+ assert.equal(clean, false);
+ assert.ok(Date.now() - started < 2_000);
+});
+
+test("closeBrowserBounded reports clean close, rejection and missing browser", async () => {
+ assert.equal(await closeBrowserBounded({ close: async () => {} }, 150), true);
+ assert.equal(await closeBrowserBounded({ close: async () => { throw new Error("gone"); } }, 150), true);
+ assert.equal(await closeBrowserBounded(null, 150), true);
+});
diff --git a/extensions/pr-artifact-explorer/constants.mjs b/extensions/pr-artifact-explorer/constants.mjs
index c10c0c8471..fb0f288425 100644
--- a/extensions/pr-artifact-explorer/constants.mjs
+++ b/extensions/pr-artifact-explorer/constants.mjs
@@ -8,17 +8,23 @@ export const ASSET_ROOT = join(EXTENSION_ROOT, "assets");
const copilotHome = process.env.COPILOT_HOME || join(homedir(), ".copilot");
export const DATA_ROOT = join(copilotHome, "extensions", "pr-artifact-explorer", "artifacts");
export const CACHE_ROOT = join(DATA_ROOT, "cache");
+export const JOBS_FILE = join(DATA_ROOT, "jobs.json");
export const PREFS_FILE = join(DATA_ROOT, "preferences.json");
export const GITHUB_API = "https://api.github.com";
export const USER_AGENT = "github-copilot-pr-artifact-explorer";
-// The indexer supports standard ZIP archives up to the ZIP32 boundary.
-export const MAX_ARCHIVE_BYTES = (4 * 1024 * 1024 * 1024) - 2;
+// Hard guards protect integrity and memory; they are not user-tunable.
export const MIN_CACHE_FREE_BYTES = 512 * 1024 * 1024;
-export const ARTIFACT_DOWNLOAD_IDLE_TIMEOUT_MS = 60_000;
-export const MAX_CENTRAL_DIRECTORY_BYTES = 64 * 1024 * 1024;
-export const MAX_ZIP_ENTRIES = 50_000;
+
+// Soft limits warn and prompt; work continues while a prompt is outstanding.
+export const DEFAULT_SOFT_LIMITS = Object.freeze({
+ downloadBytes: 4 * 1024 * 1024 * 1024,
+ zipEntries: 50_000,
+ centralDirectoryBytes: 64 * 1024 * 1024,
+ streamedEntryBytes: 512 * 1024 * 1024,
+ idleSeconds: 60,
+});
export const MAX_INLINE_PREVIEW_BYTES = 4 * 1024 * 1024;
export const MAX_TRX_PREVIEW_BYTES = 32 * 1024 * 1024;
-export const MAX_STREAMED_ENTRY_BYTES = 512 * 1024 * 1024;
+export const MAX_STREAMED_ENTRY_BYTES = DEFAULT_SOFT_LIMITS.streamedEntryBytes;
diff --git a/extensions/pr-artifact-explorer/detector.mjs b/extensions/pr-artifact-explorer/detector.mjs
index 43288a591e..6bf0f0c22c 100644
--- a/extensions/pr-artifact-explorer/detector.mjs
+++ b/extensions/pr-artifact-explorer/detector.mjs
@@ -33,6 +33,10 @@ const MIME_TYPES = Object.freeze({
".targets": "application/xml; charset=utf-8",
".txt": "text/plain; charset=utf-8",
".trx": "application/xml; charset=utf-8",
+ ".webm": "video/webm",
+ ".mp4": "video/mp4",
+ ".m4v": "video/mp4",
+ ".mov": "video/quicktime",
".webp": "image/webp",
".xaml": "application/xml; charset=utf-8",
".xml": "application/xml; charset=utf-8",
@@ -72,6 +76,7 @@ export function kindForPath(path) {
return "image";
}
if (extension === ".pdf") return "pdf";
+ if ([".webm", ".mp4", ".m4v", ".mov"].includes(extension)) return "video";
if (extension === ".md") return "markdown";
if (extension === ".json" || extension === ".map") return "json";
if (XML_EXTENSIONS.has(extension)) return "xml";
diff --git a/extensions/pr-artifact-explorer/extension.mjs b/extensions/pr-artifact-explorer/extension.mjs
index 926acf18e9..aa6cb960a8 100644
--- a/extensions/pr-artifact-explorer/extension.mjs
+++ b/extensions/pr-artifact-explorer/extension.mjs
@@ -8,16 +8,25 @@ import {
clearArtifactCache,
deleteCachedArtifact,
getCacheSummary,
- inspectArtifact,
+ jobRegistry,
+ startArtifactJob,
} from "./cache.mjs";
import {
broadcastCache,
closeAllPreviews,
+ getBrowserState,
+ getControlledBrowser,
navigateInstance,
+ restartInstance,
+ sendBrowserCommand,
startInstance,
stopInstance,
} from "./server.mjs";
import { stopStaticPreviewsForArtifact } from "./preview.mjs";
+import { LimitError, limitPolicy } from "./limits.mjs";
+import { join } from "node:path";
+import { CaptureError, captureScreenshot, setScreenshotRoot } from "./capture.mjs";
+import { TargetError, describeShare, encodeView, parseTarget, routeFor } from "./targets.mjs";
import { loadPrefs, normalizeRepository, savePrefs } from "./state.mjs";
function positiveInteger(value, label) {
@@ -28,13 +37,72 @@ function positiveInteger(value, label) {
return number;
}
+function wrap(fn) {
+ return async (ctx) => {
+ try {
+ return await fn(ctx);
+ } catch (error) {
+ if (error instanceof CanvasError) throw error;
+ if (error instanceof TargetError || error instanceof CaptureError || error instanceof LimitError) {
+ throw new CanvasError(error.code ?? "invalid_input", error.message);
+ }
+ throw error;
+ }
+ };
+}
+
+async function resolveToken(repository) {
+ const prefs = await loadPrefs();
+ const auth = await resolveAccounts({ preferredId: prefs.account, repository });
+ if (!auth.activeToken) {
+ throw new CanvasError("github_auth_required", "No usable GitHub account was found.");
+ }
+ return { token: auth.activeToken, account: auth.active?.id ?? null };
+}
+
+async function startJob(ctx, repository, artifactId) {
+ const { token, account } = await resolveToken(repository);
+ const job = await startArtifactJob(token, repository, artifactId, { account });
+ navigateInstance(ctx.instanceId, `#/artifact/${encodeURIComponent(repository)}/0/${artifactId}`);
+ return job;
+}
+
+// Waits briefly so quick jobs return a result, but never cancels the job.
+async function settleWithin(job, ms) {
+ let timer;
+ const outcome = await Promise.race([
+ job.promise.then(() => "done", () => "failed"),
+ new Promise((resolve) => {
+ timer = setTimeout(() => resolve("running"), ms);
+ }),
+ ]);
+ clearTimeout(timer);
+ return outcome;
+}
+
+const VIEW_PROPERTIES = {
+ preset: { type: "string", enum: ["native", "mobile", "tablet", "desktop", "custom"] },
+ zoom: { type: "number", minimum: 0.25, maximum: 3 },
+ width: { type: "integer", minimum: 200, maximum: 4000, description: "Custom viewport width in CSS pixels." },
+ height: { type: "integer", minimum: 200, maximum: 4000, description: "Custom viewport height in CSS pixels." },
+ orientation: { type: "string", enum: ["portrait", "landscape"] },
+};
+
+function viewFragment(url, input = {}) {
+ let { width, height } = input;
+ if (width && height && ((input.orientation === "landscape" && height > width) || (input.orientation === "portrait" && width > height))) {
+ [width, height] = [height, width];
+ }
+ return encodeView({ url, preset: input.preset ?? (width || height ? "custom" : undefined), width, height, zoom: input.zoom });
+}
+
const session = await joinSession({
canvases: [
createCanvas({
id: "pr-artifact-explorer",
displayName: "Artifact Explorer",
description:
- "Browse GitHub pull requests and securely preview workflow artifacts, including static sites and asciinema recordings.",
+ "Browse GitHub pull requests and issues, securely preview workflow artifacts, and open local or web URLs in a responsive browser preview with device presets, zoom, history, and screenshots.",
inputSchema: {
type: "object",
properties: {
@@ -47,10 +115,21 @@ const session = await joinSession({
minimum: 1,
description: "Pull request number to open.",
},
+ artifactId: {
+ type: "integer",
+ minimum: 1,
+ description: "Workflow artifact id to inspect (requires repository).",
+ },
url: {
type: "string",
- description: "GitHub pull request URL to open.",
+ description:
+ "A GitHub PR/issue/artifact URL, a shared artifact-explorer link, or an http(s) URL to preview in the browser view.",
},
+ route: {
+ type: "string",
+ description: "In-app route such as #/pull/owner%2Frepo/1, #/cache or #/docs.",
+ },
+ ...VIEW_PROPERTIES,
},
additionalProperties: false,
},
@@ -67,7 +146,7 @@ const session = await joinSession({
required: ["repository", "pullNumber"],
additionalProperties: false,
},
- handler: (ctx) => {
+ handler: wrap((ctx) => {
const repository = normalizeRepository(ctx.input?.repository);
const pullNumber = positiveInteger(ctx.input?.pullNumber, "pullNumber");
const route = `#/pull/${encodeURIComponent(repository)}/${pullNumber}`;
@@ -76,39 +155,69 @@ const session = await joinSession({
repository,
pullNumber,
};
+ }),
+ },
+ {
+ name: "open_target",
+ description:
+ "Navigate the canvas to any supported target: a PR/issue/artifact URL, a shared link, natural language (e.g. 'open PR 123 in owner/repo'), a docs request, or an http(s) URL in the browser preview. Never runs artifact code.",
+ inputSchema: {
+ type: "object",
+ properties: {
+ input: { type: "string", description: "URL, route, or natural-language request." },
+ repository: { type: "string", description: "Default repository for bare numbers." },
+ ...VIEW_PROPERTIES,
+ },
+ required: ["input"],
+ additionalProperties: false,
},
+ handler: wrap(async (ctx) => {
+ const prefs = await loadPrefs();
+ const target = parseTarget(ctx.input?.input, {
+ defaultRepository: ctx.input?.repository ?? prefs.repository,
+ });
+ if (target.kind === "command") {
+ const controlled = getControlledBrowser(ctx.instanceId);
+ if (controlled?.active && ["back", "forward", "refresh"].includes(target.command)) {
+ return { target, controlled: await controlled.history(target.command) };
+ }
+ throw new CanvasError("invalid_input", `"${target.command}" needs an open browser view; use open_target with a URL first, or the controlled_* actions.`);
+ }
+ const view = { ...target.view, ...Object.fromEntries(Object.entries(ctx.input ?? {}).filter(([k, v]) => v !== undefined && k in VIEW_PROPERTIES)) };
+ const route =
+ target.kind === "url"
+ ? `#/browser?v=${viewFragment(target.url, view)}`
+ : routeFor(target);
+ return { navigated: navigateInstance(ctx.instanceId, route), target, route };
+ }),
},
{
name: "inspect_artifact",
- description: "Download, index, and smart-detect a GitHub Actions artifact.",
+ description:
+ "Start (or reattach to) a download/index job for a GitHub Actions artifact. The job runs independently of this call; completed ZIPs are reused. Inspection only: artifact programs and build scripts are never executed.",
inputSchema: {
type: "object",
properties: {
repository: { type: "string" },
artifactId: { type: "integer", minimum: 1 },
+ waitSeconds: { type: "number", minimum: 0, maximum: 120 },
},
required: ["repository", "artifactId"],
additionalProperties: false,
},
- handler: async (ctx) => {
+ handler: wrap(async (ctx) => {
const repository = normalizeRepository(ctx.input?.repository);
const artifactId = positiveInteger(ctx.input?.artifactId, "artifactId");
- const prefs = await loadPrefs();
- const auth = await resolveAccounts({
- preferredId: prefs.account,
- repository,
- });
- if (!auth.activeToken) {
- throw new CanvasError("github_auth_required", "No usable GitHub account was found.");
- }
- const metadata = await inspectArtifact(auth.activeToken, repository, artifactId);
+ const job = await startJob(ctx, repository, artifactId);
+ const outcome = await settleWithin(job, (ctx.input?.waitSeconds ?? 20) * 1000);
await broadcastCache();
- navigateInstance(
- ctx.instanceId,
- `#/artifact/${encodeURIComponent(repository)}/0/${artifactId}`,
- );
+ const snapshot = jobRegistry.snapshot(job);
+ if (outcome !== "done") return { status: outcome, job: snapshot };
+ const metadata = await job.promise;
const entries = metadata.analysis.entries ?? [];
return {
+ status: "done",
+ job: snapshot,
artifact: metadata.artifact,
analysis: {
...metadata.analysis,
@@ -116,7 +225,199 @@ const session = await joinSession({
entriesTruncated: entries.length > 200,
},
};
+ }),
+ },
+ {
+ name: "job_status",
+ description: "List download/index jobs with progress, attempt, and outstanding soft-limit prompts.",
+ handler: async () => ({ jobs: jobRegistry.list(), limits: limitPolicy.snapshot() }),
+ },
+ {
+ name: "retry_job",
+ description: "Retry an artifact job. A completed ZIP is reused and only indexing re-runs.",
+ inputSchema: {
+ type: "object",
+ properties: { repository: { type: "string" }, artifactId: { type: "integer", minimum: 1 } },
+ required: ["repository", "artifactId"],
+ additionalProperties: false,
+ },
+ handler: wrap(async (ctx) => {
+ const repository = normalizeRepository(ctx.input?.repository);
+ const job = await startJob(ctx, repository, positiveInteger(ctx.input?.artifactId, "artifactId"));
+ return { job: jobRegistry.snapshot(job) };
+ }),
+ },
+ {
+ name: "cancel_job",
+ description: "Explicitly cancel a running artifact job.",
+ inputSchema: {
+ type: "object",
+ properties: { jobId: { type: "string" } },
+ required: ["jobId"],
+ additionalProperties: false,
+ },
+ handler: wrap((ctx) => {
+ const job = jobRegistry.get(String(ctx.input?.jobId ?? ""));
+ if (!job) throw new CanvasError("job_not_found", "Job was not found.");
+ jobRegistry.cancel(job.id);
+ return { job: jobRegistry.snapshot(job) };
+ }),
+ },
+ {
+ name: "set_limit",
+ description:
+ "Raise a soft limit (downloadBytes, zipEntries, centralDirectoryBytes, streamedEntryBytes, idleSeconds). The value must be at least the live value of any running job.",
+ inputSchema: {
+ type: "object",
+ properties: { kind: { type: "string" }, value: { type: "number", minimum: 1 } },
+ required: ["kind", "value"],
+ additionalProperties: false,
+ },
+ handler: wrap((ctx) => {
+ const result = limitPolicy.submit(ctx.input?.kind, ctx.input?.value);
+ return { ...result, limits: limitPolicy.snapshot() };
+ }),
+ },
+ {
+ name: "restart_canvas",
+ description:
+ "Completely restart the canvas server and reload the view. Running download/index jobs are preserved.",
+ handler: wrap(async (ctx) => {
+ const active = jobRegistry.activeJobs().length;
+ const result = await restartInstance(ctx.instanceId, (message) =>
+ session.log(message, { level: "debug" }),
+ );
+ if (!result) throw new CanvasError("not_open", "The canvas is not open.");
+ return { restarted: true, samePort: result.samePort, jobsPreserved: active, url: result.entry.url };
+ }),
+ },
+ {
+ name: "navigate_browser",
+ description: "Open an http(s) URL (including localhost) in the browser preview, optionally at a device preset and zoom.",
+ inputSchema: {
+ type: "object",
+ properties: { url: { type: "string" }, ...VIEW_PROPERTIES },
+ required: ["url"],
+ additionalProperties: false,
+ },
+ handler: wrap((ctx) => {
+ const target = parseTarget(ctx.input?.url);
+ if (target.kind !== "url") throw new CanvasError("invalid_input", "Provide an http(s) URL.");
+ const route = `#/browser?v=${viewFragment(target.url, ctx.input)}`;
+ return { navigated: navigateInstance(ctx.instanceId, route), url: target.url };
+ }),
+ },
+ ...["back", "forward", "refresh"].map((command) => ({
+ name: `browser_${command}`,
+ description: `Browser preview: ${command}.`,
+ handler: wrap((ctx) => ({ sent: sendBrowserCommand(ctx.instanceId, { command }) })),
+ })),
+ {
+ name: "set_viewport",
+ description: "Set the browser preview device preset (native, mobile, tablet, desktop, custom) and optional size/orientation.",
+ inputSchema: {
+ type: "object",
+ properties: {
+ ...VIEW_PROPERTIES,
+ },
+ additionalProperties: false,
+ },
+ handler: wrap((ctx) => ({
+ sent: sendBrowserCommand(ctx.instanceId, { command: "viewport", ...ctx.input }),
+ })),
+ },
+ {
+ name: "set_zoom",
+ description: "Set browser preview visual zoom (0.25-3). Zoom scales the frame without changing the emulated viewport.",
+ inputSchema: {
+ type: "object",
+ properties: { zoom: { type: "number", minimum: 0.25, maximum: 3 }, fit: { type: "boolean" } },
+ additionalProperties: false,
},
+ handler: wrap((ctx) => ({
+ sent: sendBrowserCommand(ctx.instanceId, { command: "zoom", ...ctx.input }),
+ })),
+ },
+ {
+ name: "screenshot",
+ description:
+ "Capture a real Chromium screenshot saved to the session files area. mode=fresh (default) renders the URL anew at the emulated viewport (not the live in-panel page state); mode=controlled captures the CURRENT page of the isolated controlled Chromium (see controlled_navigate). Requires Playwright; setup instructions are returned if missing.",
+ inputSchema: {
+ type: "object",
+ properties: {
+ url: { type: "string", description: "Defaults to the URL currently shown in the browser preview." },
+ mode: { type: "string", enum: ["fresh", "controlled"] },
+ fullPage: { type: "boolean" },
+ ...VIEW_PROPERTIES,
+ },
+ additionalProperties: false,
+ },
+ handler: wrap(async (ctx) => {
+ if (ctx.input?.mode === "controlled") {
+ return getControlledBrowser(ctx.instanceId).screenshot({ fullPage: ctx.input?.fullPage === true });
+ }
+ const state = getBrowserState(ctx.instanceId);
+ const url = ctx.input?.url ?? state?.url;
+ if (!url) throw new CanvasError("invalid_input", "No URL is open; pass url.");
+ return captureScreenshot({
+ url,
+ fullPage: ctx.input?.fullPage === true,
+ preset: ctx.input?.preset ?? state?.preset ?? undefined,
+ width: ctx.input?.width,
+ height: ctx.input?.height,
+ orientation: ctx.input?.orientation,
+ });
+ }),
+ },
+ {
+ name: "controlled_navigate",
+ description:
+ "Open a URL in the explicit, isolated controlled Chromium (fresh in-memory profile, no logins) with real history and device emulation. Use for sites that refuse iframe embedding. Requires Playwright.",
+ inputSchema: {
+ type: "object",
+ properties: { url: { type: "string" }, ...VIEW_PROPERTIES },
+ required: ["url"],
+ additionalProperties: false,
+ },
+ handler: wrap(async (ctx) => {
+ const { url, preset, width, height, orientation } = ctx.input ?? {};
+ return { controlled: await getControlledBrowser(ctx.instanceId).navigate(url, { preset, width, height, orientation }) };
+ }),
+ },
+ ...["back", "forward", "refresh"].map((direction) => ({
+ name: `controlled_${direction}`,
+ description: `Controlled Chromium history: ${direction}.`,
+ handler: wrap(async (ctx) => ({ controlled: await getControlledBrowser(ctx.instanceId).history(direction) })),
+ })),
+ {
+ name: "controlled_close",
+ description: "Close the controlled Chromium and discard its in-memory profile.",
+ handler: wrap(async (ctx) => {
+ await getControlledBrowser(ctx.instanceId)?.close();
+ return { closed: true };
+ }),
+ },
+ {
+ name: "share",
+ description: "Build a canonical GitHub URL and shareable link for a PR, issue, or artifact target.",
+ inputSchema: {
+ type: "object",
+ properties: { input: { type: "string" }, repository: { type: "string" }, ...VIEW_PROPERTIES },
+ required: ["input"],
+ additionalProperties: false,
+ },
+ handler: wrap((ctx) => {
+ const target = parseTarget(ctx.input?.input, { defaultRepository: ctx.input?.repository });
+ if (target.kind === "command") throw new CanvasError("invalid_input", "Commands cannot be shared; share a URL or artifact target.");
+ const picked = Object.fromEntries(Object.entries(ctx.input ?? {}).filter(([k, v]) => v !== undefined && k in VIEW_PROPERTIES));
+ const view = { ...target.view, ...picked };
+ return { share: describeShare(target, Object.keys(view).length ? view : null) };
+ }),
+ },
+ {
+ name: "docs",
+ description: "Open the built-in Artifact Explorer documentation tab.",
+ handler: wrap((ctx) => ({ navigated: navigateInstance(ctx.instanceId, "#/docs") })),
},
{
name: "cache_status",
@@ -134,20 +435,26 @@ const session = await joinSession({
additionalProperties: false,
},
handler: async (ctx) => {
- if (ctx.input?.artifactId != null) {
- await stopStaticPreviewsForArtifact(ctx.input.artifactId);
- const result = await deleteCachedArtifact(
- positiveInteger(ctx.input.artifactId, "artifactId"),
- );
+ try {
+ if (ctx.input?.artifactId != null) {
+ const id = positiveInteger(ctx.input.artifactId, "artifactId");
+ await stopStaticPreviewsForArtifact(id);
+ const result = await deleteCachedArtifact(id);
+ navigateInstance(ctx.instanceId, "#/cache");
+ await broadcastCache({ refresh: true });
+ return result;
+ }
+ await closeAllPreviews();
+ const result = await clearArtifactCache();
navigateInstance(ctx.instanceId, "#/cache");
await broadcastCache({ refresh: true });
return result;
+ } catch (error) {
+ if (error?.code === "jobs_active") {
+ throw new CanvasError("jobs_active", error.message);
+ }
+ throw error;
}
- await closeAllPreviews();
- const result = await clearArtifactCache();
- navigateInstance(ctx.instanceId, "#/cache");
- await broadcastCache({ refresh: true });
- return result;
},
},
{
@@ -196,6 +503,7 @@ const session = await joinSession({
},
],
open: async (ctx) => {
+ if (session.workspacePath) setScreenshotRoot(join(session.workspacePath, "files", "artifact-explorer-screenshots"));
const entry = await startInstance(
ctx.instanceId,
ctx.input,
diff --git a/extensions/pr-artifact-explorer/external-open.mjs b/extensions/pr-artifact-explorer/external-open.mjs
new file mode 100644
index 0000000000..4cefb45146
--- /dev/null
+++ b/extensions/pr-artifact-explorer/external-open.mjs
@@ -0,0 +1,94 @@
+import { spawn } from "node:child_process";
+
+export class ExternalOpenError extends Error {
+ constructor(message, code = "invalid_url") {
+ super(message);
+ this.name = "ExternalOpenError";
+ this.code = code;
+ }
+}
+
+const MAX_URL_LENGTH = 2048;
+
+/** Returns a normalized http(s) URL or throws. Rejects credentials, control characters and other schemes. */
+export function validateExternalUrl(value) {
+ const text = String(value ?? "");
+ if (!text || text.length > MAX_URL_LENGTH) throw new ExternalOpenError("Enter an http(s) URL (max 2048 characters).");
+ // eslint-disable-next-line no-control-regex
+ if (/[\u0000-\u0020\u007f-\u009f]/.test(text)) throw new ExternalOpenError("The URL contains spaces or control characters.");
+ let parsed;
+ try {
+ parsed = new URL(text);
+ } catch {
+ throw new ExternalOpenError("Enter a valid http(s) URL.");
+ }
+ if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+ throw new ExternalOpenError("Only http(s) URLs can be opened in the default browser.");
+ }
+ if (parsed.username || parsed.password) throw new ExternalOpenError("URLs with embedded credentials are not allowed.");
+ if (!parsed.hostname) throw new ExternalOpenError("The URL has no host.");
+ return parsed.href;
+}
+
+export function launcherCommand(url, platform = process.platform, env = process.env) {
+ if (platform === "win32") {
+ const root = env.SystemRoot || env.windir || "C:\\Windows";
+ return { command: `${root}\\System32\\rundll32.exe`, args: ["url.dll,FileProtocolHandler", url] };
+ }
+ if (platform === "darwin") return { command: "/usr/bin/open", args: [url] };
+ return { command: "xdg-open", args: [url] };
+}
+
+const LAUNCH_ACK_MS = 1500;
+
+/** Resolves when the launcher exits 0, or is still running after the ack window; rejects on spawn error or failed exit. */
+export function launchWithAck(url, { spawnFn = spawn, ackMs = LAUNCH_ACK_MS, command: spec = launcherCommand(url) } = {}) {
+ return new Promise((resolve, reject) => {
+ let child;
+ try {
+ child = spawnFn(spec.command, spec.args, { shell: false, windowsHide: true, detached: true, stdio: "ignore" });
+ } catch (error) {
+ reject(error);
+ return;
+ }
+ let timer;
+ const finish = (fn, value) => {
+ clearTimeout(timer);
+ child.removeListener("error", onError);
+ child.removeListener("exit", onExit);
+ fn(value);
+ };
+ const onError = (error) => finish(reject, error);
+ const onExit = (code, signal) => {
+ if (code === 0) finish(resolve);
+ else finish(reject, new Error(signal ? `launcher terminated by ${signal}` : `launcher exited with code ${code}`));
+ };
+ child.once("error", onError);
+ child.once("exit", onExit);
+ timer = setTimeout(() => {
+ child.unref?.();
+ finish(resolve);
+ }, ackMs);
+ });
+}
+
+function defaultOpener(url) {
+ return launchWithAck(url);
+}
+
+let opener = defaultOpener;
+
+/** Test seam: replaces the OS launcher. Pass null to restore the default. */
+export function setExternalOpener(fn) {
+ opener = fn ?? defaultOpener;
+}
+
+export async function openInDefaultBrowser(url) {
+ const safe = validateExternalUrl(url);
+ try {
+ await opener(safe);
+ } catch (error) {
+ throw new ExternalOpenError(`Could not launch the default browser: ${error.message}`, "launch_failed");
+ }
+ return safe;
+}
diff --git a/extensions/pr-artifact-explorer/github.mjs b/extensions/pr-artifact-explorer/github.mjs
index 55d2670a3e..4bfa610839 100644
--- a/extensions/pr-artifact-explorer/github.mjs
+++ b/extensions/pr-artifact-explorer/github.mjs
@@ -541,6 +541,30 @@ export async function getPullRequest(token, repository, pullNumber) {
);
}
+export async function getIssue(token, repository, issueNumber) {
+ const number = Number.parseInt(issueNumber, 10);
+ if (!Number.isSafeInteger(number) || number <= 0) {
+ throw new Error("Issue number must be a positive integer.");
+ }
+ const item = await githubRequest(
+ token,
+ `/repos/${repositoryPath(repository)}/issues/${number}`,
+ );
+ return {
+ number: item.number,
+ title: item.title,
+ state: item.state,
+ url: item.html_url,
+ isPullRequest: Boolean(item.pull_request),
+ author: item.user?.login ?? null,
+ labels: (item.labels ?? []).map((l) => (typeof l === "string" ? l : l.name)),
+ comments: item.comments ?? 0,
+ createdAt: item.created_at,
+ updatedAt: item.updated_at,
+ body: typeof item.body === "string" ? item.body.slice(0, 20_000) : "",
+ };
+}
+
async function mapLimit(items, limit, callback) {
const results = new Array(items.length);
let cursor = 0;
diff --git a/extensions/pr-artifact-explorer/jobs-limits.test.mjs b/extensions/pr-artifact-explorer/jobs-limits.test.mjs
new file mode 100644
index 0000000000..9d24f9942d
--- /dev/null
+++ b/extensions/pr-artifact-explorer/jobs-limits.test.mjs
@@ -0,0 +1,148 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { JobRegistry } from "./jobs.mjs";
+import { LimitError, LimitPolicy } from "./limits.mjs";
+
+async function policy() {
+ const dir = await mkdtemp(join(tmpdir(), "limits-"));
+ return { dir, policy: new LimitPolicy(join(dir, "limits.json")) };
+}
+
+async function cleanup(dir, p) {
+ try {
+ await p.flush();
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+}
+
+const tick = () => new Promise((resolve) => setImmediate(resolve));
+
+test("crossing a soft limit prompts but never stops the job", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ const registry = new JobRegistry(p);
+ let release;
+ const gate = new Promise((resolve) => (release = resolve));
+ const job = registry.start("k", { repository: "o/r", artifactId: 1 }, async (j) => {
+ registry.update(j, { live: { downloadBytes: p.get("downloadBytes") + 1 } });
+ await gate;
+ return "done";
+ });
+ await tick();
+ const snap = registry.snapshot(job);
+ assert.equal(snap.status, "running");
+ assert.equal(snap.prompts.length, 1);
+ assert.equal(snap.prompts[0].kind, "downloadBytes");
+ release();
+ assert.equal(await job.promise, "done");
+ } finally {
+ await cleanup(dir, p);
+ }
+});
+
+test("submitted limits are checked against live progress atomically", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ const registry = new JobRegistry(p);
+ let live = 100;
+ let release;
+ const gate = new Promise((resolve) => (release = resolve));
+ const job = registry.start("k", { repository: "o/r", artifactId: 2 }, async (j) => {
+ registry.update(j, { live: { zipEntries: live } });
+ await gate;
+ });
+ await tick();
+ assert.throws(
+ () => p.submit("zipEntries", 50),
+ (error) => error instanceof LimitError && error.code === "below_current" && error.minimum === 100,
+ );
+ // Progress advances after the prompt: the new minimum is the live value at submit time.
+ live = 5000;
+ registry.update(job, { live: { zipEntries: live } });
+ assert.throws(() => p.submit("zipEntries", 4999), /at least the current value/);
+ assert.equal(p.submit("zipEntries", 5000).limit, 5000);
+ assert.equal(registry.snapshot(job).prompts.length, 0);
+ assert.throws(() => p.submit("zipEntries", 0), (e) => e.code === "invalid_limit");
+ assert.throws(() => p.submit("nope", 5), (e) => e.code === "unknown_limit");
+ release();
+ await job.promise;
+ } finally {
+ await cleanup(dir, p);
+ }
+});
+
+test("jobs are idempotent per key, cancellable, and retry increments the attempt", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ const registry = new JobRegistry(p);
+ const first = registry.start("k", { repository: "o/r", artifactId: 3 }, (j) =>
+ new Promise((_, reject) => j.controller.signal.addEventListener("abort", () => reject(j.controller.signal.reason))),
+ );
+ const again = registry.start("k", { repository: "o/r", artifactId: 3 }, async () => "x");
+ assert.equal(first, again);
+ assert.equal(registry.cancel(first.id), true);
+ await assert.rejects(first.promise);
+ assert.equal(registry.snapshot(first).status, "cancelled");
+ const retry = registry.start("k", { repository: "o/r", artifactId: 3 }, async () => "ok");
+ assert.equal(retry.attempt, 2);
+ assert.equal(await retry.promise, "ok");
+ } finally {
+ await cleanup(dir, p);
+ }
+});
+
+test("a failed job reports the error without being treated as cancelled", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ const registry = new JobRegistry(p);
+ const job = registry.start("k", { repository: "o/r", artifactId: 4 }, async () => {
+ throw new Error("boom");
+ });
+ await assert.rejects(job.promise, /boom/);
+ const snap = registry.snapshot(job);
+ assert.equal(snap.status, "failed");
+ assert.equal(snap.error, "boom");
+ } finally {
+ await cleanup(dir, p);
+ }
+});
+
+test("finished jobs are capped at completion and active jobs are never trimmed", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ const registry = new JobRegistry(p);
+ let release;
+ const active = registry.start("active", { repository: "o/r", artifactId: 1 }, () => new Promise((r) => (release = r)));
+ for (let i = 0; i < 40; i++) {
+ const job = registry.start(`k${i}`, { repository: "o/r", artifactId: 100 + i }, async () => {
+ if (i % 2) throw new Error("fail");
+ return "ok";
+ });
+ await job.promise.catch(() => {});
+ }
+ const jobs = registry.list();
+ assert.ok(jobs.filter((j) => j.status !== "running").length <= 25);
+ assert.ok(jobs.some((j) => j.id === active.id));
+ release("done");
+ await active.promise;
+ } finally {
+ await cleanup(dir, p);
+ }
+});
+
+test("limits persist across policy instances", async () => {
+ const { dir, policy: p } = await policy();
+ try {
+ p.submit("downloadBytes", 123456789);
+ await p.flush();
+ const next = new LimitPolicy(join(dir, "limits.json"));
+ await next.load();
+ assert.equal(next.get("downloadBytes"), 123456789);
+ } finally {
+ await cleanup(dir, p);
+ }
+});
diff --git a/extensions/pr-artifact-explorer/jobs.mjs b/extensions/pr-artifact-explorer/jobs.mjs
new file mode 100644
index 0000000000..554e18cbbd
--- /dev/null
+++ b/extensions/pr-artifact-explorer/jobs.mjs
@@ -0,0 +1,413 @@
+import { randomUUID } from "node:crypto";
+import { mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
+import { dirname } from "node:path";
+import { LIMIT_KINDS } from "./limits.mjs";
+
+const MAX_FINISHED_JOBS = 25;
+const ACTIVE = new Set(["running"]);
+const ALL_KINDS = Object.keys(LIMIT_KINDS);
+const STREAM_KINDS = ["streamedEntryBytes"];
+
+export class JobCancelled extends Error {
+ constructor(message = "The job was cancelled.") {
+ super(message);
+ this.name = "JobCancelled";
+ }
+}
+
+/**
+ * Tracks long-running artifact jobs independently of any HTTP request or UI
+ * view. Jobs only stop on explicit cancellation or a genuine fatal error;
+ * soft-limit crossings surface as `prompts` in the snapshot and never pause work.
+ */
+export class JobRegistry {
+ #jobs = new Map();
+ #listeners = new Set();
+ #policy;
+ #idleTimer = null;
+ #file;
+ #loaded = null;
+ #writing = null;
+ #dirty = false;
+ #sequence = 0;
+ persistError = null;
+ loadWarning = null;
+
+ constructor(policy, { file = null } = {}) {
+ this.#policy = policy;
+ this.#file = file;
+ policy.onChange(() => {
+ for (const job of this.#jobs.values()) if (ACTIVE.has(job.status)) this.#emit(job);
+ });
+ }
+
+ subscribe(listener) {
+ this.#listeners.add(listener);
+ return () => this.#listeners.delete(listener);
+ }
+
+ get(id) {
+ return this.#jobs.get(id) ?? null;
+ }
+
+ findActive(key) {
+ for (const job of this.#jobs.values()) {
+ if (job.key === key && ACTIVE.has(job.status)) return job;
+ }
+ return null;
+ }
+
+ latestFor(key) {
+ let found = null;
+ for (const job of this.#jobs.values()) if (job.key === key) found = job;
+ return found;
+ }
+
+ activeJobs() {
+ return [...this.#jobs.values()].filter((job) => ACTIVE.has(job.status));
+ }
+
+ list() {
+ return [...this.#jobs.values()].map((job) => this.snapshot(job));
+ }
+
+ /** Starts the runner, or returns the already-running job for the same key. */
+ start(key, meta, runner) {
+ const existing = this.findActive(key);
+ if (existing) return existing;
+ const previous = this.latestFor(key);
+ const controller = new AbortController();
+ const job = {
+ id: randomUUID(),
+ key,
+ repository: meta.repository,
+ artifactId: String(meta.artifactId),
+ artifactName: meta.artifactName ?? `Artifact ${meta.artifactId}`,
+ account: meta.account ?? null,
+ attempt: (previous?.attempt ?? 0) + 1,
+ status: "running",
+ stage: "preparing",
+ progress: null,
+ live: {},
+ lastActivityAt: Date.now(),
+ error: null,
+ result: null,
+ startedAt: new Date().toISOString(),
+ finishedAt: null,
+ controller,
+ unregister: [],
+ promise: null,
+ };
+ for (const kind of ALL_KINDS) {
+ job.unregister.push(
+ this.#policy.trackLive(job.id, kind, () => {
+ if (kind === "idleSeconds") return this.#idleSeconds(job);
+ return job.live[kind] ?? 0;
+ }),
+ );
+ }
+ this.#jobs.set(job.id, job);
+ this.#trim();
+ this.#schedulePersist();
+ job.promise = (async () => {
+ try {
+ job.result = await runner(job);
+ job.status = "succeeded";
+ job.stage = "ready";
+ } catch (error) {
+ if (controller.signal.aborted) {
+ job.status = "cancelled";
+ job.error = "Cancelled.";
+ } else {
+ job.status = "failed";
+ job.error = error instanceof Error ? error.message : String(error);
+ job.stage = "error";
+ }
+ job.cause = error;
+ } finally {
+ job.finishedAt = new Date().toISOString();
+ job.unregister.forEach((fn) => fn());
+ job.unregister = [];
+ this.#emit(job);
+ this.#syncIdleTimer();
+ this.#trim();
+ this.#schedulePersist();
+ }
+ if (job.status !== "succeeded") throw job.cause;
+ return job.result;
+ })();
+ job.promise.catch(() => {});
+ this.#syncIdleTimer();
+ this.#emit(job);
+ return job;
+ }
+
+ /**
+ * Tracks an in-flight decompression stream (content or static preview) so its
+ * live size can cross a soft limit and prompt without ever stopping the stream.
+ * Call `update(bytes)` per chunk and `finish(error?)` when the stream ends.
+ */
+ track(meta) {
+ const controller = new AbortController();
+ const job = {
+ id: randomUUID(),
+ kind: "stream",
+ key: `stream:${randomUUID()}`,
+ repository: meta.repository ?? null,
+ artifactId: String(meta.artifactId ?? ""),
+ artifactName: meta.name ?? "Streamed entry",
+ attempt: 1,
+ status: "running",
+ stage: "decompressing",
+ progress: null,
+ live: {},
+ lastActivityAt: Date.now(),
+ error: null,
+ result: null,
+ startedAt: new Date().toISOString(),
+ finishedAt: null,
+ controller,
+ unregister: [],
+ promise: null,
+ };
+ job.unregister.push(
+ this.#policy.trackLive(job.id, "streamedEntryBytes", () => job.live.streamedEntryBytes ?? 0),
+ );
+ this.#jobs.set(job.id, job);
+ this.#syncIdleTimer();
+ this.#emit(job);
+ let lastEmit = 0;
+ return {
+ job,
+ signal: controller.signal,
+ update: (bytes) => {
+ job.live.streamedEntryBytes = bytes;
+ job.lastActivityAt = Date.now();
+ const now = Date.now();
+ if (now - lastEmit >= 250) {
+ lastEmit = now;
+ this.#emit(job);
+ }
+ },
+ finish: (error = null) => {
+ if (!ACTIVE.has(job.status)) return;
+ if (controller.signal.aborted) {
+ job.status = "cancelled";
+ job.error = "Cancelled.";
+ } else if (error) {
+ job.status = "failed";
+ job.error = error instanceof Error ? error.message : String(error);
+ } else {
+ job.status = "succeeded";
+ }
+ job.finishedAt = new Date().toISOString();
+ job.unregister.forEach((fn) => fn());
+ job.unregister = [];
+ this.#emit(job);
+ this.#syncIdleTimer();
+ // Finished streams are transient; only failures remain visible.
+ if (job.status === "succeeded" || job.status === "cancelled") this.#jobs.delete(job.id);
+ this.#trim();
+ },
+ };
+ }
+
+ /** Loads persisted, non-secret job history. Jobs that were running are honestly reported as interrupted. */
+ load() {
+ if (!this.#file) return Promise.resolve();
+ this.#loaded ??= (async () => {
+ let saved;
+ try {
+ saved = JSON.parse(await readFile(this.#file, "utf8"));
+ } catch (error) {
+ if (error?.code === "ENOENT") return;
+ if (error instanceof SyntaxError) {
+ this.loadWarning = `Saved job history at ${this.#file} is corrupt and was ignored (${error.message}).`;
+ return;
+ }
+ throw error;
+ }
+ let changed = false;
+ for (const entry of Array.isArray(saved?.jobs) ? saved.jobs : []) {
+ if (!entry?.id || !entry.key || this.#jobs.has(entry.id)) continue;
+ const wasRunning = entry.status === "running";
+ this.#jobs.set(entry.id, {
+ id: String(entry.id),
+ key: String(entry.key),
+ repository: entry.repository ?? null,
+ artifactId: String(entry.artifactId ?? ""),
+ artifactName: entry.artifactName ?? `Artifact ${entry.artifactId}`,
+ account: entry.account ?? null,
+ attempt: Number(entry.attempt) || 1,
+ status: wasRunning ? "interrupted" : String(entry.status),
+ stage: wasRunning ? "interrupted" : String(entry.stage ?? "error"),
+ progress: entry.progress ?? null,
+ live: {},
+ lastActivityAt: Date.now(),
+ error: wasRunning
+ ? "Interrupted: the provider stopped before this job finished. Retry to download it again."
+ : entry.error ?? null,
+ startedAt: entry.startedAt ?? null,
+ finishedAt: wasRunning ? new Date().toISOString() : entry.finishedAt ?? null,
+ unregister: [],
+ controller: null,
+ });
+ changed ||= wasRunning;
+ }
+ this.#trim();
+ if (changed) this.#schedulePersist();
+ })();
+ return this.#loaded;
+ }
+
+ async flush() {
+ while (this.#writing) await this.#writing;
+ }
+
+ #schedulePersist() {
+ if (!this.#file) return;
+ this.#dirty = true;
+ if (this.#writing) return;
+ this.#writing = (async () => {
+ try {
+ while (this.#dirty) {
+ this.#dirty = false;
+ try {
+ await this.#persist();
+ this.persistError = null;
+ } catch (error) {
+ this.persistError = error instanceof Error ? error.message : String(error);
+ }
+ }
+ } finally {
+ this.#writing = null;
+ }
+ })();
+ }
+
+ async #persist() {
+ const jobs = [...this.#jobs.values()]
+ .filter((job) => job.kind !== "stream")
+ .map((job) => ({
+ id: job.id,
+ key: job.key,
+ repository: job.repository,
+ artifactId: job.artifactId,
+ artifactName: job.artifactName,
+ account: job.account ?? null,
+ attempt: job.attempt,
+ status: job.status,
+ stage: job.stage,
+ error: job.error,
+ startedAt: job.startedAt,
+ finishedAt: job.finishedAt,
+ progress: job.progress,
+ }));
+ const temporary = `${this.#file}.${process.pid}.${++this.#sequence}.tmp`;
+ await mkdir(dirname(this.#file), { recursive: true });
+ try {
+ await writeFile(temporary, `${JSON.stringify({ version: 1, jobs }, null, 2)}\n`, "utf8");
+ await rename(temporary, this.#file);
+ } catch (error) {
+ await rm(temporary, { force: true }).catch(() => {});
+ throw error;
+ }
+ }
+
+ update(job, patch) {
+ if (patch.live) Object.assign(job.live, patch.live);
+ if (patch.stage) job.stage = patch.stage;
+ if (patch.progress) job.progress = patch.progress;
+ if (patch.artifactName) job.artifactName = patch.artifactName;
+ if (patch.activity !== false) job.lastActivityAt = Date.now();
+ this.#emit(job);
+ }
+
+ cancel(id, reason = "Cancelled by user.") {
+ const job = this.#jobs.get(id);
+ if (!job || !ACTIVE.has(job.status)) return false;
+ job.controller.abort(new JobCancelled(reason));
+ return true;
+ }
+
+ cancelAll(reason) {
+ const active = this.activeJobs();
+ for (const job of active) job.controller.abort(new JobCancelled(reason));
+ return active;
+ }
+
+ #idleSeconds(job) {
+ if (!ACTIVE.has(job.status)) return 0;
+ return Math.floor((Date.now() - job.lastActivityAt) / 1000);
+ }
+
+ snapshot(job) {
+ const prompts = [];
+ if (ACTIVE.has(job.status)) {
+ for (const kind of job.kind === "stream" ? STREAM_KINDS : ALL_KINDS) {
+ const current = kind === "idleSeconds" ? this.#idleSeconds(job) : job.live[kind] ?? 0;
+ const limit = this.#policy.get(kind);
+ if (current > limit) {
+ prompts.push({
+ kind,
+ label: LIMIT_KINDS[kind].label,
+ unit: LIMIT_KINDS[kind].unit,
+ current,
+ limit,
+ minimum: this.#policy.minimum(kind),
+ });
+ }
+ }
+ }
+ return {
+ id: job.id,
+ kind: job.kind ?? "artifact",
+ key: job.key,
+ repository: job.repository,
+ artifactId: job.artifactId,
+ artifactName: job.artifactName,
+ account: job.account ?? null,
+ attempt: job.attempt,
+ status: job.status,
+ stage: job.stage,
+ progress: job.progress,
+ error: job.error,
+ startedAt: job.startedAt,
+ finishedAt: job.finishedAt,
+ limits: this.#policy.snapshot(),
+ prompts,
+ };
+ }
+
+ #emit(job) {
+ const snapshot = this.snapshot(job);
+ for (const listener of this.#listeners) {
+ try {
+ listener(snapshot);
+ } catch {
+ // A faulty subscriber must not disturb job execution.
+ }
+ }
+ }
+
+ #trim() {
+ const finished = [...this.#jobs.values()].filter((job) => !ACTIVE.has(job.status));
+ for (const job of finished.slice(0, Math.max(0, finished.length - MAX_FINISHED_JOBS))) {
+ this.#jobs.delete(job.id);
+ }
+ }
+
+ // Idle time changes without any event, so active jobs are re-broadcast once a second.
+ #syncIdleTimer() {
+ const active = this.activeJobs().length > 0;
+ if (active && !this.#idleTimer) {
+ this.#idleTimer = setInterval(() => {
+ for (const job of this.activeJobs()) this.#emit(job);
+ }, 1_000);
+ this.#idleTimer.unref?.();
+ } else if (!active && this.#idleTimer) {
+ clearInterval(this.#idleTimer);
+ this.#idleTimer = null;
+ }
+ }
+}
diff --git a/extensions/pr-artifact-explorer/limits.mjs b/extensions/pr-artifact-explorer/limits.mjs
new file mode 100644
index 0000000000..81b435946e
--- /dev/null
+++ b/extensions/pr-artifact-explorer/limits.mjs
@@ -0,0 +1,166 @@
+import { mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { DATA_ROOT, DEFAULT_SOFT_LIMITS } from "./constants.mjs";
+
+export const LIMIT_KINDS = Object.freeze({
+ downloadBytes: { label: "Download size", unit: "bytes" },
+ zipEntries: { label: "ZIP entries", unit: "count" },
+ centralDirectoryBytes: { label: "ZIP directory size", unit: "bytes" },
+ streamedEntryBytes: { label: "Decompressed file size", unit: "bytes" },
+ idleSeconds: { label: "Idle warning", unit: "seconds" },
+});
+
+export const LIMITS_FILE = join(DATA_ROOT, "limits.json");
+
+export class LimitError extends Error {
+ constructor(message, details = {}) {
+ super(message);
+ this.name = "LimitError";
+ this.code = details.code ?? "limit_rejected";
+ Object.assign(this, details);
+ }
+}
+
+function normalizeValue(kind, value) {
+ const number = Number(value);
+ if (!Number.isFinite(number) || number <= 0) {
+ throw new LimitError(`${LIMIT_KINDS[kind].label} must be a positive number.`, {
+ code: "invalid_limit",
+ kind,
+ });
+ }
+ return Math.ceil(number);
+}
+
+/**
+ * Soft limits are warnings with a user-tunable threshold. They never stop work:
+ * crossing one raises a prompt while the job keeps running, and a submitted
+ * value is only accepted when it is at least the live value at that instant.
+ */
+export class LimitPolicy {
+ #values = { ...DEFAULT_SOFT_LIMITS };
+ #live = new Map();
+ #file;
+ #loaded = null;
+ #listeners = new Set();
+ #writing = null;
+ #dirty = false;
+ #sequence = 0;
+ persistError = null;
+ loadWarning = null;
+
+ constructor(file = LIMITS_FILE) {
+ this.#file = file;
+ }
+
+ load() {
+ this.#loaded ??= (async () => {
+ try {
+ const saved = JSON.parse(await readFile(this.#file, "utf8"));
+ for (const kind of Object.keys(LIMIT_KINDS)) {
+ const value = Number(saved?.[kind]);
+ if (Number.isFinite(value) && value > 0) this.#values[kind] = Math.ceil(value);
+ }
+ } catch (error) {
+ if (error?.code === "ENOENT") return;
+ if (error instanceof SyntaxError) {
+ this.loadWarning = `Saved limits at ${this.#file} are corrupt and were ignored; defaults are in use (${error.message}).`;
+ return;
+ }
+ throw error;
+ }
+ })();
+ return this.#loaded;
+ }
+
+ get(kind) {
+ return this.#values[kind];
+ }
+
+ snapshot() {
+ return { ...this.#values };
+ }
+
+ onChange(listener) {
+ this.#listeners.add(listener);
+ return () => this.#listeners.delete(listener);
+ }
+
+ /** Registers a function that returns the live value for a kind; returns an unregister callback. */
+ trackLive(owner, kind, read) {
+ const key = `${owner}:${kind}`;
+ this.#live.set(key, { kind, read });
+ return () => this.#live.delete(key);
+ }
+
+ liveCurrent(kind) {
+ let current = 0;
+ for (const entry of this.#live.values()) {
+ if (entry.kind === kind) current = Math.max(current, Number(entry.read()) || 0);
+ }
+ return current;
+ }
+
+ minimum(kind) {
+ return Math.max(this.liveCurrent(kind), 1);
+ }
+
+ /** Synchronous so the live check and the write cannot interleave. */
+ submit(kind, value) {
+ if (!LIMIT_KINDS[kind]) {
+ throw new LimitError(`Unknown limit: ${kind}.`, { code: "unknown_limit", kind });
+ }
+ const requested = normalizeValue(kind, value);
+ const minimum = this.minimum(kind);
+ if (requested < minimum) {
+ throw new LimitError(
+ `${LIMIT_KINDS[kind].label} must be at least the current value (${minimum.toLocaleString()}).`,
+ { code: "below_current", kind, minimum, requested },
+ );
+ }
+ this.#values[kind] = requested;
+ for (const listener of this.#listeners) listener(kind, requested);
+ this.#schedulePersist();
+ return { kind, limit: requested, minimum };
+ }
+
+ /** Resolves once every submitted value has been written (or failed; see persistError). */
+ async flush() {
+ while (this.#writing) await this.#writing;
+ }
+
+ // Writes are serialized; each write snapshots the latest values, so the last submit wins.
+ #schedulePersist() {
+ this.#dirty = true;
+ if (this.#writing) return;
+ this.#writing = (async () => {
+ try {
+ while (this.#dirty) {
+ this.#dirty = false;
+ try {
+ await this.#persist();
+ this.persistError = null;
+ } catch (error) {
+ this.persistError = error instanceof Error ? error.message : String(error);
+ }
+ }
+ } finally {
+ this.#writing = null;
+ }
+ })();
+ }
+
+ async #persist() {
+ const temporary = `${this.#file}.${process.pid}.${++this.#sequence}.tmp`;
+ await mkdir(dirname(this.#file), { recursive: true });
+ try {
+ await writeFile(temporary, `${JSON.stringify(this.#values, null, 2)}\n`, "utf8");
+ await rename(temporary, this.#file);
+ } catch (error) {
+ await rm(temporary, { force: true }).catch(() => {});
+ throw error;
+ }
+ }
+}
+
+export const limitPolicy = new LimitPolicy();
diff --git a/extensions/pr-artifact-explorer/markdown-preview.test.mjs b/extensions/pr-artifact-explorer/markdown-preview.test.mjs
new file mode 100644
index 0000000000..57109e0ac5
--- /dev/null
+++ b/extensions/pr-artifact-explorer/markdown-preview.test.mjs
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { runInNewContext } from "node:vm";
+import { fileURLToPath } from "node:url";
+import test from "node:test";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const sandbox = { window: {} };
+runInNewContext(await readFile(join(here, "assets", "markdown-preview.js"), "utf8"), sandbox);
+const { toHtml } = sandbox.window.MarkdownPreview;
+
+test("markdown renders common blocks and inline formatting", () => {
+ const html = toHtml("# Title\n\nHello **bold** and `code`.\n\n- a\n- b\n\n1. one\n\n| A | B |\n|---|---|\n| 1 | 2 |\n\n```js\nx<1\n```");
+ assert.match(html, /Title<\/h1>/);
+ assert.match(html, /bold<\/strong>/);
+ assert.match(html, /
Copy manually
Your browser blocked clipboard access. Select this text and copy it.
`; + dialog.querySelector("textarea").value = text; + dialog.addEventListener("close", () => { + dialog.remove(); + if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus(); + }, { once: true }); + dialog.addEventListener("keydown", (event) => { + if (event.key === "Escape") event.stopPropagation(); + }); + document.body.append(dialog); + dialog.showModal(); + dialog.querySelector("textarea").select(); + } + showToast(ok ? `${label} to clipboard.` : "Copy failed. Select the text and copy manually.", ok ? "info" : "error"); + return ok; + } +} + +function copyButtonHtml(text, label, iconName = "copy") { + return ``; +} + +function pageTitleHtml(title, number, url) { + const text = String(title ?? ""); + const numberHtml = + Number.isInteger(number) && url + ? `#${number}${copyButtonHtml(url, `Copy link to #${number}`, "copy")}` + : Number.isInteger(number) + ? `#${number}` + : ""; + return `${titleHtml(text)}${copyButtonHtml(text, "Copy title")}${numberHtml}
`; +} + +document.addEventListener("click", (event) => { + const button = event.target instanceof Element ? event.target.closest("[data-copy]") : null; + if (!button) return; + event.preventDefault(); + const label = button.dataset.copyLabel ?? "Copied"; + void copyText(button.dataset.copy ?? "", label.replace(/^Copy /, "Copied ")); +}); + +/* ---------- natural-language navigation ---------- */ + +function isPlainRepositoryInput(value) { + return /^[\w.-]+\/[\w.-]+$/.test(String(value ?? "").trim()); +} + +async function navigateNaturalLanguage(value) { + const input = String(value ?? "").trim(); + if (!input) return false; + try { + const parsed = await api("/api/targets/parse", { + method: "POST", + body: { input, repository: bootstrapState?.prefs?.repository }, + }); + if (parsed.target?.kind === "command") { + handleBrowserCommand(parsed.target); + return true; + } + if (!parsed.route) throw new Error("That request cannot be opened."); + location.hash = parsed.route; + if (location.hash === parsed.route) void renderRoute(); + return true; + } catch (error) { + showToast(error instanceof Error ? error.message : String(error), "error"); + return true; + } +} + +async function initialRouteFromInput(input) { + if (input.route) return String(input.route).startsWith("#") ? input.route : `#${input.route}`; + const repository = input.repository ?? bootstrapState.prefs.repository; + if (input.artifactId && input.repository) { + return `#/artifact/${encodeURIComponent(repository)}/${Number(input.pullNumber ?? 0)}/${Number(input.artifactId)}`; + } + if (input.url) { + const parsed = await api("/api/targets/parse", { method: "POST", body: { input: input.url, repository } }); + if (parsed.target?.kind === "url") { + return browserHash({ url: parsed.target.url, preset: input.preset, width: input.width, height: input.height, zoom: input.zoom }); + } + return parsed.route; + } + if (input.pullNumber && input.repository) return pullHash(repository, input.pullNumber); + if (input.repository) return pullsHashForRepository(repository); + return null; +} + +/* ---------- connection and restart ---------- */ + +function setConnectionState(connected) { + const el = document.getElementById("connection-state"); + if (!el) return; + el.dataset.state = connected ? "connected" : "reconnecting"; + el.textContent = connected ? "Connected" : "Reconnecting…"; + el.hidden = connected; +} + +function handleRestartEvent() { + setConnectionState(false); + showToast("Restarting the canvas. Running downloads continue in the background."); +} + +document.addEventListener("DOMContentLoaded", () => { + installDisclosurePopover("app-options", "app-options-button"); + document.getElementById("app-options")?.addEventListener("click", (event) => { + if (event.target instanceof Element && event.target.closest("a, button")) { + document.getElementById("app-options").hidePopover(); + } + }); + const updateNavigation = () => { + for (const [id, route] of [["docs-link", "#/docs"]]) { + const link = document.getElementById(id); + if (location.hash.startsWith(route)) link?.setAttribute("aria-current", "page"); + else link?.removeAttribute("aria-current"); + } + }; + window.addEventListener("hashchange", updateNavigation); + updateNavigation(); + document.getElementById("restart-button")?.addEventListener("click", async (event) => { + const button = event.currentTarget; + button.disabled = true; + try { + const result = await api("/api/restart", { method: "POST", body: {} }); + showToast(`Restarting. ${result.jobsPreserved ?? 0} running job(s) will continue.`); + let attempts = 0; + const poll = async () => { + attempts += 1; + try { + await api("/api/jobs"); + setConnectionState(true); + button.disabled = false; + void renderRoute({ force: true }); + } catch { + if (attempts < 40) setTimeout(poll, 500); + else { + button.disabled = false; + showToast("The canvas did not come back. Use the Restart canvas action or reopen it.", "error"); + } + } + }; + setTimeout(poll, 600); + } catch (error) { + button.disabled = false; + showToast(error instanceof Error ? error.message : String(error), "error"); + } + }); +}); + +/* ---------- jobs and soft limits ---------- */ + +function handleSnapshotEvent(snapshot) { + jobsById.clear(); + for (const job of snapshot.jobs ?? []) jobsById.set(job.id, job); + jobWarnings = snapshot.warnings ?? []; + if (snapshot.persistError) jobWarnings = [...jobWarnings, `Settings could not be saved: ${snapshot.persistError}`]; + renderJobPanel(); +} + +function handleJobEvent(job) { + const wasActive = jobsById.get(job.id)?.status === "running"; + jobsById.set(job.id, job); + if (job.kind !== "stream" && job.progress) updateArtifactDownloadProgress({ artifactId: job.artifactId, artifactName: job.artifactName, stage: job.stage, ...job.progress }); + if (job.status !== "running") { + jobWaiters.get(job.id)?.forEach((resolve) => resolve(job)); + jobWaiters.delete(job.id); + if (wasActive && job.kind === "stream" && job.status === "succeeded") jobsById.delete(job.id); + } + renderJobPanel(); +} + +function waitForJob(id) { + return new Promise((resolve) => { + const current = jobsById.get(id); + if (current && current.status !== "running") return resolve(current); + const list = jobWaiters.get(id) ?? []; + list.push(resolve); + jobWaiters.set(id, list); + const poll = async () => { + if (!jobWaiters.get(id)?.includes(resolve)) return; + try { + const { job } = await api(`/api/jobs/${encodeURIComponent(id)}`); + if (job && job.status !== "running") { + jobsById.set(id, job); + jobWaiters.get(id)?.forEach((fn) => fn(job)); + jobWaiters.delete(id); + renderJobPanel(); + return; + } + } catch { + /* the SSE stream will deliver the result after reconnect */ + } + setTimeout(poll, 3000); + }; + setTimeout(poll, 3000); + }); +} + +function formatLimitValue(value, unit) { + if (unit === "bytes") return formatBytes(value); + if (unit === "seconds") return `${value}s`; + return Number(value).toLocaleString(); +} + +function installJobPanel() { + if (jobPanel) return; + jobPanel = document.createElement("aside"); + jobPanel.className = "job-panel"; + jobPanel.setAttribute("aria-label", "Background jobs"); + jobPanel.setAttribute("aria-live", "polite"); + jobPanel.hidden = true; + document.body.append(jobPanel); + jobPanel.addEventListener("click", (event) => { + const button = event.target instanceof Element ? event.target.closest("[data-job-action]") : null; + if (!button) return; + const id = button.dataset.jobId; + const action = button.dataset.jobAction; + if (action === "cancel") void jobCommand(id, "cancel"); + else if (action === "retry") void retryJob(id); + else if (action === "dismiss") { + jobsById.delete(id); + renderJobPanel(); + } + }); + jobPanel.addEventListener("submit", (event) => { + const form = event.target; + if (!(form instanceof HTMLFormElement) || !form.dataset.limitKind) return; + event.preventDefault(); + void submitLimit(form); + }); +} + +async function jobCommand(id, command) { + try { + await api(`/api/jobs/${encodeURIComponent(id)}/${command}`, { method: "POST", body: {} }); + } catch (error) { + showToast(error instanceof Error ? error.message : String(error), "error"); + } +} + +async function retryJob(id) { + const job = jobsById.get(id); + if (!job || job.kind === "stream") return; + try { + const started = await api("/api/artifacts/inspect", { + method: "POST", + body: { artifactId: job.artifactId, repository: job.repository }, + }); + jobsById.set(started.job.id, started.job); + if (started.job.id !== id) jobsById.delete(id); + renderJobPanel(); + showToast("Retrying. A completed download is reused instead of fetched again."); + } catch (error) { + showToast(error instanceof Error ? error.message : String(error), "error"); + } +} + +async function submitLimit(form) { + const kind = form.dataset.limitKind; + const unit = form.dataset.limitUnit; + const raw = Number(new FormData(form).get("value")); + const value = unit === "bytes" ? Math.round(raw * 1024 * 1024) : Math.round(raw); + const response = await fetch("/api/limits", { + method: "PUT", + headers: { "content-type": "application/json", "x-pr-artifact-explorer-token": capabilityToken }, + body: JSON.stringify({ kind, value }), + }); + const payload = await response.json().catch(() => ({})); + if (response.status === 409) { + showToast(`That is below the current live value. The new minimum is ${formatLimitValue(payload.minimum, unit)}.`, "error"); + const input = form.querySelector("input"); + if (input) input.min = String(unit === "bytes" ? Math.ceil(payload.minimum / 1048576) : payload.minimum); + return; + } + if (!response.ok) { + showToast(payload.error ?? "The limit could not be saved.", "error"); + return; + } + showToast(`${LIMIT_LABELS[kind] ?? kind} limit raised. Work was not interrupted.`); + if (payload.limits) handleSnapshotLimits(payload.limits); +} + +const LIMIT_LABELS = { + downloadBytes: "Download size", + zipEntries: "ZIP entries", + centralDirectoryBytes: "ZIP directory size", + streamedEntryBytes: "Decompressed file size", + idleSeconds: "Idle warning", +}; + +function handleSnapshotLimits() { + renderJobPanel(); +} + +function jobCardHtml(job) { + const active = job.status === "running"; + const pct = Number.isFinite(job.progress?.percent) ? Math.max(0, Math.min(100, job.progress.percent)) : null; + const title = job.kind === "stream" ? `Decompressing ${job.artifactName}` : job.artifactName; + const prompts = (job.prompts ?? []) + .map((prompt) => { + const min = prompt.unit === "bytes" ? Math.ceil(prompt.minimum / 1048576) : prompt.minimum; + const unitLabel = prompt.unit === "bytes" ? "MiB" : prompt.unit === "seconds" ? "seconds" : ""; + return ``; + }) + .join(""); + const status = { running: "Running", succeeded: "Done", failed: "Failed", cancelled: "Cancelled", interrupted: "Interrupted" }[job.status] ?? job.status; + return `${escapeHtml(job.error)}
` : ""}
+ ${prompts}
+
+ ${active ? `` : ""}
+ ${!active && job.kind !== "stream" && job.status !== "succeeded" ? `` : ""}
+ ${!active ? `` : ""}
+
+ ${escapeHtml(text)}
`).join("");
+ jobPanel.hidden = visible.length === 0 && !warnings;
+ if (jobPanel.contains(document.activeElement) && document.activeElement.tagName === "INPUT") return;
+ jobPanel.innerHTML = `${warnings}${visible.map(jobCardHtml).join("")}`;
+}
+
+/* ---------- docs ---------- */
+
+const SHORTCUT_REFERENCE = `-
+
- ?
- Show or hide shortcuts +
- g then d
- Open Docs +
- g then b
- Open Browser +
- /
- Focus the address box +
- Alt + ← / →
- Go back / forward +
- Ctrl + R
- Refresh the preview +
- + / − / 0
- Zoom in / out / reset +
- Shift + S
- Take a screenshot +
- Shift + C
- Toggle controlled browser +
Start with the change you want to understand. Open a pull request, inspect its build artifacts, or bring a local website into the browser—without leaving the canvas.
+Your first look
+-
+
- Find your repository. Use the field in the header to enter
owner/repository, or paste a GitHub pull request URL. You can also press g then b and enter a request such asopen PR 123 in github/awesome-copilot.
+ - Open the pull request. Choose a change from the list to see its workflow artifacts. An issue URL opens issue details instead; issues do not have PR artifacts. +
- Choose what to inspect. Open an artifact to browse its files or preview a supported file. A website artifact with an HTML page shows a Browser view button in the preview toolbar for a closer look at different screen sizes. Videos (.webm, .mp4, .mov) play with native controls, and JUnit XML test reports open as a summarized report. +
Artifact Explorer reads build outputs. It does not run artifact programs, install their dependencies, or execute their build scripts.
+Already have a page running?
+Press g then b (or open a localhost link, an agent request, or a shared route), enter an HTTP(S) or localhost URL, and press Enter. Keep your development server running on the same machine as the preview service.
+ ${docsFigure("preview-controls", "Artifact Explorer previewing a sample localhost website, with Mobile selected and compact navigation, zoom, Screenshot and Options controls.", "The redesigned browser, showing a sample localhost page and illustrative account/repository metadata.", 882, 480)} +Where next?Open a PR or artifactPreview a local website
`],
+ ["artifacts", "PRs and artifacts", `
+ Move from a proposed change to the files it produced. A repository, PR URL, artifact link, or plain-language request can be your starting point.
+Open a pull request
+-
+
- Choose a repository. Enter
github/awesome-copilotin the header, or use the repository quick switch. Pins and favorites make frequently used repositories easier to return to.
+ - Find the change. Select a pull request from the list. To go straight to one, paste its GitHub URL or enter
open PR 123in the address bar (g then b) using the current repository context.
+ - Inspect an artifact. Choose an available workflow artifact, then browse the file list. Select a supported file to read, watch, or preview it. Use Raw beside Download to see the original source or a bounded hex view; Preview returns to the rendered view. +
Jump straight to an artifact
+Paste a GitHub artifact URL or an Explorer share route into the address field. Explorer resolves the target; you do not need to reconstruct its local preview address.
+When an artifact is missing
+Check that the workflow completed and uploaded an artifact. Availability also depends on your account’s repository access and the artifact’s retention period. Keep the original workflow or PR open when you need to confirm those details.
+Keep exploringShare a specific viewUnderstand background downloads
`],
+ ["browser", "Pages and device sizes", `
+ See the page, not a wall of controls. The address bar handles navigation; the second row gives you device size, visual zoom, and a screenshot.
+Preview a local or published page
+-
+
- Start your site. Keep your local development server running, or use an existing HTTP(S) address. +
- Open the address bar. Press g then b, or use Browser view on an HTML artifact. Enter a URL such as
http://localhost:3000and press Enter. A short localhost address such aslocalhost:3000works too.
+ - Navigate. Use Back, Forward, and Refresh for addresses opened through the toolbar. Use the page’s own controls for navigation inside an embedded page; cross-origin history is not observable by Explorer. +
Size and zoom do different jobs
+Device size changes the layout. Mobile uses 390 × 844 CSS pixels, Tablet 768 × 1024, and Desktop 1440 × 900. Native follows the panel. Choose Custom to reveal width and height in Options; Rotate switches orientation.
+Zoom changes only what you see. The − and + buttons scale the preview without changing its CSS viewport. In Options, Fit makes it fit the available width, and 100% resets the visual scale.
+ ${docsFigure("preview-controls", "Mobile preview controls with visual zoom separate from the device preset.", "Sample mobile preview: the device sets the page layout; zoom adjusts its display size.", 882, 480)} +Open it in your default browser
+Choose Options → Open in default browser to open the current page in your operating system’s browser. For a website artifact, Explorer restarts its local preview with your current light or dark theme and keeps the same route, query and hash. That local server runs only while Artifact Explorer is open; it is not a published site.
+Theme
+Explorer’s own controls follow the canvas theme. Website artifacts it serves, and its fresh screenshots and controlled Chromium, follow the current light or dark setting and update when it changes. External websites keep their own theme rules.
+If the page will not embed
+Some sites deliberately refuse to appear in an iframe. Explorer reports the restriction rather than bypassing it. Open Options → Controlled browser to use an isolated Chromium view with its own real history.
+ `], + ["sharing", "Sharing a view", ` +Give a teammate the change and the view you meant—not a temporary local address they cannot open.
+Share the preview
+-
+
- Set up the view. Open the page or website artifact and choose its device preset, custom size, and zoom. +
- Copy its route. Open Options → Copy share link. Explorer includes the view settings. For a website artifact, it uses the stable artifact route instead of the local preview port. +
- Open it in Explorer. Your teammate can paste the copied route into the address field. They still need access to the repository and an available artifact. A shared localhost URL needs a running server on their own machine. +
Share the GitHub context
+The copy button beside a title copies the title alone. The linked #number opens the canonical GitHub issue or PR; its adjacent copy button copies that GitHub link. Use those when the conversation is about the change rather than a particular preview.
+If clipboard access is blocked
+Explorer offers a manual-copy dialog with selectable text. Copy that text using your browser’s standard shortcut, then close the dialog. The route is the same one the copy action would have written.
+ `], + ["screenshots", "Taking screenshots", ` +A useful screenshot tells the reviewer what they are seeing. Choose the viewport first, and be clear about whether you captured a fresh render or the controlled browser’s current state.
+Capture a page
+-
+
- Open the address. Choose the device preset or custom dimensions you want to document. Visual zoom does not change the capture’s viewport. +
- Choose the capture mode. Normal Browser loads the URL fresh in headless Chromium. Options → Controlled browser captures the isolated browser’s current page state instead. +
- Select Screenshot. The saved result appears below the preview. Its caption identifies the capture mode, viewport, and saved file path; use the thumbnail link to download it. +
Fresh render or current state?
+Fresh render starts from the address again. It does not include an unsaved form, scroll position, or other live iframe state. Explorer cannot read that state across origins.
+Controlled current state captures the isolated Chromium session, not the embedded iframe. A form edited only in the iframe is not transferred when you switch modes.
+Set up Chromium if capture is unavailable
Setup is explicit; Explorer does not install anything silently. Run npm install in the extension folder (installs optional playwright-core) and npx playwright-core install chromium.
You can set PR_ARTIFACT_EXPLORER_CHROMIUM to a Chromium or Chrome executable. The old PR_ARTIFACT_EXPLORER_PLAYWRIGHT variable is no longer supported and must be unset. Installed Chrome and Edge are tried as a fallback.
Files are saved in the session’s artifact-explorer-screenshots folder.
You can keep reviewing while an artifact downloads. Downloads, extraction, and indexing run as background jobs; leaving the page or restarting the canvas does not cancel them.
+A warning is not a stop sign
+Soft limits flag work larger or slower than your current warning settings: download size, ZIP entry count, directory size, decompressed file size, and idle time. When a limit is crossed, the job panel shows the live value and work continues.
+-
+
- Read the live minimum. The prompt shows what the job has already reached. That number can rise while you decide. +
- Allow a larger value. Enter a new limit at least as large as the current minimum, then select Allow larger. If the live value has overtaken your entry, Explorer shows the new minimum. +
- Continue reviewing—or cancel deliberately. Navigate elsewhere while the job progresses. Use Cancel only when you want to stop that job. +
What can actually stop a job?
+Cancel is explicit. Corrupt archives, CRC mismatches, unsafe paths, integrity failures, and a real lack of disk space are true errors—not warnings that can be dismissed by raising a limit.
+After an interruption
+An unexpected exit can leave a job marked Interrupted. Choose Retry to resume the workflow; a completed download can be reused. Failed jobs keep their error visible so you can fix the cause before retrying.
+Need to reconnect?Restart and recover safely
`],
+ ["recovery", "Troubleshooting", `
+ Start with the message beside the preview or job. It usually tells you whether to check the server, change browser mode, or retry the work.
+The preview is blank or unreachable
+-
+
- Check the address. Use HTTP(S), confirm the port, and keep the local server running on the preview service’s machine. +
- Refresh the page. Use the browser row’s Refresh action after the server is ready. +
- Read an embedding warning. If the site refuses iframes, choose Options → Controlled browser. Raising a download limit cannot fix an embedding restriction. +
The canvas is reconnecting
+Wait for the connection to return. If you need a clean canvas restart, open More → Restart canvas. Running downloads continue independently; restart is not a substitute for Cancel.
+A job failed or an artifact is unavailable
+Check the error, repository access, workflow result, and artifact retention. For a recoverable failed or interrupted job, use Retry. Integrity and disk-space errors need their underlying cause resolved first.
+Re-run a workflow
+Each artifact row has a Re-run button. It opens a confirmation naming the repository, workflow, run number, attempt and commit. Choose all jobs or, for failed runs, failed jobs only. A re-run reuses the original commit, ref and triggering actor, not the pull request's latest head, and GitHub allows it up to 30 days after the original run and at most 50 re-runs. Nothing is sent until you confirm, and existing artifacts are kept until the new run produces replacements. The button only requests the re-run; it does not mean new artifacts are ready. Your token may lack Actions write permission, in which case GitHub's refusal is shown.
+A screenshot failed
+Open a reachable address before capturing, and check Chromium availability. See Taking screenshots for explicit setup and the difference between fresh and current-state captures.
`], + ["shortcuts", "Keyboard shortcuts", ` +Keep common actions close at hand. These shortcuts work when focus is in the Explorer, outside a text field—not inside the previewed website.
+ ${SHORTCUT_REFERENCE} +Explorer history
+The right-aligned Back and Forward buttons in the breadcrumb row move through Explorer's own views only, never the app or a previewed site. Opening a Browser view is one step; changing its URL, zoom, or size replaces that step. Browser view keeps a compact breadcrumb row with the same buttons (named "Back in Artifact Explorer"), separate from the address-bar "Back in site" and "Forward in site" buttons that move through the previewed website.
+Navigate without a mouse
+Use Tab to move through the header, address bar, and preview controls. Open Options or More with Enter, then Tab through their actions. Escape closes the menu and returns focus to its trigger.
+The g shortcuts are a sequence: press g, then the second key. Browser navigation, zoom, and capture shortcuts apply while Browser is open.
+ `], +]; + +function renderDocs(route) { + const active = DOCS_SECTIONS.some(([id]) => id === route.section) ? route.section : DOCS_SECTIONS[0][0]; + setBreadcrumbs([{ label: "Artifact Explorer", href: pullsHashForRepository(bootstrapState.prefs.repository) }, { label: "Docs" }]); + const [, , html] = DOCS_SECTIONS.find(([id]) => id === active); + view.innerHTML = `
+
+
`;
+ window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+ document.getElementById("docs-topic").addEventListener("change", (event) => {
+ location.hash = `#/docs/${event.target.value}`;
+ });
+ const searchText = new Map(DOCS_SECTIONS.map(([id, label, body]) => {
+ const plain = new DOMParser().parseFromString(body, "text/html").body.textContent;
+ return [id, `${label} ${plain}`.toLocaleLowerCase()];
+ }));
+ document.getElementById("docs-search").addEventListener("input", (event) => {
+ const query = event.target.value.trim().toLocaleLowerCase();
+ const words = query.split(/\s+/).filter(Boolean);
+ let count = 0;
+ for (const link of view.querySelectorAll("[data-doc-topic]")) {
+ const matches = words.every(word => searchText.get(link.dataset.docTopic).includes(word));
+ link.hidden = !matches;
+ if (matches) count += 1;
+ }
+ view.querySelector(".docs-nav").dataset.searching = String(Boolean(query));
+ const status = document.getElementById("docs-search-status");
+ status.hidden = !query;
+ status.textContent = count ? `${count} matching topic${count === 1 ? "" : "s"}` : "No matching topics. Try “preview”, “share”, or “limits”.";
+ });
+}
+
+/* ---------- issue ---------- */
+
+async function renderIssue(route, sequence) {
+ setBreadcrumbs([{ label: route.repository, href: pullsHashForRepository(route.repository) }, { label: `Issue #${route.issueNumber}` }]);
+ loadingView();
+ const payload = await api(`/api/issues/${route.issueNumber}?repo=${encodeURIComponent(route.repository)}`);
+ if (sequence !== renderSequence) return;
+ const issue = payload.issue;
+ const pullLink = issue.isPullRequest ? `This is a pull request. Open its artifacts.
` : ""; + view.innerHTML = `
+ ${pageTitleHtml(issue.title, issue.number, issue.url)}
+
`;
+}
+
+/* ---------- browser preview ---------- */
+
+function disposeBrowser() {
+ browserCleanup?.();
+ browserCleanup = null;
+ browserState = null;
+}
+
+function clampZoom(value) {
+ return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
+}
+
+function installDisclosurePopover(panelId, triggerId) {
+ const panel = document.getElementById(panelId);
+ const trigger = document.getElementById(triggerId);
+ if (!panel || !trigger) return () => {};
+ const position = (opening = false) => {
+ if (opening !== true && !panel.matches(":popover-open")) return;
+ const rect = trigger.getBoundingClientRect();
+ const width = panel.offsetWidth || Number.parseFloat(getComputedStyle(panel).width) || 320;
+ panel.style.maxHeight = `${Math.max(120, window.innerHeight - rect.bottom - 16)}px`;
+ panel.style.top = `${rect.bottom + 6}px`;
+ panel.style.left = `${Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8))}px`;
+ };
+ const toggle = (event) => {
+ trigger.setAttribute("aria-expanded", String(event.newState === "open"));
+ position();
+ };
+ const restoreFocus = (event) => {
+ if (event.newState === "open") position(true);
+ if (event.newState === "closed" && panel.contains(document.activeElement)) trigger.focus();
+ };
+ const dismiss = (event) => {
+ if (event.key !== "Escape" || !panel.matches(":popover-open") || document.querySelector("dialog[open]")) return;
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ panel.hidePopover();
+ trigger.focus();
+ };
+ panel.addEventListener("beforetoggle", restoreFocus);
+ panel.addEventListener("toggle", toggle);
+ window.addEventListener("resize", position);
+ document.addEventListener("keydown", dismiss, true);
+ return () => {
+ panel.removeEventListener("toggle", toggle);
+ panel.removeEventListener("beforetoggle", restoreFocus);
+ window.removeEventListener("resize", position);
+ document.removeEventListener("keydown", dismiss, true);
+ };
+}
+
+function renderBrowser(route) {
+ disposeBrowser();
+ const initial = decodeViewClient(route.query.get("v"));
+ const preset = BROWSER_PRESETS[initial.preset] ? initial.preset : localStorage.getItem("pae.preset") || "native";
+ browserState = {
+ url: initial.url ?? "",
+ preset: BROWSER_PRESETS[preset] ? preset : "native",
+ width: initial.width ?? BROWSER_PRESETS.custom.width,
+ height: initial.height ?? BROWSER_PRESETS.custom.height,
+ zoom: Number.isFinite(initial.zoom) ? clampZoom(initial.zoom) : 1,
+ fit: !Number.isFinite(initial.zoom),
+ orientation: initial.orientation === "landscape" ? "landscape" : "portrait",
+ history: [],
+ index: -1,
+ shots: [],
+ probe: null,
+ controlled: false,
+ };
+ setBreadcrumbs([{ label: "Artifact Explorer", href: pullsHashForRepository(bootstrapState.prefs.repository) }, { label: "Browser" }]);
+ const state = browserState;
+ view.innerHTML = `${escapeHtml(issue.state)} · opened by ${escapeHtml(issue.author ?? "unknown")} · ${issue.comments} comment(s)
+ ${issue.labels.length ? `${issue.labels.map((l) => `${escapeHtml(l)}`).join(" ")}
` : ""} + ${pullLink} +${escapeHtml(issue.body)}
+
+
`;
+
+ const $ = (id) => document.getElementById(id);
+ const frame = $("br-frame");
+ const stage = $("br-stage");
+ const cframe = $("br-cframe");
+ const disposeOptions = installDisclosurePopover("br-options", "br-options-button");
+ let controlledKey = "";
+
+ function viewport() {
+ const p = BROWSER_PRESETS[state.preset];
+ let w = state.preset === "custom" ? state.width : p.width;
+ let h = state.preset === "custom" ? state.height : p.height;
+ if (state.preset === "native") {
+ // Native follows the panel size only; zoom never changes the emulated viewport.
+ w = Math.max(320, Math.floor(stage.clientWidth - 34));
+ h = Math.max(480, Math.floor(window.innerHeight * 0.7));
+ } else if (state.orientation === "landscape") {
+ [w, h] = [h, w];
+ }
+ return { w, h };
+ }
+
+ function applyLayout() {
+ const { w, h } = viewport();
+ if (state.fit && state.preset !== "native") state.zoom = clampZoom(Math.min(1, (stage.clientWidth - 34) / w));
+ if (state.preset === "native" && state.fit) state.zoom = 1;
+ for (const el of [frame, cframe]) {
+ el.style.width = `${w}px`;
+ el.style.height = `${h}px`;
+ el.style.transform = `scale(${state.zoom})`;
+ el.classList.toggle("is-mobile", state.preset === "mobile");
+ }
+ frame.hidden = state.controlled;
+ cframe.hidden = !state.controlled;
+ const box = $("br-box");
+ box.style.width = `${w * state.zoom}px`;
+ box.style.height = `${h * state.zoom}px`;
+ $("br-zoom-label").textContent = `${Math.round(state.zoom * 100)}%`;
+ $("br-width").disabled = $("br-height").disabled = state.preset !== "custom";
+ $("br-dimensions").hidden = state.preset !== "custom";
+ $("br-rotate").disabled = state.preset === "native";
+ $("br-rotate").setAttribute("aria-pressed", String(state.orientation === "landscape"));
+ $("br-fit").setAttribute("aria-pressed", String(state.fit));
+ $("br-zoom-out").disabled = state.zoom <= ZOOM_MIN;
+ $("br-zoom-in").disabled = state.zoom >= ZOOM_MAX;
+ $("br-empty").hidden = Boolean(state.url);
+ box.hidden = !state.url;
+ $("br-back").disabled = !state.controlled && state.index <= 0;
+ $("br-forward").disabled = !state.controlled && state.index >= state.history.length - 1;
+ $("br-controlled").setAttribute("aria-pressed", String(state.controlled));
+ const key = `${state.preset}:${w}x${h}`;
+ if (state.controlled && controlledKey && key !== controlledKey) void syncControlled();
+ controlledKey = key;
+ const dpr = BROWSER_PRESETS[state.preset].dpr;
+ $("br-status").textContent = `${w} × ${h} CSS px${dpr > 1 ? ` · ${dpr}× screenshot pixels` : ""}`;
+ localStorage.setItem("pae.preset", state.preset);
+ void api("/api/browser/state", { method: "POST", body: { url: state.url, preset: state.preset, width: w, height: h, zoom: state.zoom } }).catch(() => {});
+ if (location.hash.startsWith("#/browser")) {
+ const next = browserHash({ url: state.url || undefined, preset: state.preset, width: state.preset === "custom" ? state.width : undefined, height: state.preset === "custom" ? state.height : undefined, zoom: state.fit ? undefined : state.zoom });
+ history.replaceState(null, "", next);
+ if (typeof navHistory !== "undefined") navHistory.replaceBrowser(next);
+ }
+ }
+
+ const controlledBody = () => {
+ const { w, h } = viewport();
+ return { preset: state.preset === "native" ? "custom" : state.preset, width: w, height: h, theme: resolvedCanvasTheme() };
+ };
+
+ async function showControlledFrame() {
+ const res = await fetch("/api/controlled/frame", {
+ method: "POST",
+ headers: { "x-pr-artifact-explorer-token": capabilityToken, "Content-Type": "application/json" },
+ body: "{}",
+ });
+ if (!res.ok) throw new Error(`Controlled view failed (${res.status}).`);
+ const previous = cframe.src;
+ cframe.src = URL.createObjectURL(await res.blob());
+ if (previous.startsWith("blob:")) URL.revokeObjectURL(previous);
+ }
+
+ async function controlledCall(action, body = {}) {
+ try {
+ const { controlled } = await api(`/api/controlled/${action}`, { method: "POST", body });
+ if (browserState !== state) return;
+ if (controlled?.url) {
+ state.url = controlled.url;
+ $("br-address").value = controlled.url;
+ }
+ await showControlledFrame();
+ applyLayout();
+ } catch (error) {
+ $("br-notice").hidden = false;
+ $("br-notice").textContent = error instanceof Error ? error.message : String(error);
+ }
+ }
+
+ const syncControlled = () => controlledCall("viewport", controlledBody());
+
+ async function setControlled(on) {
+ state.controlled = on;
+ $("br-notice").hidden = true;
+ applyLayout();
+ if (on && state.url) await controlledCall("navigate", { url: state.url, ...controlledBody() });
+ else if (!on && state.url) frame.src = state.url;
+ else if (on) showToast("Controlled browser is ready. Enter an address.");
+ }
+
+ async function load(url, { push = true } = {}) {
+ state.url = url;
+ $("br-address").value = url;
+ const notice = $("br-notice");
+ notice.hidden = true;
+ if (state.controlled) {
+ if (push) {
+ state.history = state.history.slice(0, state.index + 1);
+ state.history.push(url);
+ state.index = state.history.length - 1;
+ }
+ applyLayout();
+ if (url) await controlledCall("navigate", { url, ...controlledBody() });
+ return;
+ }
+ if (push) {
+ state.history = state.history.slice(0, state.index + 1);
+ state.history.push(url);
+ state.index = state.history.length - 1;
+ }
+ applyLayout();
+ if (!url) {
+ frame.removeAttribute("src");
+ return;
+ }
+ try {
+ const probe = await api("/api/probe", { method: "POST", body: { url } });
+ if (browserState !== state) return;
+ if (!probe.reachable) {
+ notice.hidden = false;
+ notice.textContent = `${probe.reason} Check that the server is running, then press Refresh.`;
+ } else if (!probe.embeddable) {
+ notice.hidden = false;
+ notice.textContent = `${probe.reason} This site refuses to be embedded, so it will appear blank here. The restriction is not bypassed. `;
+ const open = document.createElement("button");
+ open.type = "button";
+ open.className = "btn btn-sm";
+ open.textContent = "Open in controlled browser";
+ open.addEventListener("click", () => void setControlled(true));
+ notice.append(open);
+ }
+ } catch (error) {
+ notice.hidden = false;
+ notice.textContent = error instanceof Error ? error.message : String(error);
+ }
+ let owned = false;
+ try {
+ owned = (await api("/api/browser/owned", { method: "POST", body: { url } })).owned === true;
+ } catch {
+ owned = false;
+ }
+ if (browserState !== state) return;
+ state.owned = owned;
+ if (owned) frame.setAttribute("data-theme-aware-preview", "");
+ else frame.removeAttribute("data-theme-aware-preview");
+ frame.src = url;
+ }
+
+ async function submitAddress(text) {
+ const value = text.trim();
+ if (!value) return;
+ if (/^https?:\/\//i.test(value)) return load(value);
+ if (/^localhost(:\d+)?(\/|$)/i.test(value) || /^127\.0\.0\.1/.test(value)) return load(`http://${value}`);
+ await navigateNaturalLanguage(value);
+ }
+
+ const go = (delta) => {
+ if (state.controlled) return void controlledCall("history", { direction: delta < 0 ? "back" : "forward" });
+ const next = state.index + delta;
+ if (next < 0 || next >= state.history.length) return;
+ state.index = next;
+ void load(state.history[next], { push: false });
+ };
+ const refresh = () => {
+ if (state.controlled) return void controlledCall("history", { direction: "refresh" });
+ if (!state.url) return;
+ try {
+ frame.contentWindow.location.reload();
+ } catch {
+ frame.src = state.url;
+ }
+ };
+ const setZoom = (value) => {
+ state.fit = false;
+ state.zoom = clampZoom(value);
+ applyLayout();
+ };
+ const screenshot = async () => {
+ if (!state.url) return showToast("Open an address first.", "error");
+ const button = $("br-shot");
+ button.disabled = true;
+ const { w, h } = viewport();
+ try {
+ const { capture } = state.controlled
+ ? await api("/api/controlled/screenshot", { method: "POST", body: { fullPage: false } })
+ : await api("/api/capture", {
+ method: "POST",
+ body: { url: state.url, preset: state.preset === "native" ? "custom" : state.preset, width: w, height: h, fullPage: false, theme: resolvedCanvasTheme() },
+ });
+ const file = capture.path.split(/[\\/]/).pop();
+ const src = `/api/screenshots/${file}?token=${encodeURIComponent(capabilityToken)}`;
+ const res = await fetch(`/api/screenshots/${file}`, { headers: { "x-pr-artifact-explorer-token": capabilityToken } });
+ const blobUrl = URL.createObjectURL(await res.blob());
+ const figure = document.createElement("figure");
+ figure.innerHTML = `Browser preview
+ + + +
+ ![Controlled Chromium view]()
+
+
+ Open a page
+ Enter an HTTP(S) or localhost URL in the address bar, or open a website artifact.
${escapeHtml(label)}
+${escapeHtml(truncated ? value.slice(0, MAX_DETAIL_CHARS) : value)}
+ ${truncated ? `Output truncated after ${MAX_DETAIL_CHARS.toLocaleString()} characters. View the XML source for the full value.
` : ""} +
+
`;
+ }
+
+ function metric(label, value, category, iconName) {
+ return `
+ + ${icon("chevron-right")} + ${icon(ICONS[result.category])} + + ${escapeHtml(result.name)} + ${secondary ? `${escapeHtml(secondary)}` : ""} + + ${escapeHtml(result.seconds === null ? "" : formatSeconds(result.seconds))} + ${LABELS[result.category]} +
+
+ ${details || '
+ No additional details were recorded for this result.
'} +
+
+ ${Number(value).toLocaleString()}
+ ${escapeHtml(label)}
+
`;
+ }
+
+ function filter(label, category, count, pressed = false) {
+ return `
+ `;
+ }
+
+ function sourcePanel(source, highlightXml, attrs, back) {
+ const highlighted = source.length <= MAX_HIGHLIGHTED_RAW_CHARS ? highlightXml(source) : escapeHtml(source);
+ return `
+
+
+ Source
+ ${back ? `` : ""}
+ XML source
${highlighted}
+
+
+
+ ${sourcePanel(source, highlightXml, "", false)}
+
`;
+ }
+
+ function render(value, preview, helpers = {}) {
+ const source = String(value ?? "");
+ const highlightXml = typeof helpers.highlightXml === "function" ? helpers.highlightXml : escapeHtml;
+ let report;
+ try {
+ report = parseReport(source);
+ } catch (error) {
+ preview.innerHTML = renderError(source, error instanceof Error ? error.message : "The JUnit XML is invalid.", highlightXml);
+ return;
+ }
+ const sorted = report.results
+ .map((result, index) => ({ result, index }))
+ .sort((a, b) => CATEGORY_ORDER[a.result.category] - CATEGORY_ORDER[b.result.category] || a.index - b.index)
+ .slice(0, MAX_RENDERED_RESULTS)
+ .map(({ result }) => result);
+ const bad = report.counts.error + report.counts.failed;
+ const allSkipped = report.total > 0 && report.counts.skipped === report.total;
+ const outcome = bad > 0 ? "failed" : report.total === 0 || allSkipped ? "skipped" : "passed";
+ const outcomeLabel = bad > 0 ? "Failed" : report.total === 0 ? "No tests" : allSkipped ? "Skipped" : "Passed";
+ const mismatch = report.declaredTotal !== null && report.declaredTotal !== report.total
+ ? `
+
+ Unable to read this JUnit report
+${escapeHtml(message)}
+${icon("eye")} The report declares ${report.declaredTotal.toLocaleString()} tests but contains ${report.total.toLocaleString()} test cases. Totals below are counted from the test cases.
`
+ : "";
+ const limited = sorted.length < report.results.length;
+ const suiteOutput = report.suites.map((suite) => `
+
+
`).join("");
+
+ preview.innerHTML = `
+ + ${icon("chevron-right")} + ${icon("terminal")} + ${escapeHtml(suite.name)} +
+${block("Standard output", suite.stdout)}${block("Standard error", suite.stderr)}
+
+
`;
+ applyFilters(preview.querySelector(".trx-preview"));
+ }
+
+ function showView(preview, viewName) {
+ if (!preview) return;
+ for (const panel of preview.querySelectorAll("[data-trx-panel]")) {
+ panel.hidden = panel.dataset.trxPanel !== viewName;
+ }
+ }
+
+ function applyFilters(preview) {
+ if (!preview) return;
+ const phrase = String(preview.querySelector("[data-trx-search-input]")?.value ?? "")
+ .trim()
+ .toLocaleLowerCase()
+ .replace(/\s+/g, " ");
+ const category = preview.querySelector('[data-trx-filter][aria-pressed="true"]')?.dataset.trxFilter ?? "all";
+ const results = [...preview.querySelectorAll("[data-trx-result]")];
+ let visible = 0;
+ for (const result of results) {
+ const matches = (category === "all" || result.dataset.trxCategory === category) &&
+ (result.dataset.trxSearch ?? "").replace(/\s+/g, " ").includes(phrase);
+ result.hidden = !matches;
+ if (matches) visible += 1;
+ }
+ const total = Number(preview.dataset.trxTotal) || results.length;
+ const count = preview.querySelector("[data-trx-result-count]");
+ if (count) count.textContent = `${visible.toLocaleString()} of ${total.toLocaleString()} results`;
+ const none = preview.querySelector("[data-trx-no-results]");
+ if (none) none.hidden = visible > 0;
+ }
+
+ globalThis.JunitPreview = Object.freeze({ applyFilters, detect, parse: parseReport, render, showView });
+})();
diff --git a/extensions/pr-artifact-explorer/assets/markdown-preview.js b/extensions/pr-artifact-explorer/assets/markdown-preview.js
new file mode 100644
index 0000000000..45a3aa19f8
--- /dev/null
+++ b/extensions/pr-artifact-explorer/assets/markdown-preview.js
@@ -0,0 +1,148 @@
+(() => {
+ "use strict";
+
+ const MAX_CHARS = 2 * 1024 * 1024;
+
+ function esc(value) {
+ return String(value ?? "")
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll('"', """)
+ .replaceAll("'", "'");
+ }
+
+ function safeUrl(url) {
+ const value = String(url).trim();
+ return /^(https?:|mailto:|#)/i.test(value) ? value : "";
+ }
+
+ // Input is HTML-escaped first, so only markup produced here reaches the DOM.
+ function inline(text) {
+ const codes = [];
+ let out = esc(text).replace(/(`+)([\s\S]*?[^`])\1(?!`)/g, (_m, _t, code) => {
+ codes.push(`
+
+
+
+
+
+ ${sourcePanel(source, highlightXml, 'data-trx-panel="raw" hidden', true)}
+
+
+ JUnit report
+ ${icon(ICONS[outcome === "failed" ? "failed" : outcome])} ${outcomeLabel}
+ ${escapeHtml(report.name)}
+ ${metric("Total", report.total, "all", "workflow")}
+ ${metric("Passed", report.counts.passed, "passed", "check-circle")}
+ ${metric("Failed", report.counts.failed, "failed", "x-circle")}
+ ${metric("Errors", report.counts.error, "failed", "x-circle")}
+ ${metric("Skipped", report.counts.skipped, "skipped", "clock")}
+
+
+ ${mismatch}
+
+
+ Details
+
+ Test results
+
+
+ ${limited ? `
+ ${filter("All", "all", report.total, true)}
+ ${filter("Passed", "passed", report.counts.passed)}
+ ${filter("Failed", "failed", report.counts.failed)}
+ ${filter("Errors", "error", report.counts.error)}
+ ${filter("Skipped", "skipped", report.counts.skipped)}
+
+ ${icon("eye")} Showing the first ${sorted.length.toLocaleString()} of ${report.total.toLocaleString()} test cases. The XML source contains the complete report.
` : ""}
+ ${sorted.map((result, index) => renderResult(result, index === 0 && CATEGORY_ORDER[result.category] < 2)).join("")}
+
+ ${icon("search")}
+ ${suiteOutput ? `No matching tests
Try another search or outcome filter.
+Suites
Suite output
${suiteOutput}
` : ""}
+ ${code.trim()}`);
+ return `\u0000${codes.length - 1}\u0000`;
+ });
+ out = out
+ .replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^)]*")?\)/g, (_m, alt) => `[image: ${alt || "no description"}]`)
+ .replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^)]*")?\)/g, (_m, label, href) => {
+ const safe = safeUrl(href.replaceAll("&", "&"));
+ return safe
+ ? `${label}`
+ : label;
+ })
+ .replace(/\*\*([^*]+)\*\*|__([^_]+)__/g, (_m, a, b) => `${a ?? b}`)
+ .replace(/(^|[^*\w])\*([^*\s][^*]*)\*(?!\*)/g, (_m, pre, t) => `${pre}${t}`)
+ .replace(/(^|[^_\w])_([^_\s][^_]*)_(?!\w)/g, (_m, pre, t) => `${pre}${t}`)
+ .replace(/~~([^~]+)~~/g, "${esc(body.join("\n"))}"); + i += 1; + continue; + } + if (/^\s*>/.test(line)) { + const body = []; + while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, "")); + out.push(`
${toHtml(body.join("\n"))}`); + continue; + } + if (line.includes("|") && /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(lines[i + 1] ?? "")) { + const head = splitRow(line); + i += 2; + const rows = []; + while (i < lines.length && lines[i].includes("|") && lines[i].trim()) rows.push(splitRow(lines[i++])); + out.push( + `
| ${inline(c)} | `).join("")}
|---|
| ${inline(r[n] ?? "")} | `).join("")}
${para.map((p) => inline(p.replace(/\s+$/, ""))).join("
")}
hi
"); + const padded = Buffer.concat([parts.central, Buffer.alloc(1024 * 1024), parts.central]); + const path = join(dir, "bad.zip"); + await writeFile(path, archive(parts, padded, 1)); + await assert.rejects(readZipIndex(path), /entry count mismatch/i); + + const good = join(dir, "good.zip"); + await writeFile(good, archive(parts)); + assert.equal((await readZipIndex(good)).entries.length, 1); + })); + +test("a directory declaring more entries than it contains is rejected", () => + inTemp(async (dir) => { + const parts = entryRecords("index.html", "x"); + const path = join(dir, "short.zip"); + await writeFile(path, archive(parts, parts.central, 2)); + await assert.rejects(readZipIndex(path), /entry count mismatch/i); + })); + +test("readEntryPrefix inflates a bounded prefix from a streamed source", () => + inTemp(async (dir) => { + const parts = entryRecords("big.txt", "a".repeat(5 * 1024 * 1024), { deflate: true }); + const path = join(dir, "big.zip"); + await writeFile(path, archive(parts)); + const entry = (await readZipIndex(path)).entries[0]; + const prefix = await readEntryPrefix(path, entry, 8 * 1024); + assert.equal(prefix.length, 8 * 1024); + assert.ok(prefix.every((byte) => byte === 0x61)); + })); + +test("streamZipEntry reports live progress and soft-limit crossings without stopping the stream", () => + inTemp(async (dir) => { + const parts = entryRecords("big.txt", "b".repeat(2 * 1024 * 1024), { deflate: true }); + const path = join(dir, "s.zip"); + await writeFile(path, archive(parts)); + const entry = (await readZipIndex(path)).entries[0]; + let received = 0; + const sink = new Writable({ + write(chunk, _enc, cb) { + received += chunk.length; + cb(); + }, + }); + const progress = []; + const warned = []; + await streamZipEntry(path, entry, sink, null, { + softLimit: 1024, + onProgress: (bytes) => progress.push(bytes), + onSoftLimit: (kind, bytes) => warned.push([kind, bytes]), + }); + assert.equal(received, 2 * 1024 * 1024); + assert.ok(progress.length > 0 && progress.at(-1) === received); + assert.ok(warned.length > 0 && warned.every(([kind]) => kind === "streamedEntryBytes")); + })); + +test("tracked decompression streams prompt once past the limit and are submit-checked against live bytes", () => + inTemp(async (dir) => { + const policy = new LimitPolicy(join(dir, "limits.json")); + const registry = new JobRegistry(policy); + const tracker = registry.track({ repository: "a/b", artifactId: 1, name: "x.bin" }); + tracker.update(policy.get("streamedEntryBytes") + 500); + const snap = registry.snapshot(tracker.job); + assert.equal(snap.prompts[0].kind, "streamedEntryBytes"); + assert.throws(() => policy.submit("streamedEntryBytes", policy.get("streamedEntryBytes") + 10), /below|minimum|current/i); + tracker.finish(); + assert.equal(registry.get(tracker.job.id), null); + })); + +test("concurrent limit submits persist deterministically without temp-file races", () => + inTemp(async (dir) => { + const file = join(dir, "limits.json"); + const policy = new LimitPolicy(file); + const base = policy.get("downloadBytes"); + for (let i = 1; i <= 30; i++) policy.submit("downloadBytes", base + i * 1000); + await policy.flush(); + assert.equal(policy.persistError, null); + const disk = JSON.parse(await readFile(file, "utf8")); + assert.equal(disk.downloadBytes ?? disk.limits?.downloadBytes, base + 30_000); + assert.equal(policy.get("downloadBytes"), base + 30_000); + })); + +test("corrupt saved limits surface a recoverable warning and keep defaults", () => + inTemp(async (dir) => { + const file = join(dir, "limits.json"); + await writeFile(file, "{ not json"); + const policy = new LimitPolicy(file); + const defaults = policy.get("downloadBytes"); + await policy.load(); + assert.match(policy.loadWarning, /corrupt/i); + assert.equal(policy.get("downloadBytes"), defaults); + })); + +test("running jobs persist without secrets and recover as interrupted", () => + inTemp(async (dir) => { + const file = join(dir, "jobs.json"); + const policy = new LimitPolicy(join(dir, "limits.json")); + const first = new JobRegistry(policy, { file }); + let release; + const gate = new Promise((resolve) => (release = resolve)); + const job = first.start("acct:a/b:7", { repository: "a/b", artifactId: 7, account: "acct" }, () => gate); + await first.flush(); + const raw = await readFile(file, "utf8"); + assert.ok(!/token/i.test(raw)); + + const second = new JobRegistry(policy, { file }); + await second.load(); + const recovered = second.snapshot(second.get(job.id)); + assert.equal(recovered.status, "interrupted"); + assert.match(recovered.error, /interrupted/i); + assert.equal(recovered.account, "acct"); + await second.flush(); + const retry = second.start("acct:a/b:7", { repository: "a/b", artifactId: 7, account: "acct" }, async () => "ok"); + assert.equal(retry.attempt, 2); + assert.equal(await retry.promise, "ok"); + + release(); + await job.promise; + await first.flush(); + await second.flush(); + })); + +test("a corrupt job history file surfaces a warning", () => + inTemp(async (dir) => { + const file = join(dir, "jobs.json"); + await writeFile(file, "oops"); + const registry = new JobRegistry(new LimitPolicy(join(dir, "limits.json")), { file }); + await registry.load(); + assert.match(registry.loadWarning, /corrupt/i); + })); diff --git a/extensions/pr-artifact-explorer/cache.mjs b/extensions/pr-artifact-explorer/cache.mjs index 58b23a1ff8..75f59ed0ff 100644 --- a/extensions/pr-artifact-explorer/cache.mjs +++ b/extensions/pr-artifact-explorer/cache.mjs @@ -13,20 +13,32 @@ import { join } from "node:path"; import { Readable, Transform } from "node:stream"; import { pipeline } from "node:stream/promises"; import { - ARTIFACT_DOWNLOAD_IDLE_TIMEOUT_MS, CACHE_ROOT, - MAX_ARCHIVE_BYTES, + JOBS_FILE, MAX_INLINE_PREVIEW_BYTES, MIN_CACHE_FREE_BYTES, } from "./constants.mjs"; import { CacheMaintenanceCoordinator } from "./cache-coordinator.mjs"; import { analyzeArtifact, hasRootIndexHtml } from "./detector.mjs"; import { getArtifact, openArtifactDownload } from "./github.mjs"; -import { findZipEntry, readEntryPrefix, readZipEntry, readZipIndex } from "./zip.mjs"; +import { JobRegistry } from "./jobs.mjs"; +import { limitPolicy } from "./limits.mjs"; +import { + findZipEntry, + readEntryPrefix, + readZipEntry, + readZipIndex, + streamZipEntry, + streamZipEntryRange, + verifyZipEntry, +} from "./zip.mjs"; -const downloads = new Map(); const indexCache = new Map(); +const verifiedEntries = new Map(); +const verificationsInFlight = new Map(); +const MAX_VERIFIED_ENTRIES = 512; const maintenance = new CacheMaintenanceCoordinator(); +export const jobRegistry = new JobRegistry(limitPolicy, { file: JOBS_FILE }); let reservedDownloadBytes = 0; let metadataWriteSequence = 0; @@ -86,25 +98,7 @@ function formatBytes(value) { async function downloadCapacityBytes() { const filesystem = await statfs(CACHE_ROOT); const available = Number(filesystem.bavail) * Number(filesystem.bsize); - return Math.max( - 0, - Math.min( - MAX_ARCHIVE_BYTES, - available - MIN_CACHE_FREE_BYTES - reservedDownloadBytes, - ), - ); -} - -function assertDownloadFits(bytes, capacity) { - if (!Number.isFinite(bytes) || bytes <= 0) return; - if (bytes > MAX_ARCHIVE_BYTES) { - throw new Error("Artifact exceeds the 4 GiB ZIP download limit."); - } - if (bytes > capacity) { - throw new Error( - `Not enough free disk space to cache this artifact. ${formatBytes(bytes)} is required, with ${formatBytes(capacity)} available after the safety reserve.`, - ); - } + return Math.max(0, available - MIN_CACHE_FREE_BYTES - reservedDownloadBytes); } async function downloadArchive( @@ -113,13 +107,13 @@ async function downloadArchive( artifact, archivePath, onProgress, - externalSignal = null, + signal = null, + onActivity = () => {}, ) { const declaredBytes = Number(artifact.sizeInBytes); let reservedBytes = 0; const reserve = async (totalBytes) => { if (!Number.isFinite(totalBytes) || totalBytes <= reservedBytes) return; - assertDownloadFits(totalBytes, MAX_ARCHIVE_BYTES); const additionalBytes = totalBytes - reservedBytes; const capacity = await downloadCapacityBytes(); if (additionalBytes > capacity) { @@ -136,32 +130,11 @@ async function downloadArchive( }; await reserve(declaredBytes); - const controller = new AbortController(); - if (externalSignal?.aborted) { - controller.abort(externalSignal.reason); - } else if (externalSignal) { - externalSignal.addEventListener("abort", () => controller.abort(externalSignal.reason), { once: true }); - } - let idleTimer; - const resetIdleTimeout = () => { - clearTimeout(idleTimer); - idleTimer = setTimeout(() => { - controller.abort(new Error("Artifact download stalled for 60 seconds.")); - }, ARTIFACT_DOWNLOAD_IDLE_TIMEOUT_MS); - }; - resetIdleTimeout(); - let response; try { - response = await openArtifactDownload(token, repository, artifact.id, { - signal: controller.signal, - }); + response = await openArtifactDownload(token, repository, artifact.id, { signal }); } catch (error) { - clearTimeout(idleTimer); releaseReservation(); - if (controller.signal.aborted && controller.signal.reason instanceof Error) { - throw controller.signal.reason; - } throw error; } @@ -169,8 +142,6 @@ async function downloadArchive( try { await reserve(expectedLength); } catch (error) { - clearTimeout(idleTimer); - controller.abort(error); releaseReservation(); throw error; } @@ -219,17 +190,17 @@ async function downloadArchive( const limiter = new Transform({ transform(chunk, _encoding, callback) { received += chunk.length; - if (received > MAX_ARCHIVE_BYTES) { - callback(new Error("Artifact exceeded the 4 GiB ZIP download limit.")); + onActivity({ downloadBytes: received }); + const proceed = () => { + report(); + callback(null, chunk); + }; + if (received <= reservedBytes) { + proceed(); return; } - if (reservedBytes > 0 && received > reservedBytes) { - callback(new Error("Artifact download exhausted the available cache space.")); - return; - } - resetIdleTimeout(); - report(); - callback(null, chunk); + // The declared size was too small; grow the reservation, still honouring the disk guard. + reserve(received + 64 * 1024 * 1024).then(proceed, (error) => callback(error)); }, }); @@ -238,17 +209,17 @@ async function downloadArchive( Readable.fromWeb(response.body), limiter, createWriteStream(temporary, { flags: "wx" }), + ...(signal ? [{ signal }] : []), ); report(true); await rename(temporary, archivePath); } catch (error) { await rm(temporary, { force: true }); - if (controller.signal.aborted && controller.signal.reason instanceof Error) { - throw controller.signal.reason; + if (signal?.aborted) { + throw signal.reason instanceof Error ? signal.reason : error; } throw error; } finally { - clearTimeout(idleTimer); releaseReservation(); } return { @@ -258,78 +229,126 @@ async function downloadArchive( }; } -async function buildMetadata(token, repository, artifactId, onProgress, signal = null) { - const paths = pathsFor(artifactId); - const artifact = await getArtifact(token, repository, paths.id); - if (artifact.expired) { - throw new Error("This GitHub Actions artifact has expired."); +function downloadMarker(paths) { + return `${paths.archive}.complete.json`; +} + +async function readDownloadMarker(paths, repository) { + try { + const marker = JSON.parse(await readFile(downloadMarker(paths), "utf8")); + const archive = await stat(paths.archive); + if ( + archive.isFile() && + marker.repository === repository && + marker.receivedBytes === archive.size + ) { + return marker; + } + } catch (error) { + if (error?.code !== "ENOENT" && !(error instanceof SyntaxError)) throw error; } + return null; +} +/** + * Downloads (unless a completed ZIP is already present) and indexes an artifact. + * A completed ZIP is never deleted because indexing failed, so retries only redo + * the indexing step. + */ +async function buildMetadata(token, repository, artifactId, job) { + const paths = pathsFor(artifactId); + const signal = job.controller.signal; + const artifact = await getArtifact(token, repository, paths.id); await mkdir(CACHE_ROOT, { recursive: true }); - onProgress?.({ + const progressOf = (patch) => ({ artifactId: artifact.id, artifactName: artifact.name, - stage: "preparing", - receivedBytes: 0, totalBytes: artifact.sizeInBytes, - percent: 0, - bytesPerSecond: 0, - etaSeconds: null, + ...patch, }); - const transfer = await downloadArchive( - token, - repository, - artifact, - paths.archive, - onProgress, - signal, - ); - const compressedBytes = transfer.receivedBytes; - try { - onProgress?.({ - artifactId: artifact.id, + const publish = (progress, live) => { + jobRegistry.update(job, { + stage: progress.stage, + progress, artifactName: artifact.name, + live, + }); + }; + + let marker = await readDownloadMarker(paths, repository); + let transfer; + if (marker) { + transfer = { bytesPerSecond: 0, receivedBytes: marker.receivedBytes, totalBytes: marker.receivedBytes }; + } else { + if (artifact.expired) { + throw new Error("This GitHub Actions artifact has expired."); + } + await removeArtifactFiles(paths); + publish(progressOf({ stage: "preparing", receivedBytes: 0, percent: 0, bytesPerSecond: 0, etaSeconds: null })); + transfer = await downloadArchive( + token, + repository, + artifact, + paths.archive, + (progress) => publish(progress, { downloadBytes: progress.receivedBytes }), + signal, + (live) => jobRegistry.update(job, { live }), + ); + await writeJsonAtomic(downloadMarker(paths), { + repository, + receivedBytes: transfer.receivedBytes, + completedAt: new Date().toISOString(), + }); + } + + const compressedBytes = transfer.receivedBytes; + publish( + progressOf({ stage: "indexing", receivedBytes: compressedBytes, totalBytes: transfer.totalBytes, percent: 100, bytesPerSecond: transfer.bytesPerSecond, etaSeconds: 0, - }); - const index = await readZipIndex(paths.archive); - const PREFIX_BYTES = 8 * 1024; - const analysis = await analyzeArtifact(index, async (entry) => { - return readEntryPrefix(paths.archive, entry, PREFIX_BYTES); - }); - const timestamp = new Date().toISOString(); - const metadata = { - artifact, - repository, - downloadedAt: timestamp, - lastAccessedAt: timestamp, - compressedBytes, - analysis, - }; - await writeJsonAtomic(paths.metadata, metadata); - indexCache.set(paths.id, { archivePath: paths.archive, index }); - onProgress?.({ - artifactId: artifact.id, - artifactName: artifact.name, + }), + { downloadBytes: compressedBytes }, + ); + const index = await readZipIndex(paths.archive, { + softLimits: { + zipEntries: () => limitPolicy.get("zipEntries"), + centralDirectoryBytes: () => limitPolicy.get("centralDirectoryBytes"), + }, + onSoftLimit: (kind, current) => jobRegistry.update(job, { live: { [kind]: current }, activity: false }), + onProgress: () => jobRegistry.update(job, {}), + }); + if (signal.aborted) throw signal.reason; + const PREFIX_BYTES = 8 * 1024; + const analysis = await analyzeArtifact(index, async (entry) => { + if (signal.aborted) throw signal.reason; + return readEntryPrefix(paths.archive, entry, PREFIX_BYTES); + }); + const timestamp = new Date().toISOString(); + const metadata = { + artifact, + repository, + downloadedAt: timestamp, + lastAccessedAt: timestamp, + compressedBytes, + analysis, + }; + await writeJsonAtomic(paths.metadata, metadata); + indexCache.set(paths.id, { archivePath: paths.archive, index }); + publish( + progressOf({ stage: "ready", receivedBytes: compressedBytes, totalBytes: transfer.totalBytes, percent: 100, bytesPerSecond: transfer.bytesPerSecond, etaSeconds: 0, - }); - return metadata; - } catch (error) { - await Promise.all([ - rm(paths.archive, { force: true }), - rm(paths.metadata, { force: true }), - ]); - throw error; - } + }), + ); + return metadata; } async function cachedMetadata(artifactId) { @@ -346,73 +365,54 @@ async function cachedMetadata(artifactId) { return metadata; } -export async function inspectArtifact( - token, - repository, - artifactId, - { onProgress } = {}, -) { +/** + * Starts (or reattaches to) the background job for an artifact. The job runs + * independently of any HTTP request or view; call `retry` semantics by simply + * starting again after a failure. + */ +export async function startArtifactJob(token, repository, artifactId, { account = null } = {}) { const paths = pathsFor(artifactId); while (true) { const barrier = maintenance.inspectionBarrier(paths.id); if (!barrier) break; await barrier; } - const key = `${repository}:${paths.id}`; - const active = downloads.get(key); - if (active) { - if (onProgress) active.listeners.add(onProgress); - try { - return await active.operation; - } finally { - if (onProgress) active.listeners.delete(onProgress); - } - } - - const listeners = new Set(onProgress ? [onProgress] : []); - const emit = (progress) => { - for (const listener of listeners) listener(progress); - }; - const externalController = new AbortController(); - const operation = (async () => { - const existing = await cachedMetadata(paths.id); - if (existing?.repository === repository && existing.analysis) { - existing.lastAccessedAt = new Date().toISOString(); - await writeJsonAtomic(paths.metadata, existing); - emit({ - artifactId: Number(paths.id), - artifactName: existing.artifact?.name ?? `Artifact ${paths.id}`, - stage: "ready", - receivedBytes: existing.compressedBytes, - totalBytes: existing.compressedBytes, - percent: 100, - bytesPerSecond: 0, - etaSeconds: 0, - cached: true, - }); - return existing; - } - if (existing) { + const key = `${account ?? "anonymous"}:${repository}:${paths.id}`; + return jobRegistry.start( + key, + { repository, artifactId: paths.id, account }, + async (job) => { + const existing = await cachedMetadata(paths.id); + if (existing?.repository === repository && existing.analysis) { + existing.lastAccessedAt = new Date().toISOString(); + await writeJsonAtomic(paths.metadata, existing); + jobRegistry.update(job, { + stage: "ready", + artifactName: existing.artifact?.name, + progress: { + artifactId: Number(paths.id), + artifactName: existing.artifact?.name ?? `Artifact ${paths.id}`, + stage: "ready", + receivedBytes: existing.compressedBytes, + totalBytes: existing.compressedBytes, + percent: 100, + bytesPerSecond: 0, + etaSeconds: 0, + cached: true, + }, + }); + return existing; + } indexCache.delete(paths.id); - await removeArtifactFiles(paths); - } - return buildMetadata(token, repository, paths.id, emit, externalController.signal); - })(); - const download = { listeners, operation, abort: () => externalController.abort(new Error("Cache cleared.")) }; - downloads.set(key, download); - try { - return await operation; - } catch (error) { - emit({ - artifactId: Number(paths.id), - stage: "error", - message: error instanceof Error ? error.message : String(error), - }); - throw error; - } finally { - if (downloads.get(key) === download) downloads.delete(key); - listeners.clear(); - } + await rm(paths.metadata, { force: true }); + return buildMetadata(token, repository, paths.id, job); + }, + ); +} + +export async function inspectArtifact(token, repository, artifactId) { + const job = await startArtifactJob(token, repository, artifactId); + return job.promise; } export async function getCachedArtifact(artifactId, { touch = true } = {}) { @@ -445,6 +445,110 @@ export async function getCachedEntry(artifactId, entryPath) { return { metadata, archivePath: paths.archive, index, entry }; } +async function verifyEntryOnce(context, options) { + const { entry, archivePath } = context; + const info = await stat(archivePath); + const key = [archivePath, info.size, info.mtimeMs, entry.name, entry.localHeaderOffset, entry.compressedSize, entry.uncompressedSize, entry.crc32].join("|"); + for (;;) { + if (verifiedEntries.has(key)) return; + let pending = verificationsInFlight.get(key); + const leader = !pending; + if (leader) { + pending = verifyZipEntry(archivePath, entry, options).then(() => { + if (verifiedEntries.size >= MAX_VERIFIED_ENTRIES) verifiedEntries.delete(verifiedEntries.keys().next().value); + verifiedEntries.set(key, true); + }); + verificationsInFlight.set(key, pending); + pending.then( + () => verificationsInFlight.delete(key), + () => verificationsInFlight.delete(key), + ); + } + try { + await pending; + return; + } catch (error) { + // A follower retries when only the leader's request was cancelled. + if (leader || options.signal?.aborted || error?.name !== "AbortError") throw error; + } + } +} + +/** + * Verifies a whole entry (size + CRC) before any ranged bytes are served, so the caller + * can still answer with a real error status. Progress and soft-limit prompts are tracked + * like a stream job; verification is never stopped by a soft limit. + */ +export async function verifyCachedEntry(context) { + const outer = new AbortController(); + let tracker = null; + const ensure = () => { + if (tracker) return; + tracker = jobRegistry.track({ + repository: context.metadata?.repository, + artifactId: context.metadata?.artifact?.id, + name: context.entry.name, + }); + tracker.signal.addEventListener("abort", () => outer.abort(), { once: true }); + }; + const limit = () => limitPolicy.get("streamedEntryBytes"); + if (context.entry.uncompressedSize > limit()) ensure(); + try { + await verifyEntryOnce(context, { + signal: outer.signal, + softLimit: limit, + onSoftLimit: ensure, + onProgress: (bytes) => tracker?.update(bytes), + }); + tracker?.finish(); + } catch (error) { + tracker?.finish(error); + throw error; + } +} + +/** + * Streams a cached entry to `writable`. A tracked stream job appears (with a soft-limit + * prompt) only once the live decompressed size crosses the current limit; the stream + * itself is never stopped by it, only by explicit cancel, a closed client or an + * integrity failure. + */ +export async function streamCachedEntry(context, writable, transform = null, range = null) { + const outer = new AbortController(); + let tracker = null; + const ensure = () => { + if (tracker) return; + tracker = jobRegistry.track({ + repository: context.metadata?.repository, + artifactId: context.metadata?.artifact?.id, + name: context.entry.name, + }); + tracker.signal.addEventListener("abort", () => outer.abort(), { once: true }); + }; + const limit = () => limitPolicy.get("streamedEntryBytes"); + const servedBytes = range ? range.end - range.start + 1 : context.entry.uncompressedSize; + const verifyBytes = range ? context.entry.uncompressedSize : servedBytes; + if (Math.max(servedBytes, verifyBytes) > limit()) ensure(); + try { + const options = { + signal: outer.signal, + softLimit: limit, + onSoftLimit: ensure, + onProgress: (bytes) => tracker?.update(bytes), + }; + if (range) { + await verifyEntryOnce(context, options); + await streamZipEntryRange(context.archivePath, context.entry, writable, range, options); + } else { + await streamZipEntry(context.archivePath, context.entry, writable, transform, options); + } + tracker?.finish(); + } catch (error) { + tracker?.finish(error); + throw error; + } +} + export async function readCachedEntry(artifactId, entryPath, maxBytes = MAX_INLINE_PREVIEW_BYTES) { const context = await getCachedEntry(artifactId, entryPath); return { @@ -457,29 +561,45 @@ async function removeArtifactFiles(paths) { await Promise.all([ rm(paths.archive, { force: true }), rm(paths.metadata, { force: true }), + rm(downloadMarker(paths), { force: true }), ]); } -export async function deleteCachedArtifact(artifactId) { +export class JobsActiveError extends Error { + constructor(jobs) { + super("Artifact jobs are still running. Cancel them explicitly to continue."); + this.name = "JobsActiveError"; + this.code = "jobs_active"; + this.jobs = jobs; + } +} + +async function cancelAndSettle(jobs, reason) { + for (const job of jobs) jobRegistry.cancel(job.id, reason); + await Promise.allSettled(jobs.map((job) => job.promise)); +} + +export async function deleteCachedArtifact(artifactId, { cancelJobs = false } = {}) { const paths = pathsFor(artifactId); + const jobs = jobRegistry.activeJobs().filter((job) => job.artifactId === paths.id); + if (jobs.length && !cancelJobs) { + throw new JobsActiveError(jobs.map((job) => jobRegistry.snapshot(job))); + } return maintenance.deleteArtifact(paths.id, async () => { indexCache.delete(paths.id); - const suffix = `:${paths.id}`; - const matches = [...downloads.entries()] - .filter(([key]) => key.endsWith(suffix)) - .map(([, entry]) => entry); - for (const entry of matches) entry.abort?.(); - await Promise.allSettled(matches.map((entry) => entry.operation)); + await cancelAndSettle(jobs, "Artifact deleted."); await removeArtifactFiles(paths); return { deleted: paths.id }; }); } -export async function clearArtifactCache() { +export async function clearArtifactCache({ cancelJobs = false } = {}) { + const jobs = jobRegistry.activeJobs(); + if (jobs.length && !cancelJobs) { + throw new JobsActiveError(jobs.map((job) => jobRegistry.snapshot(job))); + } return maintenance.clearCache(async () => { - const inflight = [...downloads.values()]; - for (const entry of inflight) entry.abort?.(); - await Promise.allSettled(inflight.map((entry) => entry.operation)); + await cancelAndSettle(jobs, "Cache cleared."); indexCache.clear(); await rm(CACHE_ROOT, { recursive: true, force: true }); await mkdir(CACHE_ROOT, { recursive: true }); diff --git a/extensions/pr-artifact-explorer/capture.mjs b/extensions/pr-artifact-explorer/capture.mjs new file mode 100644 index 0000000000..c75d3d1aca --- /dev/null +++ b/extensions/pr-artifact-explorer/capture.mjs @@ -0,0 +1,387 @@ +import { mkdir, writeFile } from "node:fs/promises"; +import { createHash, randomUUID } from "node:crypto"; +import { join } from "node:path"; +import { DATA_ROOT } from "./constants.mjs"; + +export const SCREENSHOT_ROOT = join(DATA_ROOT, "screenshots"); +let screenshotRoot = SCREENSHOT_ROOT; + +/** Directs screenshot output to the owning session's files area; falls back to the cache root. */ +export function setScreenshotRoot(dir) { + screenshotRoot = dir || SCREENSHOT_ROOT; +} + +export function getScreenshotRoot() { + return screenshotRoot; +} +const LEGACY_SETUP_ENV = "PR_ARTIFACT_EXPLORER_PLAYWRIGHT"; + +export const VIEWPORT_PRESETS = Object.freeze({ + mobile: { label: "Mobile", width: 390, height: 844, deviceScaleFactor: 3, isMobile: true, hasTouch: true }, + tablet: { label: "Tablet", width: 768, height: 1024, deviceScaleFactor: 2, isMobile: true, hasTouch: true }, + desktop: { label: "Desktop", width: 1440, height: 900, deviceScaleFactor: 1, isMobile: false, hasTouch: false }, +}); + +export class CaptureError extends Error { + constructor(code, message) { + super(message); + this.name = "CaptureError"; + this.code = code; + } +} + +export const SETUP_INSTRUCTIONS = [ + "Screenshots need Playwright with a Chromium browser. Nothing is installed automatically.", + "1. Install the extension dependencies in its folder: npm install (playwright-core is an optional dependency)", + "2. Install the browser once: npx playwright-core install chromium", +].join("\n"); + +export async function loadPlaywright() { + if (process.env[LEGACY_SETUP_ENV]) { + throw new CaptureError( + "playwright_config_unsupported", + `${LEGACY_SETUP_ENV} is no longer supported because Explorer no longer loads Playwright from arbitrary paths. Unset it.\n${SETUP_INSTRUCTIONS}`, + ); + } + try { + const mod = await import("playwright-core"); + const chromium = mod.chromium ?? mod.default?.chromium; + if (chromium) return chromium; + } catch { + // reported below with setup instructions + } + throw new CaptureError("playwright_missing", `Playwright is not available.\n${SETUP_INSTRUCTIONS}`); +} + +export function resolveViewport({ preset, width, height, deviceScaleFactor, orientation } = {}) { + const base = preset && preset !== "native" ? VIEWPORT_PRESETS[preset] : null; + if (preset && preset !== "native" && preset !== "custom" && !base) { + throw new CaptureError("invalid_viewport", `Unknown preset "${preset}". Use native, mobile, tablet, desktop or custom.`); + } + let w = width ?? base?.width ?? 1280; + let h = height ?? base?.height ?? 800; + for (const [label, value] of [["width", w], ["height", h]]) { + if (!Number.isInteger(value) || value < 200 || value > 4000) { + throw new CaptureError("invalid_viewport", `${label} must be an integer between 200 and 4000.`); + } + } + if (orientation === "landscape" && h > w) [w, h] = [h, w]; + if (orientation === "portrait" && w > h) [w, h] = [h, w]; + return { + width: w, + height: h, + deviceScaleFactor: deviceScaleFactor ?? base?.deviceScaleFactor ?? 1, + isMobile: base?.isMobile ?? false, + hasTouch: base?.hasTouch ?? false, + }; +} + +function assertHttpUrl(value) { + let url; + try { + url = new URL(value); + } catch { + throw new CaptureError("invalid_url", "A valid http(s) URL is required."); + } + if (url.protocol !== "http:" && url.protocol !== "https:") { + throw new CaptureError("invalid_url", "Only http and https URLs can be captured."); + } + if (url.username || url.password) { + throw new CaptureError("invalid_url", "URLs with embedded credentials cannot be captured."); + } + return url; +} + +async function launchChromium() { + const chromium = await loadPlaywright(); + let browser; + const failures = []; + const attempts = [ + ...(process.env.PR_ARTIFACT_EXPLORER_CHROMIUM + ? [{ executablePath: process.env.PR_ARTIFACT_EXPLORER_CHROMIUM }] + : []), + {}, + { channel: "chrome" }, + { channel: "msedge" }, + ]; + for (const options of attempts) { + try { + browser = await chromium.launch({ headless: true, ...options }); + break; + } catch (error) { + failures.push(error?.message?.split("\n")[0] ?? String(error)); + } + } + if (!browser) { + throw new CaptureError( + "chromium_missing", + `Chromium could not be launched: ${failures[0]}\n${SETUP_INSTRUCTIONS}`, + ); + } + return browser; +} + +const CLOSE_TIMEOUT_MS = 5_000; + +/** Closes a Playwright browser without ever waiting forever; returns whether it closed cleanly in time. */ +export async function closeBrowserBounded(browser, timeoutMs = CLOSE_TIMEOUT_MS) { + return closeBounded(browser, timeoutMs); +} + +/** Bounded close of any Playwright closable (browser or context); false only on timeout. */ +async function closeBounded(target, timeoutMs = CLOSE_TIMEOUT_MS) { + if (!target) return true; + let timer; + const timeout = new Promise((resolve) => { + timer = setTimeout(() => resolve(false), timeoutMs); + timer.unref?.(); + }); + try { + return await Promise.race([Promise.resolve().then(() => target.close()).then(() => true, () => true), timeout]); + } finally { + clearTimeout(timer); + } +} + +async function savePng(png, outputDir) { + await mkdir(outputDir, { recursive: true }); + const file = join(outputDir, `screenshot-${Date.now()}-${randomUUID().slice(0, 8)}.png`); + await writeFile(file, png); + return { path: file, bytes: png.length, sha256: createHash("sha256").update(png).digest("hex") }; +} + +/** + * Renders the URL in a fresh, isolated headless Chromium and saves a PNG. + * This is a NEW render, not a snapshot of the page currently shown in the canvas. + */ +export function normalizeColorScheme(value) { + if (value === undefined || value === null) return undefined; + if (value === "light" || value === "dark") return value; + throw new CaptureError("invalid_viewport", 'Color scheme must be "light" or "dark".'); +} + +export async function captureScreenshot({ url, fullPage = false, outputDir = getScreenshotRoot(), colorScheme, ...viewportOptions }) { + const target = assertHttpUrl(url); + const viewport = resolveViewport(viewportOptions); + const scheme = normalizeColorScheme(colorScheme); + const browser = await launchChromium(); + try { + // A new context has no cookies or profile data and is discarded afterwards. + const context = await browser.newContext({ + viewport: { width: viewport.width, height: viewport.height }, + deviceScaleFactor: viewport.deviceScaleFactor, + isMobile: viewport.isMobile, + hasTouch: viewport.hasTouch, + ...(scheme ? { colorScheme: scheme } : {}), + }); + const page = await context.newPage(); + let status = null; + try { + const response = await page.goto(target.href, { waitUntil: "load", timeout: 30_000 }); + status = response?.status() ?? null; + } catch (error) { + throw new CaptureError("navigation_failed", `Could not load ${target.origin}: ${error?.message?.split("\n")[0] ?? error}`); + } + const png = await page.screenshot({ type: "png", fullPage: Boolean(fullPage) }); + const finalUrl = page.url(); + const dimensions = await page.evaluate(() => ({ + innerWidth: window.innerWidth, + innerHeight: window.innerHeight, + devicePixelRatio: window.devicePixelRatio, + })); + return { + ...(await savePng(png, outputDir)), + source: "fresh-render", + colorScheme: scheme ?? null, + note: "Fresh headless Chromium render of the URL. It does not include unsaved page state from the canvas preview.", + requestedUrl: target.href, + finalUrl, + status, + fullPage: Boolean(fullPage), + viewport, + page: dimensions, + }; + } finally { + await closeBrowserBounded(browser); + } +} + +/** + * An explicit, isolated, controlled Chromium: one in-memory context (no persistent profile, + * cookies or logins), real history, device emulation, and screenshots of the CURRENT page. + * Used for sites that refuse to be embedded in an iframe. + */ +export class ControlledBrowser { + #browser = null; + #context = null; + #page = null; + #viewport = null; + #starting = null; + #colorScheme = undefined; + + get active() { + return Boolean(this.#page); + } + + get currentUrl() { + const url = this.#page?.url(); + return url && url !== "about:blank" ? url : null; + } + + async setColorScheme(value) { + const scheme = normalizeColorScheme(value); + if (!scheme || scheme === this.#colorScheme) return { colorScheme: this.#colorScheme ?? null }; + this.#colorScheme = scheme; + if (this.#page) await this.#page.emulateMedia({ colorScheme: scheme }); + return { colorScheme: scheme }; + } + + async #ensure(viewportOptions) { + if (this.#page) return; + this.#starting ??= (async () => { + this.#browser = await launchChromium(); + this.#viewport = resolveViewport(viewportOptions); + await this.#open(); + })().finally(() => { + this.#starting = null; + }); + await this.#starting; + } + + async #open() { + const v = this.#viewport; + this.#context = await this.#browser.newContext({ + viewport: { width: v.width, height: v.height }, + deviceScaleFactor: v.deviceScaleFactor, + isMobile: v.isMobile, + hasTouch: v.hasTouch, + ...(this.#colorScheme ? { colorScheme: this.#colorScheme } : {}), + }); + this.#page = await this.#context.newPage(); + } + + async #state() { + const page = this.#page; + const history = await page.evaluate(() => ({ + innerWidth: window.innerWidth, + innerHeight: window.innerHeight, + devicePixelRatio: window.devicePixelRatio, + })).catch(() => null); + const nav = await page.evaluate(() => { + const entries = performance.getEntriesByType("navigation"); + return { length: window.history.length, type: entries[0]?.type ?? null }; + }).catch(() => null); + return { url: page.url(), title: await page.title().catch(() => ""), viewport: this.#viewport, page: history, historyLength: nav?.length ?? null }; + } + + async navigate(url, viewportOptions = {}) { + const target = assertHttpUrl(url); + await this.#ensure(viewportOptions); + try { + const response = await this.#page.goto(target.href, { waitUntil: "load", timeout: 30_000 }); + return { ...(await this.#state()), status: response?.status() ?? null }; + } catch (error) { + throw new CaptureError("navigation_failed", `Could not load ${target.origin}: ${error?.message?.split("\n")[0] ?? error}`); + } + } + + async history(direction) { + if (!this.#page) throw new CaptureError("not_started", "Open a page in the controlled browser first."); + const verbs = { back: "goBack", forward: "goForward", refresh: "reload" }; + const verb = verbs[direction]; + if (!verb) throw new CaptureError("invalid_url", `Unknown history action "${direction}".`); + try { + // goBack/goForward resolve null when there is no such entry; that is not a failure. + await this.#page[verb]({ waitUntil: "load", timeout: 30_000 }); + // The context starts on about:blank; it is not user history, so never stay on it. + if (direction === "back" && this.#page.url() === "about:blank") await this.#page.goForward({ waitUntil: "load", timeout: 30_000 }); + } catch (error) { + throw new CaptureError("navigation_failed", `Could not ${direction === "refresh" ? "reload" : `go ${direction} to`} the page: ${error?.message?.split("\n")[0] ?? error}`); + } + return this.#state(); + } + + /** Real session history (about:blank excluded) so it can be replayed into a recreated context. */ + async #readHistory() { + const cdp = await this.#context.newCDPSession(this.#page); + try { + const { entries, currentIndex } = await cdp.send("Page.getNavigationHistory"); + const urls = []; + let index = -1; + entries.forEach((entry, i) => { + if (entry.url === "about:blank") return; + urls.push(entry.url); + if (i === currentIndex) index = urls.length - 1; + }); + return { urls, index: index < 0 ? urls.length - 1 : index }; + } finally { + await cdp.detach().catch(() => {}); + } + } + + /** + * Resizing keeps the page and its history. Changing device traits (mobile, touch, scale factor) needs + * a new browser context, so the logical history is replayed into it and the position is restored. + */ + async setViewport(viewportOptions) { + if (!this.#page) throw new CaptureError("not_started", "Open a page in the controlled browser first."); + const next = resolveViewport(viewportOptions); + const needsNewContext = next.isMobile !== this.#viewport.isMobile + || next.hasTouch !== this.#viewport.hasTouch + || next.deviceScaleFactor !== this.#viewport.deviceScaleFactor; + if (!needsNewContext) { + await this.#page.setViewportSize({ width: next.width, height: next.height }); + this.#viewport = next; + return this.#state(); + } + const { urls, index } = await this.#readHistory(); + const previous = this.#context; + const previousViewport = this.#viewport; + this.#viewport = next; + try { + await this.#open(); + for (const url of urls) { + await this.#page.goto(url, { waitUntil: "load", timeout: 30_000 }); + } + for (let i = urls.length - 1; i > index; i -= 1) { + await this.#page.goBack({ waitUntil: "load", timeout: 30_000 }); + } + } catch (error) { + await closeBounded(this.#context); + this.#viewport = previousViewport; + this.#context = previous; + this.#page = previous.pages()[0] ?? this.#page; + throw new CaptureError("navigation_failed", `Could not re-open the page with the new device settings: ${error?.message?.split("\n")[0] ?? error}`); + } + await closeBounded(previous); + return this.#state(); + } + + async screenshot({ fullPage = false, outputDir = getScreenshotRoot() } = {}) { + if (!this.#page) throw new CaptureError("not_started", "Open a page in the controlled browser first."); + const png = await this.#page.screenshot({ type: "png", fullPage: Boolean(fullPage) }); + const state = await this.#state(); + return { + ...(await savePng(png, outputDir)), + source: "controlled-current", + note: "Screenshot of the controlled Chromium's current page state, including navigation and unsaved page state.", + finalUrl: state.url, + fullPage: Boolean(fullPage), + viewport: state.viewport, + page: state.page, + }; + } + + /** Raw PNG of the current viewport for live display; not written to disk. */ + async frame() { + if (!this.#page) throw new CaptureError("not_started", "Open a page in the controlled browser first."); + return this.#page.screenshot({ type: "png" }); + } + + async close() { + const browser = this.#browser; + this.#browser = this.#context = this.#page = null; + const clean = await closeBrowserBounded(browser); + return { clean }; + } +} diff --git a/extensions/pr-artifact-explorer/capture.test.mjs b/extensions/pr-artifact-explorer/capture.test.mjs new file mode 100644 index 0000000000..3d790a0921 --- /dev/null +++ b/extensions/pr-artifact-explorer/capture.test.mjs @@ -0,0 +1,137 @@ +import assert from "node:assert/strict"; +import { existsSync } from "node:fs"; +import { mkdtemp, readFile, rm } from "node:fs/promises"; +import { createServer } from "node:http"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { CaptureError, ControlledBrowser, captureScreenshot, loadPlaywright, resolveViewport } from "./capture.mjs"; + +test("viewport presets and validation", () => { + assert.deepEqual(resolveViewport({ preset: "mobile" }).width, 390); + assert.equal(resolveViewport({ preset: "tablet" }).height, 1024); + assert.equal(resolveViewport({ preset: "desktop", orientation: "portrait" }).width, 900); + assert.equal(resolveViewport({ preset: "custom", width: 500, height: 600 }).width, 500); + assert.throws(() => resolveViewport({ preset: "watch" }), CaptureError); + assert.throws(() => resolveViewport({ width: 10, height: 600 }), /between 200/); +}); + +test("non-http URLs are refused before any browser starts", async () => { + await assert.rejects(captureScreenshot({ url: "file:///c:/x" }), { code: "invalid_url" }); + await assert.rejects(captureScreenshot({ url: "nope" }), { code: "invalid_url" }); +}); + +test("URLs with embedded credentials are refused before any browser starts", async () => { + const urls = ["http://user:pass@127.0.0.1:9/", "https://user@example.com/", "http://:secret@localhost/"]; + for (const url of urls) { + await assert.rejects(captureScreenshot({ url }), { code: "invalid_url" }); + const browser = new ControlledBrowser(); + await assert.rejects(browser.navigate(url), { code: "invalid_url" }); + await browser.close(); + } +}); + +test("legacy Playwright path variable is rejected explicitly", async () => { + const saved = process.env.PR_ARTIFACT_EXPLORER_PLAYWRIGHT; + process.env.PR_ARTIFACT_EXPLORER_PLAYWRIGHT = join(tmpdir(), "no-such-playwright-dir"); + try { + await assert.rejects(loadPlaywright(), (error) => { + assert.equal(error.code, "playwright_config_unsupported"); + assert.match(error.message, /no longer supported/); + assert.match(error.message, /npx playwright-core install chromium/); + return true; + }); + } finally { + if (saved === undefined) delete process.env.PR_ARTIFACT_EXPLORER_PLAYWRIGHT; + else process.env.PR_ARTIFACT_EXPLORER_PLAYWRIGHT = saved; + } +}); +test("real Chromium emulates the preset and saves a PNG", async (t) => { + const server = createServer((req, res) => { + res.setHeader("content-type", "text/html"); + res.end(``); + }); + await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve)); + const url = `http://127.0.0.1:${server.address().port}/`; + const dir = await mkdtemp(join(tmpdir(), "pae-shot-")); + t.after(async () => { + server.close(); + await rm(dir, { recursive: true, force: true }); + }); + let shot; + try { + shot = await captureScreenshot({ url, preset: "mobile", outputDir: dir }); + } catch (error) { + if (error.code === "playwright_missing" || error.code === "chromium_missing") { + t.skip(error.message.split("\n")[0]); + return; + } + throw error; + } + assert.equal(shot.source, "fresh-render"); + assert.equal(shot.page.innerWidth, 390); + assert.equal(shot.page.innerHeight, 844); + assert.equal(shot.page.devicePixelRatio, 3); + const bytes = await readFile(shot.path); + assert.equal(bytes.subarray(1, 4).toString(), "PNG"); + assert.ok(existsSync(shot.path)); + const full = await captureScreenshot({ url, preset: "desktop", fullPage: true, outputDir: dir }); + assert.ok(full.bytes > 0 && full.fullPage); + const fullPng = await readFile(full.path); + assert.ok(fullPng.readUInt32BE(20) >= 1800, "full page height should cover the 1800px page"); +}); + +test("controlled browser keeps real history, current state and viewport/zoom separation", async (t) => { + const server = createServer((req, res) => { + res.setHeader("content-type", "text/html"); + res.setHeader("x-frame-options", "DENY"); + res.end(`Title<\/h1>/);
+ assert.match(html, /bold<\/strong>/);
+ assert.match(html, /- a<\/li>
- b<\/li><\/ul>/);
+ assert.match(html, /
- one<\/li><\/ol>/);
+ assert.match(html, /
A<\/th>/);
+ assert.match(html, /x<1/);
+});
+
+test("markdown never emits raw HTML or unsafe links", () => {
+ const html = toHtml('\n\n[x](javascript:alert(1))  [ok](https://example.com)');
+ assert.ok(!html.includes(" Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(name, content, deflate) {
+ const raw = Buffer.from(content);
+ const data = deflate ? deflateRawSync(raw) : raw;
+ const nameBuf = Buffer.from(name);
+ const method = deflate ? 8 : 0;
+ const sum = crc32(raw);
+ const local = Buffer.concat([
+ u32(0x04034b50), u16(20), u16(0), u16(method), u16(0), u16(0x21),
+ u32(sum), u32(data.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, data,
+ ]);
+ const central = Buffer.concat([
+ u32(0x02014b50), u16(20), u16(20), u16(0), u16(method), u16(0), u16(0x21),
+ u32(sum), u32(data.length), u32(raw.length),
+ u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf,
+ ]);
+ return Buffer.concat([
+ local, central,
+ u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0),
+ ]);
+}
+
+async function collect(path, entry, range) {
+ const chunks = [];
+ await streamZipEntryRange(
+ path,
+ entry,
+ new Writable({ write(chunk, _e, done) { chunks.push(chunk); done(); } }),
+ range,
+ {},
+ );
+ return Buffer.concat(chunks);
+}
+
+test("video extensions classify as video with playable MIME types", () => {
+ assert.equal(kindForPath("a/video.webm"), "video");
+ assert.equal(kindForPath("clip.MP4"), "video");
+ assert.equal(kindForPath("clip.mov"), "video");
+ assert.equal(mimeForPath("video.webm"), "video/webm");
+ assert.equal(mimeForPath("clip.mp4"), "video/mp4");
+ assert.equal(mimeForPath("clip.mov"), "video/quicktime");
+ assert.equal(kindForPath("results.xml"), "xml");
+});
+
+test("parseByteRange handles suffix, open, clamped, invalid and unsatisfiable ranges", () => {
+ assert.deepEqual(parseByteRange("bytes=0-9", 100), { kind: "range", start: 0, end: 9 });
+ assert.deepEqual(parseByteRange("bytes=90-", 100), { kind: "range", start: 90, end: 99 });
+ assert.deepEqual(parseByteRange("bytes=-10", 100), { kind: "range", start: 90, end: 99 });
+ assert.deepEqual(parseByteRange("bytes=50-500", 100), { kind: "range", start: 50, end: 99 });
+ assert.deepEqual(parseByteRange("bytes=100-", 100), { kind: "unsatisfiable" });
+ assert.deepEqual(parseByteRange("bytes=0-0", 0), { kind: "unsatisfiable" });
+ assert.deepEqual(parseByteRange("bytes=0-1,5-6", 100), { kind: "none" });
+ assert.deepEqual(parseByteRange("items=0-1", 100), { kind: "none" });
+ assert.deepEqual(parseByteRange(undefined, 100), { kind: "none" });
+});
+
+for (const deflate of [false, true]) {
+ test(`streamZipEntryRange returns exact bytes for ${deflate ? "deflated" : "stored"} entries`, async () => {
+ const dir = await mkdtemp(join(tmpdir(), "pae-range-"));
+ try {
+ const content = Buffer.from(Array.from({ length: 5000 }, (_, i) => i % 251));
+ const path = join(dir, "v.zip");
+ await writeFile(path, zipOf("video.webm", content, deflate));
+ const entry = (await readZipIndex(path)).entries[0];
+ assert.deepEqual(await collect(path, entry, { start: 0, end: 4999 }), content);
+ assert.deepEqual(await collect(path, entry, { start: 1234, end: 3456 }), content.subarray(1234, 3457));
+ assert.deepEqual(await collect(path, entry, { start: 4990, end: 4999 }), content.subarray(4990));
+ await assert.rejects(collect(path, entry, { start: 10, end: 5000 }));
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+ });
+}
+
+const FIXTURES = {
+ nested: `
+
+
+ text only]]> suite out suite err
+ `,
+ namespaced: `\uFEFF
+
+ `,
+ generic: `race hello
";
+const TEXT = "plain text";
+
+test("late async responses cannot overwrite the selected mode or file", async (t) => {
+ const { loadPlaywright } = await import("./capture.mjs");
+ let chromium;
+ try {
+ chromium = await loadPlaywright();
+ } catch (error) {
+ return t.skip(error.message.split("\n")[0]);
+ }
+ let browser;
+ for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) {
+ try {
+ browser = await chromium.launch({ headless: true, ...options });
+ break;
+ } catch {
+ // try the next channel
+ }
+ }
+ if (!browser) return t.skip("Chromium is not available");
+
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const instanceId = `mode-race-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await browser.close();
+ await stopInstance(instanceId);
+ await rm(sharedHome, { recursive: true, force: true });
+ });
+ const cache = join(sharedHome, "extensions", "pr-artifact-explorer", "artifacts", "cache");
+ await mkdir(cache, { recursive: true });
+ const files = { "index.html": Buffer.from(HTML), "notes.txt": Buffer.from(TEXT) };
+ await writeFile(join(cache, "3003.zip"), zipOf(files));
+ const entry = (name, kind, mime, raw) => ({ path: name, name, size: raw.length, compressedSize: raw.length, kind, mime, supported: true });
+ await writeFile(join(cache, "3003.json"), JSON.stringify({
+ repository: "o/r",
+ artifact: { id: 3003, name: "a" },
+ downloadedAt: new Date().toISOString(),
+ lastAccessedAt: new Date().toISOString(),
+ compressedBytes: 0,
+ analysis: {
+ primary: { kind: "html", path: "index.html", label: "HTML" },
+ entries: [entry("index.html", "html", "text/html", files["index.html"]), entry("notes.txt", "text", "text/plain", files["notes.txt"])],
+ counts: { html: 1, text: 1 },
+ fileCount: 2,
+ totalUncompressedBytes: HTML.length + TEXT.length,
+ zipBacked: true,
+ },
+ }));
+
+ const page = await browser.newPage();
+ const errors = [];
+ page.on("pageerror", (error) => errors.push(error.message));
+ const gates = { preview: null, raw: null };
+ const hold = (key) => {
+ let release;
+ gates[key] = new Promise((resolve) => (release = resolve));
+ return release;
+ };
+ await page.route("**/api/artifacts/3003/preview-url*", async (route) => {
+ if (gates.preview) await gates.preview;
+ await route.continue();
+ });
+ await page.route("**/api/artifacts/3003/raw*", async (route) => {
+ if (gates.raw) await gates.raw;
+ await route.continue();
+ });
+ const base = server.url ?? `${server.origin}/`;
+ const settle = () => page.waitForTimeout(1000);
+
+ // Preview -> Raw while the preview-url request is pending.
+ const releasePreview = hold("preview");
+ await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=index.html`);
+ await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 });
+ await page.click('[data-preview-mode="raw"]');
+ await page.waitForSelector(".raw-view", { timeout: 40_000 });
+ releasePreview();
+ gates.preview = null;
+ await settle();
+ assert.equal(await page.locator("iframe.preview-frame").count(), 0, "late preview must not execute HTML");
+ assert.equal(await page.locator(".raw-view").count(), 1);
+ assert.equal(await page.getAttribute('[data-preview-mode="raw"]', "aria-pressed"), "true");
+ assert.equal(await page.locator("#preview-open-browser").isVisible(), false);
+
+ // Raw -> Preview while the raw request is pending.
+ await page.click('[data-preview-mode="preview"]');
+ await page.waitForSelector("iframe.preview-frame", { timeout: 40_000 });
+ const releaseRaw = hold("raw");
+ await page.click('[data-preview-mode="raw"]');
+ await page.click('[data-preview-mode="preview"]');
+ await page.waitForSelector("iframe.preview-frame", { timeout: 40_000 });
+ releaseRaw();
+ gates.raw = null;
+ await settle();
+ assert.equal(await page.locator(".raw-view").count(), 0, "late raw must not overwrite Preview");
+ assert.equal(await page.locator("iframe.preview-frame").count(), 1);
+
+ // File switch while the HTML preview-url request is pending.
+ const releaseSwitch = hold("preview");
+ await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=notes.txt`);
+ await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=index.html`);
+ await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=notes.txt`);
+ await page.waitForSelector(".text-preview", { timeout: 40_000 });
+ releaseSwitch();
+ gates.preview = null;
+ await settle();
+ assert.equal(await page.locator("iframe.preview-frame").count(), 0, "late HTML must not replace the selected text file");
+ assert.equal(await page.locator(".text-preview").textContent(), TEXT);
+ assert.deepEqual(errors, []);
+});
diff --git a/extensions/pr-artifact-explorer/nav-history.test.mjs b/extensions/pr-artifact-explorer/nav-history.test.mjs
new file mode 100644
index 0000000000..553651b423
--- /dev/null
+++ b/extensions/pr-artifact-explorer/nav-history.test.mjs
@@ -0,0 +1,211 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { crc32 } from "node:zlib";
+
+const sharedHome = await mkdtemp(join(tmpdir(), "pae-nav-history-"));
+process.env.COPILOT_HOME = sharedHome;
+
+const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(files) {
+ const locals = [];
+ const centrals = [];
+ let offset = 0;
+ for (const [name, raw] of Object.entries(files)) {
+ const nameBuf = Buffer.from(name);
+ const crc = crc32(raw);
+ const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]);
+ centrals.push(Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(offset), nameBuf]));
+ locals.push(local);
+ offset += local.length;
+ }
+ const central = Buffer.concat(centrals);
+ return Buffer.concat([...locals, central, u32(0x06054b50), u16(0), u16(0), u16(centrals.length), u16(centrals.length), u32(central.length), u32(offset), u16(0)]);
+}
+
+test("breadcrumb Back/Forward keeps independent in-canvas route history", async (t) => {
+ const { loadPlaywright } = await import("./capture.mjs");
+ let chromium;
+ try {
+ chromium = await loadPlaywright();
+ } catch (error) {
+ return t.skip(error.message.split("\n")[0]);
+ }
+ let browser;
+ for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) {
+ try {
+ browser = await chromium.launch({ headless: true, ...options });
+ break;
+ } catch {
+ // try the next channel
+ }
+ }
+ if (!browser) return t.skip("Chromium is not available");
+
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const instanceId = `nav-history-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await browser.close();
+ await stopInstance(instanceId);
+ await rm(sharedHome, { recursive: true, force: true });
+ });
+ const cache = join(sharedHome, "extensions", "pr-artifact-explorer", "artifacts", "cache");
+ await mkdir(cache, { recursive: true });
+ const files = { "a.txt": Buffer.from("alpha"), "b.txt": Buffer.from("bravo") };
+ await writeFile(join(cache, "4004.zip"), zipOf(files));
+ const entry = (name, raw) => ({ path: name, name, size: raw.length, compressedSize: raw.length, kind: "text", mime: "text/plain", supported: true });
+ await writeFile(join(cache, "4004.json"), JSON.stringify({
+ repository: "o/r",
+ artifact: { id: 4004, name: "a" },
+ downloadedAt: new Date().toISOString(),
+ lastAccessedAt: new Date().toISOString(),
+ compressedBytes: 0,
+ analysis: {
+ primary: { kind: "text", path: "a.txt", label: "Text" },
+ entries: [entry("a.txt", files["a.txt"]), entry("b.txt", files["b.txt"])],
+ counts: { text: 2 },
+ fileCount: 2,
+ totalUncompressedBytes: 10,
+ zipBacked: true,
+ },
+ }));
+
+ const page = await browser.newPage({ viewport: { width: 1200, height: 800 } });
+ const errors = [];
+ page.on("pageerror", (error) => errors.push(error.message));
+ const base = server.url ?? `${server.origin}/`;
+ const state = () =>
+ page.evaluate(() => ({
+ back: document.querySelector("#route-back").disabled,
+ forward: document.querySelector("#route-forward").disabled,
+ hash: location.hash,
+ stack: JSON.parse(sessionStorage.getItem("pae.routeHistory") ?? "{}").stack ?? [],
+ }));
+
+ await page.goto(`${base}#/artifact/o%2Fr/1/4004?file=a.txt`);
+ await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 });
+ let s = await state();
+ assert.equal(s.back, true, "Back starts disabled");
+ assert.equal(s.forward, true, "Forward starts disabled");
+
+ // Controls are right-aligned and do not overlap the breadcrumb trail.
+ for (const width of [320, 420, 882, 1600]) {
+ await page.setViewportSize({ width, height: 800 });
+ const geo = await page.evaluate(() => {
+ const trail = document.querySelector("#breadcrumb-trail").getBoundingClientRect();
+ const nav = document.querySelector(".route-history").getBoundingClientRect();
+ return { trailRight: trail.right, navLeft: nav.left, navRight: nav.right, width: innerWidth, overflow: document.documentElement.scrollWidth > innerWidth };
+ });
+ assert.ok(geo.navLeft >= geo.trailRight - 0.5, `no overlap at ${width}`);
+ assert.ok(geo.navRight <= geo.width, `controls on screen at ${width}`);
+ assert.equal(geo.overflow, false, `no horizontal overflow at ${width}`);
+ }
+ await page.setViewportSize({ width: 1200, height: 800 });
+ s = await state();
+ assert.equal(s.stack.length, 1, "resize does not add entries");
+
+ // File selection and Raw each create a history entry.
+ await page.click('[data-artifact-file="b.txt"]');
+ await page.waitForFunction(() => location.hash.includes("file=b.txt"));
+ await page.click('[data-preview-mode="raw"]');
+ await page.waitForSelector(".raw-view", { timeout: 40_000 });
+ s = await state();
+ assert.equal(s.stack.length, 3);
+ assert.equal(s.back, false);
+
+ // Back restores Raw -> Preview of b.txt, then a.txt, without appending.
+ await page.click("#route-back");
+ await page.waitForSelector(".raw-view", { state: "detached", timeout: 40_000 });
+ s = await state();
+ assert.equal(s.stack.length, 3, "traversal does not append");
+ assert.match(s.hash, /file=b\.txt/);
+ assert.doesNotMatch(s.hash, /view=raw/);
+ assert.equal(s.forward, false);
+ await page.click("#route-back");
+ await page.waitForFunction(() => location.hash.includes("file=a.txt"));
+ s = await state();
+ assert.equal(s.back, true);
+
+ // Reload keeps the stack (session scoped) and does not duplicate.
+ await page.reload();
+ await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 });
+ s = await state();
+ assert.equal(s.stack.length, 3);
+ assert.equal(s.forward, false);
+
+ // A new destination after Back clears the forward branch.
+ await page.click('[data-artifact-file="b.txt"]');
+ await page.waitForFunction(() => location.hash.includes("file=b.txt"));
+ s = await state();
+ assert.equal(s.forward, true, "forward branch cleared");
+ assert.equal(s.stack.length, 2);
+
+ // Invalid routes are not recorded.
+ for (const bad of ["#nonsense", "#/nonsense", "#/pull/not-a-repo/3", "#/artifact/o%2Fr/x/1", "#/pulls/%E0%A4%A"]) {
+ await page.evaluate((hash) => (location.hash = hash), bad);
+ await page.waitForTimeout(200);
+ }
+ s = await state();
+ assert.deepEqual(s.stack.filter((h) => /nonsense|not-a-repo|%2Fr\/x|%E0/.test(h)), []);
+
+ // Docs, cache and accounts are meaningful steps.
+ const before = s.stack.length;
+ for (const hash of ["#/docs", "#/cache", "#/accounts"]) {
+ await page.evaluate((h) => (location.hash = h), hash);
+ await page.waitForFunction((h) => location.hash === h, hash);
+ }
+ s = await state();
+ assert.equal(s.stack.length, before + 3);
+ assert.deepEqual(s.stack.slice(-3), ["#/docs", "#/cache", "#/accounts"]);
+
+ // The browser view is one step; its URL/zoom noise replaces the entry.
+ const artifactRoute = "#/artifact/o%2Fr/1/4004?file=a.txt";
+ await page.evaluate((h) => (location.hash = h), artifactRoute);
+ await page.waitForFunction((h) => location.hash === h, artifactRoute);
+ await page.evaluate(() => (location.hash = "#/browser"));
+ await page.waitForFunction(() => location.hash.startsWith("#/browser"));
+ await page.evaluate(() => history.replaceState(null, "", "#/browser?v=e30"));
+ await page.evaluate(() => window.dispatchEvent(new HashChangeEvent("hashchange")));
+ s = await state();
+ const browserEntries = s.stack.filter((h) => h.startsWith("#/browser"));
+ assert.equal(browserEntries.length, 1, "browser entry recorded once");
+ const top = s.stack.length;
+ // Canvas history controls stay in a compact row in browser view, distinct from site history.
+ assert.equal(await page.locator("#route-back").isVisible(), true);
+ assert.equal(await page.locator("#route-back").getAttribute("aria-label"), "Back in Artifact Explorer");
+ assert.equal(await page.locator("#br-back").getAttribute("aria-label"), "Back in site (Alt+Left)");
+ await page.click("#route-back");
+ await page.waitForFunction((h) => location.hash === h, artifactRoute);
+ s = await state();
+ assert.equal(s.stack.length, top, "Back from browser does not append");
+ assert.equal(await page.locator("#route-forward").isDisabled(), false, "Forward available to browser");
+ await page.click("#route-forward");
+ await page.waitForFunction(() => location.hash.startsWith("#/browser"));
+ await page.waitForSelector("#br-back");
+ assert.equal(await page.locator("#route-back").isVisible(), true);
+ s = await state();
+ assert.equal(s.stack.length, top);
+ assert.deepEqual(errors, []);
+
+ // A fresh landing on #/docs is recorded, so Back returns to it.
+ const fresh = await browser.newPage({ viewport: { width: 1200, height: 800 } });
+ await fresh.goto(`${base}#/docs`);
+ await fresh.evaluate(() => (location.hash = "#/cache"));
+ await fresh.waitForFunction(() => location.hash === "#/cache");
+ await fresh.evaluate(() => (location.hash = "#/accounts"));
+ await fresh.waitForFunction(() => location.hash === "#/accounts");
+ const stack = await fresh.evaluate(
+ () => JSON.parse(sessionStorage.getItem("pae.routeHistory") ?? "{}").stack,
+ );
+ assert.deepEqual(stack, ["#/docs", "#/cache", "#/accounts"]);
+ await fresh.click("#route-back");
+ await fresh.click("#route-back");
+ await fresh.waitForFunction(() => location.hash === "#/docs");
+ assert.equal(await fresh.locator("#route-back").isDisabled(), true);
+ await fresh.close();
+});
diff --git a/extensions/pr-artifact-explorer/owned-theme.test.mjs b/extensions/pr-artifact-explorer/owned-theme.test.mjs
new file mode 100644
index 0000000000..29b835f900
--- /dev/null
+++ b/extensions/pr-artifact-explorer/owned-theme.test.mjs
@@ -0,0 +1,84 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { crc32 } from "node:zlib";
+
+const sharedHome = await mkdtemp(join(tmpdir(), "pae-owned-theme-"));
+process.env.COPILOT_HOME = sharedHome;
+
+const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(name, raw) {
+ const nameBuf = Buffer.from(name);
+ const crc = crc32(raw);
+ const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]);
+ const central = Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf]);
+ return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0)]);
+}
+
+test("closeBrowserBounded returns within its bound for a stuck browser and never throws", async () => {
+ const { closeBrowserBounded } = await import("./capture.mjs"); const started = Date.now();
+ assert.equal(await closeBrowserBounded({ close: () => new Promise(() => {}) }, 150), false);
+ assert.ok(Date.now() - started < 2000);
+ assert.equal(await closeBrowserBounded({ close: async () => { throw new Error("boom"); } }, 150), true);
+ assert.equal(await closeBrowserBounded({ close: async () => {} }, 150), true);
+ assert.equal(await closeBrowserBounded(null, 150), true);
+});
+
+test("owned artifact pages follow the CURRENT theme in controlled browsing and capture", async (t) => {
+ const home = sharedHome;
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const { startStaticPreview } = await import("./preview.mjs");
+ const instanceId = `owned-theme-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await stopInstance(instanceId);
+ await rm(home, { recursive: true, force: true });
+ });
+ const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache");
+ await mkdir(cache, { recursive: true });
+ const html = Buffer.from(
+ "pending ",
+ );
+ await writeFile(join(cache, "3001.zip"), zipOf("index.html", html));
+ await writeFile(join(cache, "3001.json"), JSON.stringify({ repository: "o/r", artifact: { id: 3001, name: "a" }, entries: [{ name: "index.html", kind: "html" }] }));
+
+ const call = async (path, body) => {
+ const res = await fetch(`${server.origin}${path}`, {
+ method: "POST",
+ headers: { "content-type": "application/json", "x-pr-artifact-explorer-token": server.token },
+ body: JSON.stringify(body),
+ });
+ return { status: res.status, body: await res.json().catch(() => ({})) };
+ };
+
+ const bakedLight = new URL(await startStaticPreview(3001, "index.html", { theme: "light", parentOrigin: server.origin }));
+ const target = `${bakedLight.origin}/index.html?x=1#h`;
+ try {
+ const nav = await call("/api/controlled/navigate", { url: target, theme: "dark", preset: "desktop" });
+ if (nav.status === 424 && /playwright|chromium/i.test(JSON.stringify(nav.body))) return t.skip("Chromium runtime unavailable");
+ assert.equal(nav.status, 200, JSON.stringify(nav.body));
+ assert.equal(nav.body.controlled.title, "dark|true");
+ assert.notEqual(new URL(nav.body.controlled.url).origin, bakedLight.origin);
+ assert.match(nav.body.controlled.url, /\/index\.html\?x=1#h$/);
+
+ const toLight = await call("/api/controlled/theme", { theme: "light" });
+ assert.equal(toLight.status, 200, JSON.stringify(toLight.body));
+ assert.equal(toLight.body.controlled.title, "light|false");
+ assert.match(toLight.body.controlled.url, /\?x=1#h$/);
+
+ const shot = await call("/api/capture", { url: target, theme: "dark", preset: "desktop" });
+ assert.equal(shot.status, 200, JSON.stringify(shot.body));
+ assert.match(shot.body.capture.finalUrl, /\/index\.html\?x=1/);
+ assert.notEqual(new URL(shot.body.capture.finalUrl).origin, bakedLight.origin);
+ assert.equal(shot.body.capture.colorScheme, "dark");
+ } finally {
+ const started = Date.now();
+ const closed = await call("/api/controlled/close", {});
+ assert.equal(closed.status, 200);
+ assert.ok(Date.now() - started < 15_000);
+ }
+});
diff --git a/extensions/pr-artifact-explorer/package-lock.json b/extensions/pr-artifact-explorer/package-lock.json
new file mode 100644
index 0000000000..7dc58f1151
--- /dev/null
+++ b/extensions/pr-artifact-explorer/package-lock.json
@@ -0,0 +1,28 @@
+{
+ "name": "pr-artifact-explorer",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "pr-artifact-explorer",
+ "version": "1.0.0",
+ "optionalDependencies": {
+ "playwright-core": "^1.60.0"
+ }
+ },
+ "node_modules/playwright-core": {
+ "version": "1.63.0",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
+ "integrity": "sha1-5XZlvDKEbCE6w5oeTVvGIo52s3Y=",
+ "license": "Apache-2.0",
+ "optional": true,
+ "bin": {
+ "playwright-core": "cli.js"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ }
+ }
+}
diff --git a/extensions/pr-artifact-explorer/package.json b/extensions/pr-artifact-explorer/package.json
new file mode 100644
index 0000000000..3719091cb0
--- /dev/null
+++ b/extensions/pr-artifact-explorer/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "pr-artifact-explorer",
+ "version": "1.0.0",
+ "type": "module",
+ "main": "extension.mjs",
+ "optionalDependencies": {
+ "playwright-core": "^1.60.0"
+ },
+ "description": "Navigate pull requests and securely explore GitHub Actions artifacts, including test results, static sites, terminal recordings, and source files.",
+ "keywords": [
+ "actions-artifacts",
+ "artifact-browser",
+ "canvas",
+ "github-actions",
+ "pull-requests",
+ "test-results"
+ ]
+}
diff --git a/extensions/pr-artifact-explorer/preview.mjs b/extensions/pr-artifact-explorer/preview.mjs
index d6f2194fff..a90463df00 100644
--- a/extensions/pr-artifact-explorer/preview.mjs
+++ b/extensions/pr-artifact-explorer/preview.mjs
@@ -1,10 +1,9 @@
import { createServer } from "node:http";
import { posix } from "node:path";
import { Transform } from "node:stream";
-import { getCachedEntry } from "./cache.mjs";
+import { getCachedEntry, streamCachedEntry } from "./cache.mjs";
import { mimeForPath } from "./detector.mjs";
import { isCanonicalHost } from "./security.mjs";
-import { streamZipEntry } from "./zip.mjs";
const previewServers = new Map();
const HTML_INJECTION_SEARCH_BYTES = 64 * 1024;
@@ -188,9 +187,8 @@ async function servePreviewRequest(
res.end(themeBridge);
return;
}
- await streamZipEntry(
- context.archivePath,
- context.entry,
+ await streamCachedEntry(
+ context,
res,
themeBridge ? createHtmlInjectionTransform(themeBridge) : null,
);
@@ -260,10 +258,32 @@ export async function startStaticPreview(artifactId, entryPath, options) {
}
serverEntry.host = `127.0.0.1:${address.port}`;
const url = `http://127.0.0.1:${address.port}/`;
- previewServers.set(key, { artifactId: String(artifactId), server, url, canvasOrigin: parentOrigin });
+ previewServers.set(key, {
+ artifactId: String(artifactId),
+ entryPath: context.entry.name,
+ server,
+ url,
+ canvasOrigin: parentOrigin,
+ theme,
+ });
return url;
}
+/** Maps an origin back to the owned static preview serving it, or null for any foreign origin. */
+export function describeOwnedPreview(origin) {
+ for (const value of previewServers.values()) {
+ if (new URL(value.url).origin === origin) {
+ return {
+ artifactId: value.artifactId,
+ entryPath: value.entryPath,
+ theme: value.theme,
+ canvasOrigin: value.canvasOrigin,
+ };
+ }
+ }
+ return null;
+}
+
export async function stopStaticPreviewsForArtifact(artifactId) {
const id = String(artifactId);
const matching = [...previewServers.entries()].filter(
diff --git a/extensions/pr-artifact-explorer/pull-loading.test.mjs b/extensions/pr-artifact-explorer/pull-loading.test.mjs
new file mode 100644
index 0000000000..14060c906c
--- /dev/null
+++ b/extensions/pr-artifact-explorer/pull-loading.test.mjs
@@ -0,0 +1,150 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+
+const sharedHome = await mkdtemp(join(tmpdir(), "pae-pull-loading-"));
+process.env.COPILOT_HOME = sharedHome;
+
+const pullPayload = (title) => ({
+ pullRequest: {
+ number: 1803,
+ title,
+ url: "https://github.com/o/r/pull/1803",
+ state: "open",
+ author: "octo",
+ baseRef: "main",
+ updatedAt: new Date().toISOString(),
+ },
+ artifacts: [],
+ runs: [],
+ artifactCount: 0,
+ runCount: 0,
+});
+
+test("PR detail loading covers header, summary, badge and table", async (t) => {
+ const { loadPlaywright } = await import("./capture.mjs");
+ let chromium;
+ try {
+ chromium = await loadPlaywright();
+ } catch (error) {
+ return t.skip(error.message.split("\n")[0]);
+ }
+ let browser;
+ for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) {
+ try {
+ browser = await chromium.launch({ headless: true, ...options });
+ break;
+ } catch {
+ // try the next channel
+ }
+ }
+ if (!browser) return t.skip("Chromium is not available");
+
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const instanceId = `pull-loading-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await browser.close();
+ await stopInstance(instanceId);
+ await rm(sharedHome, { recursive: true, force: true });
+ });
+
+ const page = await browser.newPage({ viewport: { width: 1200, height: 800 } });
+ const errors = [];
+ page.on("pageerror", (error) => errors.push(error.message));
+
+ let mode = "ok";
+ let title = "First title";
+ let release;
+ let gate = Promise.resolve();
+ await page.route("**/api/pulls/1803?*", async (route) => {
+ await gate;
+ if (mode === "fail") {
+ return route.fulfill({
+ status: 502,
+ contentType: "application/json",
+ body: JSON.stringify({ error: "Upstream exploded" }),
+ });
+ }
+ return route.fulfill({
+ status: 200,
+ contentType: "application/json",
+ body: JSON.stringify(pullPayload(title)),
+ });
+ });
+ const closeGate = () => {
+ gate = new Promise((resolve) => {
+ release = resolve;
+ });
+ };
+ const snapshot = () =>
+ page.evaluate(() => ({
+ busy: document.querySelector("#view")?.getAttribute("aria-busy") ?? null,
+ skeletons: [...document.querySelectorAll("[data-skeleton]")].map((el) => el.dataset.skeleton),
+ title: document.querySelector("h1.page-title")?.textContent ?? null,
+ badge: document.querySelector(".pr-summary .state-badge")?.textContent?.trim() ?? null,
+ table: Boolean(document.querySelector("#view .artifact-list-box:not([data-skeleton])")),
+ flashError: document.querySelector("#view .flash-error")?.textContent ?? null,
+ }));
+
+ const base = server.url ?? `${server.origin}/`;
+ await page.goto(`${base}#/pull/o%2Fr/1803`);
+ await page.waitForSelector("h1.page-title");
+ let s = await snapshot();
+ assert.match(s.title, /First title/);
+ assert.equal(s.busy, null);
+
+ // Forced refresh: nothing from the old header is shown while loading.
+ closeGate();
+ title = "Second title";
+ await page.click("[data-refresh-view]");
+ await page.waitForSelector("[data-pull-loading]");
+ s = await snapshot();
+ assert.deepEqual(new Set(s.skeletons), new Set(["title", "action", "badge", "summary", "table"]));
+ assert.equal(s.busy, "true");
+ assert.equal(s.title, null, "no stale heading while loading");
+ assert.equal(s.badge, null, "no stale badge while loading");
+ assert.equal(s.table, false);
+ release();
+ await page.waitForFunction(() => document.querySelector("h1.page-title")?.textContent.includes("Second title"));
+ s = await snapshot();
+ assert.equal(s.skeletons.length, 0);
+ assert.equal(s.busy, null);
+ assert.equal(s.badge, "Open");
+ assert.equal(s.table, true);
+
+ // Failure: explicit error with Retry, no stuck skeleton.
+ closeGate();
+ mode = "fail";
+ await page.click("[data-refresh-view]");
+ await page.waitForSelector("[data-pull-loading]");
+ release();
+ await page.waitForSelector("#view .flash-error");
+ s = await snapshot();
+ assert.equal(s.skeletons.length, 0);
+ assert.equal(s.busy, null);
+ assert.match(s.flashError, /Upstream exploded|Unable/);
+ mode = "ok";
+ title = "Recovered title";
+ await page.click("#view [data-refresh-view]");
+ await page.waitForFunction(() => document.querySelector("h1.page-title")?.textContent.includes("Recovered title"));
+
+ // A late response must not overwrite a different route.
+ closeGate();
+ title = "Late title";
+ await page.click("[data-refresh-view]");
+ await page.waitForSelector("[data-pull-loading]");
+ await page.evaluate(() => {
+ location.hash = "#/docs";
+ });
+ await page.waitForFunction(() => !document.querySelector("[data-pull-loading]"));
+ release();
+ await page.waitForTimeout(300);
+ s = await snapshot();
+ assert.equal(s.title?.includes("Late title") ?? false, false);
+ assert.equal(s.skeletons.length, 0);
+ assert.equal(s.busy, null);
+ assert.deepEqual(errors, []);
+});
diff --git a/extensions/pr-artifact-explorer/range-integrity.test.mjs b/extensions/pr-artifact-explorer/range-integrity.test.mjs
new file mode 100644
index 0000000000..e382a1bf78
--- /dev/null
+++ b/extensions/pr-artifact-explorer/range-integrity.test.mjs
@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { crc32, deflateRawSync } from "node:zlib";
+
+const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(name, raw, { deflate, crc = crc32(raw), size = raw.length, flipDataByte = false }) {
+ const data = Buffer.from(deflate ? deflateRawSync(raw) : raw);
+ if (flipDataByte) data[Math.floor(data.length / 2)] ^= 0xff;
+ const nameBuf = Buffer.from(name);
+ const method = deflate ? 8 : 0;
+ const local = Buffer.concat([
+ u32(0x04034b50), u16(20), u16(0), u16(method), u16(0), u16(0x21),
+ u32(crc), u32(data.length), u32(size), u16(nameBuf.length), u16(0), nameBuf, data,
+ ]);
+ const central = Buffer.concat([
+ u32(0x02014b50), u16(20), u16(20), u16(0), u16(method), u16(0), u16(0x21),
+ u32(crc), u32(data.length), u32(size),
+ u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf,
+ ]);
+ return Buffer.concat([
+ local, central,
+ u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0),
+ ]);
+}
+
+test("ranged video reads verify the whole entry first and reject corrupt CRC/size", async (t) => {
+ const home = await mkdtemp(join(tmpdir(), "pae-range-integrity-"));
+ process.env.COPILOT_HOME = home;
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const instanceId = `range-integrity-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await stopInstance(instanceId);
+ await rm(home, { recursive: true, force: true });
+ });
+
+ const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache");
+ await mkdir(cache, { recursive: true });
+ const content = Buffer.from(Array.from({ length: 6000 }, (_, i) => (i * 13) % 251));
+ const cases = [
+ ["1001", "good-stored", { deflate: false }, true],
+ ["1002", "good-deflated", { deflate: true }, true],
+ ["1003", "bad-crc-stored", { deflate: false, crc: crc32(content) ^ 1 }, false],
+ ["1004", "bad-crc-deflated", { deflate: true, crc: crc32(content) ^ 1 }, false],
+ ["1005", "bad-data-stored", { deflate: false, flipDataByte: true }, false],
+ ["1006", "bad-size-deflated", { deflate: true, size: 5000 }, false],
+ ["1007", "bad-size-larger-deflated", { deflate: true, size: 7000 }, false],
+ ];
+ for (const [id, , options] of cases) {
+ await writeFile(join(cache, `${id}.zip`), zipOf("v/video.webm", content, options));
+ await writeFile(
+ join(cache, `${id}.json`),
+ JSON.stringify({
+ repository: "o/r",
+ artifact: { id: Number(id), name: "a" },
+ entries: [{ name: "v/video.webm", kind: "video" }],
+ }),
+ );
+ }
+
+ for (const [id, label, options, good] of cases) {
+ const url = `${server.origin}/content/${id}/v/video.webm?token=${server.token}`;
+ const size = options.size ?? content.length;
+ const partial = await fetch(url, { headers: { Range: "bytes=100-199" } });
+ if (good) {
+ assert.equal(partial.status, 206, label);
+ assert.deepEqual(Buffer.from(await partial.arrayBuffer()), content.subarray(100, 200), label);
+ // Seeking backwards and to the tail reuses the verified entry.
+ const back = await fetch(url, { headers: { Range: "bytes=0-9" } });
+ assert.deepEqual(Buffer.from(await back.arrayBuffer()), content.subarray(0, 10), label);
+ const tail = await fetch(url, { headers: { Range: "bytes=-50" } });
+ assert.deepEqual(Buffer.from(await tail.arrayBuffer()), content.subarray(5950), label);
+ } else {
+ assert.notEqual(partial.status, 206, `${label} (size ${size}) must not serve a partial range`);
+ assert.ok(partial.status >= 400, label);
+ const body = Buffer.from(await partial.arrayBuffer());
+ assert.equal(body.includes(content.subarray(100, 140)), false, `${label} leaked bytes`);
+ }
+ }
+});
diff --git a/extensions/pr-artifact-explorer/raw-open.test.mjs b/extensions/pr-artifact-explorer/raw-open.test.mjs
new file mode 100644
index 0000000000..703b550204
--- /dev/null
+++ b/extensions/pr-artifact-explorer/raw-open.test.mjs
@@ -0,0 +1,215 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { crc32, deflateRawSync } from "node:zlib";
+import { ExternalOpenError, launchWithAck, launcherCommand, setExternalOpener, validateExternalUrl } from "./external-open.mjs";
+import { EventEmitter } from "node:events";
+
+function fakeSpawn(behavior) {
+ return (command, args, options) => {
+ const child = new EventEmitter();
+ child.unref = () => { child.unrefd = true; };
+ child.spawned = { command, args, options };
+ setImmediate(() => behavior(child));
+ return child;
+ };
+}
+
+test("launcher acknowledgement reports nonzero exit, errors, zero exit and long-lived launchers truthfully", async () => {
+ const run = (behavior, ackMs = 200) => launchWithAck("http://a/", { spawnFn: fakeSpawn(behavior), ackMs, command: { command: "x", args: ["http://a/"] } });
+ await assert.rejects(run((c) => c.emit("exit", 1, null)), /code 1/);
+ await assert.rejects(run((c) => c.emit("exit", null, "SIGKILL")), /SIGKILL/);
+ await assert.rejects(run((c) => c.emit("error", new Error("ENOENT"))), /ENOENT/);
+ await run((c) => c.emit("exit", 0, null));
+ let alive;
+ await run((c) => { alive = c; });
+ assert.equal(alive.unrefd, true);
+ assert.equal(alive.listenerCount("exit"), 0);
+ assert.deepEqual(
+ Object.keys(await new Promise((r) => { const s = fakeSpawn((c) => c.emit("exit", 0)); const c = s("x", [], { shell: false, windowsHide: true, detached: true, stdio: "ignore" }); r(c.spawned.options); })).sort(),
+ ["detached", "shell", "stdio", "windowsHide"],
+ );
+ await assert.rejects(
+ (async () => { setExternalOpener((u) => launchWithAck(u, { spawnFn: fakeSpawn((c) => c.emit("exit", 3)), ackMs: 100, command: { command: "x", args: [] } })); try { const { openInDefaultBrowser } = await import("./external-open.mjs"); await openInDefaultBrowser("http://127.0.0.1/"); } finally { setExternalOpener(null); } })(),
+ (error) => error.code === "launch_failed",
+ );
+});
+
+const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(name, raw, { deflate = false, flags = 0, method, declaredSize, declaredCrc } = {}) {
+ const data = Buffer.from(deflate ? deflateRawSync(raw) : raw);
+ const nameBuf = Buffer.from(name);
+ const m = method ?? (deflate ? 8 : 0);
+ const crc = declaredCrc ?? crc32(raw);
+ const usize = declaredSize ?? raw.length;
+ const local = Buffer.concat([
+ u32(0x04034b50), u16(20), u16(flags), u16(m), u16(0), u16(0x21),
+ u32(crc), u32(data.length), u32(usize), u16(nameBuf.length), u16(0), nameBuf, data,
+ ]);
+ const central = Buffer.concat([
+ u32(0x02014b50), u16(20), u16(20), u16(flags), u16(m), u16(0), u16(0x21),
+ u32(crc), u32(data.length), u32(usize),
+ u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf,
+ ]);
+ return Buffer.concat([
+ local, central,
+ u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0),
+ ]);
+}
+
+const sharedHome = await mkdtemp(join(tmpdir(), "pae-raw-"));
+process.env.COPILOT_HOME = sharedHome;
+
+test("hexDump formats offset, hex and ASCII without decoding", async () => {
+ const { hexDump } = await import("./raw.mjs");
+ const dump = hexDump(Buffer.from([0x41, 0x00, 0xff, 0x7e]), 16);
+ assert.match(dump, /^00000010 {2}41 00 ff 7e/);
+ assert.match(dump, /\|A\.\.~\|$/);
+});
+
+test("raw view returns exact source, bounded hex, and explains unsupported entries", async (t) => {
+ const home = sharedHome;
+ const instanceId = `raw-${Date.now()}`;
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const server = await startInstance(instanceId, null, () => {});
+ t.after(async () => {
+ await stopInstance(instanceId);
+ await rm(home, { recursive: true, force: true });
+ });
+ const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache");
+ await mkdir(cache, { recursive: true });
+
+ const ugly = Buffer.from('{"b":1,\r\n "a" :[1,2],"é":"ü"}\r\n');
+ const bin = Buffer.from(Array.from({ length: 40000 }, (_, i) => (i * 7) % 256));
+ const bigText = Buffer.from("line of text\n".repeat(400000));
+ const htmlSource = Buffer.from("\r\né
\r\n");
+ const castSource = Buffer.from('{"version":2,"width":80,"height":24}\n[0.1,"o","hi"]\n');
+ const svgSource = Buffer.from('');
+ const fixtures = [
+ ["2001", "d/data.json", ugly, {}],
+ ["2002", "d/empty.txt", Buffer.alloc(0), {}],
+ ["2003", "d/movie.webm", bin, { deflate: true }],
+ ["2004", "d/big.log", bigText, { deflate: true }],
+ ["2005", "d/secret.txt", Buffer.from("x"), { flags: 1 }],
+ ["2006", "d/odd.txt", Buffer.from("abc"), { method: 14 }],
+ ["2007", "d/tiny.png", Buffer.from([0x89, 0x50, 0x4e, 0x47]), {}],
+ ["2008", "d/bad-crc.txt", Buffer.alloc(0), { declaredCrc: 0xdeadbeef }],
+ ["2009", "d/bad-data.txt", Buffer.from("hidden"), { declaredSize: 0, declaredCrc: 0 }],
+ ["2010", "d/index.html", htmlSource, {}],
+ ["2011", "d/demo.cast", castSource, {}],
+ ["2012", "d/logo.svg", svgSource, {}],
+ ];
+ for (const [id, name, content, options] of fixtures) {
+ await writeFile(join(cache, `${id}.zip`), zipOf(name, content, options));
+ await writeFile(
+ join(cache, `${id}.json`),
+ JSON.stringify({ repository: "o/r", artifact: { id: Number(id), name: "a" }, entries: [{ name, kind: "binary" }] }),
+ );
+ }
+ const raw = async (id, name) => {
+ const response = await fetch(
+ `${server.origin}/api/artifacts/${id}/raw?path=${encodeURIComponent(name)}`,
+ { headers: { "x-pr-artifact-explorer-token": server.token } },
+ );
+ return { status: response.status, body: await response.json() };
+ };
+
+ const json = await raw(2001, "d/data.json");
+ assert.equal(json.status, 200, JSON.stringify(json.body));
+ assert.equal(json.body.mode, "text");
+ assert.equal(json.body.content, ugly.toString("utf8"), "JSON is not reserialized");
+ assert.equal(json.body.truncated, false);
+
+ const empty = await raw(2002, "d/empty.txt");
+ assert.equal(empty.body.mode, "empty");
+ assert.equal(empty.body.size, 0);
+ for (const [id, name] of [[2008, "d/bad-crc.txt"], [2009, "d/bad-data.txt"]]) {
+ const bad = await raw(id, name);
+ assert.ok(bad.status >= 400, `${name} must not become an empty success: ${JSON.stringify(bad.body)}`);
+ assert.notEqual(bad.body.mode, "empty");
+ }
+
+ for (const [id, name, source] of [
+ [2010, "d/index.html", htmlSource],
+ [2011, "d/demo.cast", castSource],
+ [2012, "d/logo.svg", svgSource],
+ ]) {
+ const result = await raw(id, name);
+ assert.equal(result.body.mode, "text", name);
+ assert.equal(result.body.content, source.toString("utf8"), `${name} exact source`);
+ }
+
+ const movie = await raw(2003, "d/movie.webm");
+ assert.equal(movie.body.mode, "hex");
+ assert.equal(movie.body.truncated, true);
+ assert.equal(movie.body.size, bin.length);
+ assert.equal(movie.body.shown, 16 * 1024);
+ assert.equal(movie.body.content.split("\n").length, 1024);
+
+ const big = await raw(2004, "d/big.log");
+ assert.equal(big.body.mode, "text");
+ assert.equal(big.body.truncated, true);
+ assert.equal(big.body.size, bigText.length);
+ assert.ok(big.body.shown < bigText.length);
+ assert.equal(big.body.content, bigText.subarray(0, big.body.shown).toString("utf8"));
+
+ const small = await raw(2007, "d/tiny.png");
+ assert.equal(small.body.mode, "hex");
+ assert.equal(small.body.truncated, false);
+
+ const encrypted = await raw(2005, "d/secret.txt");
+ assert.equal(encrypted.body.mode, "unsupported");
+ assert.match(encrypted.body.reason, /encrypted/);
+ const odd = await raw(2006, "d/odd.txt");
+ assert.equal(odd.body.mode, "unsupported");
+ assert.match(odd.body.reason, /method 14/);
+
+ const missing = await raw(2001, "d/nope.txt");
+ assert.ok(missing.status >= 400);
+});
+
+test("external open validates URLs and routes through an injectable launcher", async (t) => {
+ assert.equal(validateExternalUrl("http://127.0.0.1:3000/a?b=1#c"), "http://127.0.0.1:3000/a?b=1#c");
+ for (const bad of ["", "file:///etc/passwd", "javascript:alert(1)", "http://u:p@example.com/", "http://exa mple.com/", "http://a.com/\n", "ftp://x.com", "not a url"]) {
+ assert.throws(() => validateExternalUrl(bad), ExternalOpenError, bad);
+ }
+ assert.deepEqual(launcherCommand("http://a/", "win32", { SystemRoot: "C:\\Windows" }), { command: "C:\\Windows\\System32\\rundll32.exe", args: ["url.dll,FileProtocolHandler", "http://a/"] });
+ assert.equal(launcherCommand("http://a/", "darwin").command, "/usr/bin/open");
+ assert.equal(launcherCommand("http://a/", "linux").command, "xdg-open");
+
+ const home = await mkdtemp(join(tmpdir(), "pae-open-"));
+ process.env.COPILOT_HOME = home;
+ const { startInstance, stopInstance } = await import("./server.mjs");
+ const instanceId = `open-${Date.now()}`;
+ const server = await startInstance(instanceId, null, () => {});
+ const opened = [];
+ setExternalOpener(async (url) => { opened.push(url); });
+ t.after(async () => {
+ setExternalOpener(null);
+ await stopInstance(instanceId);
+ await rm(home, { recursive: true, force: true });
+ });
+ const post = (body) =>
+ fetch(`${server.origin}/api/browser/open-external`, {
+ method: "POST",
+ headers: { "content-type": "application/json", "x-pr-artifact-explorer-token": server.token },
+ body: JSON.stringify(body),
+ });
+
+ const ok = await post({ url: "https://example.com/x?y=1#z", theme: "dark" });
+ assert.equal(ok.status, 200);
+ assert.deepEqual(opened, ["https://example.com/x?y=1#z"]);
+
+ const rejected = await post({ url: "javascript:alert(1)" });
+ assert.equal(rejected.status, 400);
+ assert.equal(opened.length, 1, "invalid URLs never reach the launcher");
+
+ setExternalOpener(async () => { throw new Error("no handler"); });
+ const failed = await post({ url: "https://example.com/" });
+ assert.equal(failed.status, 502);
+ assert.match((await failed.json()).error ?? "", /Could not launch/);
+});
diff --git a/extensions/pr-artifact-explorer/raw-wiring.test.mjs b/extensions/pr-artifact-explorer/raw-wiring.test.mjs
new file mode 100644
index 0000000000..f7e40c1677
--- /dev/null
+++ b/extensions/pr-artifact-explorer/raw-wiring.test.mjs
@@ -0,0 +1,89 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { normalizeColorScheme } from "./capture.mjs";
+
+const asset = (name) => readFile(new URL(`./assets/${name}`, import.meta.url), "utf8");
+
+test("color scheme is validated", () => {
+ assert.equal(normalizeColorScheme("dark"), "dark");
+ assert.equal(normalizeColorScheme("light"), "light");
+ assert.throws(() => normalizeColorScheme("neon"));
+});
+
+test("preview toolbar wires a single Preview/Raw toggle before Download", async () => {
+ const app = await asset("app.js");
+ assert.ok(app.indexOf('class="preview-mode"') < app.indexOf('id="preview-download"'));
+ assert.match(app, /view=raw/);
+ assert.match(app, /renderRawPreview/);
+ assert.equal((app.match(/class="preview-mode"/g) ?? []).length, 1);
+});
+
+test("shared browser route only accepts version 1 safe http(s) URLs", async () => {
+ const src = await asset("browser.js");
+ const grab = (name) => src.slice(src.indexOf(`function ${name}(`)).split(/\n}\n/)[0] + "\n}";
+ const { decodeViewClient, encodeViewClient } = new Function(
+ `${grab("encodeViewClient")}\n${grab("safeHttpUrl")}\n${grab("decodeViewClient")}\nreturn { decodeViewClient, encodeViewClient };`,
+ )();
+ const enc = (body) => Buffer.from(JSON.stringify(body)).toString("base64url");
+ for (const url of ["javascript:alert(1)", "data:text/html,x", "http://u:p@example.com/", "https://ex\u0000.com/", "file:///c:/x"]) {
+ assert.equal(decodeViewClient(enc({ v: 1, url })).url, undefined, url);
+ }
+ assert.deepEqual(decodeViewClient(enc({ v: 2, url: "https://example.com/" })), {});
+ assert.deepEqual(decodeViewClient("!!!"), {});
+ const ok = decodeViewClient(encodeViewClient({ url: "http://localhost:3000/a", preset: "mobile", zoom: 1.5 }));
+ assert.equal(ok.url, "http://localhost:3000/a");
+ assert.equal(ok.preset, "mobile");
+});
+
+test("browser view syncs theme on load/change and exposes native open", async () => {
+ const browser = await asset("browser.js");
+ assert.match(browser, /data-theme-aware-preview/);
+ assert.match(browser, /\/api\/browser\/owned/);
+ assert.match(browser, /id="br-open-external"/);
+ assert.match(browser, /\/api\/browser\/open-external/);
+ assert.match(browser, /observeCanvasTheme\(/);
+ assert.match(browser, /stopThemeObserver\(\)/);
+ assert.match(browser, /theme: resolvedCanvasTheme\(\)/);
+});
+
+test("theme observer covers root+body attributes, color-scheme and media changes without silent failures", async () => {
+ const app = await asset("app.js");
+ assert.match(app, /THEME_ATTRIBUTES/);
+ assert.match(app, /observe\(document\.body/);
+ assert.match(app, /previewThemeMedia\.addEventListener\("change"/);
+ assert.match(app, /color-scheme|colorScheme/);
+ assert.match(app, /theme === last/);
+ const themeBlock = app.slice(app.indexOf("function resolvedCanvasTheme"), app.indexOf("function installPreviewThemeSync"));
+ assert.doesNotMatch(themeBlock, /catch\(\(\)\s*=>\s*\{\s*\}\)/);
+});
+
+test("raw styles exist", async () => {
+ const css = await asset("app.css");
+ for (const selector of [".preview-mode", ".raw-view", ".raw-note", ".raw-content"]) {
+ assert.ok(css.includes(selector), selector);
+ }
+});
+
+test("in-report XML source button routes into the global Raw mode", async () => {
+ const app = await readFile(new URL("./assets/app.js", import.meta.url), "utf8");
+ assert.match(app, /viewName === "raw" && currentArtifact\?\.selectedPath[\s\S]{0,60}setPreviewMode\("raw"\)/);
+});
+
+test("capture loads Playwright without non-literal import/require calls", async () => {
+ const src = await readFile(new URL("./capture.mjs", import.meta.url), "utf8");
+ assert.doesNotMatch(src, /\bimport\s*\(\s*[^'"\s)]/);
+ assert.doesNotMatch(src, /(? {
+ const css = await asset("app.css");
+ const block = css.match(/\.browser-stage \{[^}]*\}/)[0];
+ assert.match(block, /background: var\(--bgColor-inset, var\(--background-color-default/);
+ assert.match(block, /color-scheme: light dark/);
+});
\ No newline at end of file
diff --git a/extensions/pr-artifact-explorer/raw.mjs b/extensions/pr-artifact-explorer/raw.mjs
new file mode 100644
index 0000000000..10c6b91f25
--- /dev/null
+++ b/extensions/pr-artifact-explorer/raw.mjs
@@ -0,0 +1,125 @@
+import { Writable } from "node:stream";
+import { MAX_INLINE_PREVIEW_BYTES, MAX_TRX_PREVIEW_BYTES } from "./constants.mjs";
+import { getCachedEntry, readCachedEntry, streamCachedEntry, verifyCachedEntry } from "./cache.mjs";
+import { isInlineTextKind, kindForPath } from "./detector.mjs";
+
+export const RAW_HEX_PREFIX_BYTES = 16 * 1024;
+export const RAW_TEXT_PREFIX_BYTES = 256 * 1024;
+
+/** Classic offset / hex / ASCII dump. Non-printable bytes render as "."; no decoding, so no mojibake. */
+export function hexDump(bytes, baseOffset = 0) {
+ const lines = [];
+ for (let i = 0; i < bytes.length; i += 16) {
+ const chunk = bytes.subarray(i, i + 16);
+ const hex = [...chunk].map((b) => b.toString(16).padStart(2, "0"));
+ while (hex.length < 16) hex.push(" ");
+ const ascii = [...chunk].map((b) => (b >= 0x20 && b < 0x7f ? String.fromCharCode(b) : ".")).join("");
+ lines.push(
+ `${(baseOffset + i).toString(16).padStart(8, "0")} ${hex.slice(0, 8).join(" ")} ${hex.slice(8).join(" ")} |${ascii}|`,
+ );
+ }
+ return lines.join("\n");
+}
+
+function unsupportedReason(entry) {
+ if (entry.directory) return "This entry is a directory.";
+ if (entry.symlink) return "This entry is a symbolic link; its target is never followed or read.";
+ if (entry.encrypted) return "This entry is encrypted, so its original bytes cannot be decoded here.";
+ return `This entry uses ZIP compression method ${entry.method}, which cannot be safely decoded here.`;
+}
+
+function decodeUtf8(bytes) {
+ try {
+ return new TextDecoder("utf-8", { fatal: true, ignoreBOM: true }).decode(bytes);
+ } catch {
+ return null;
+ }
+}
+
+/** Drops an incomplete trailing UTF-8 sequence so a truncated prefix still decodes strictly. */
+function trimIncompleteUtf8(bytes) {
+ let end = bytes.length;
+ for (let back = 1; back <= 3 && end - back >= 0; back += 1) {
+ const b = bytes[end - back];
+ if ((b & 0xc0) === 0x80) continue;
+ const need = b >= 0xf0 ? 4 : b >= 0xe0 ? 3 : b >= 0xc0 ? 2 : 1;
+ if (need > back) end -= back;
+ break;
+ }
+ return bytes.subarray(0, end);
+}
+
+async function readPrefix(context, length) {
+ const chunks = [];
+ const sink = new Writable({
+ write(chunk, _enc, cb) {
+ chunks.push(Buffer.from(chunk));
+ cb();
+ },
+ });
+ await verifyCachedEntry(context);
+ await streamCachedEntry(context, sink, null, { start: 0, end: length - 1 });
+ sink.end();
+ return Buffer.concat(chunks);
+}
+
+/**
+ * Builds the Raw view payload for one cached entry. Whole-entry CRC/size verification always
+ * happens before any bytes are returned; large files return only a bounded, clearly partial prefix.
+ */
+export async function buildRawView(artifactId, entryPath) {
+ const context = await getCachedEntry(artifactId, entryPath);
+ const { entry } = context;
+ const size = entry.uncompressedSize;
+ const base = { path: entry.name, size };
+ if (!entry.supported) {
+ return { ...base, mode: "unsupported", supported: false, reason: unsupportedReason(entry) };
+ }
+ if (size === 0) {
+ await verifyCachedEntry(context);
+ return { ...base, mode: "empty", supported: true, truncated: false, shown: 0 };
+ }
+
+ const kind = kindForPath(entry.name);
+ if (isRawTextKind(kind, entry.name)) {
+ const limit = kind === "trx" ? MAX_TRX_PREVIEW_BYTES : MAX_INLINE_PREVIEW_BYTES;
+ if (size <= limit) {
+ const { content } = await readCachedEntry(artifactId, entryPath, limit);
+ const text = decodeUtf8(content);
+ if (text !== null) {
+ return { ...base, mode: "text", supported: true, truncated: false, shown: size, encoding: "utf-8", content: text };
+ }
+ return hexResult(base, content.subarray(0, RAW_HEX_PREFIX_BYTES), size, "Not valid UTF-8; shown as bytes.");
+ }
+ const prefix = trimIncompleteUtf8(await readPrefix(context, RAW_TEXT_PREFIX_BYTES));
+ const text = decodeUtf8(prefix);
+ if (text !== null) {
+ return { ...base, mode: "text", supported: true, truncated: true, shown: prefix.length, encoding: "utf-8", content: text };
+ }
+ return hexResult(base, prefix.subarray(0, RAW_HEX_PREFIX_BYTES), size, "Not valid UTF-8; shown as bytes.");
+ }
+ const prefix = size <= RAW_HEX_PREFIX_BYTES ? await readPrefix(context, size) : await readPrefix(context, RAW_HEX_PREFIX_BYTES);
+ return hexResult(base, prefix, size, "Binary content; shown as bytes.");
+}
+
+function isRawTextKind(kind, name) {
+ return (
+ isInlineTextKind(kind) ||
+ kind === "html" ||
+ kind === "asciinema" ||
+ String(name).toLowerCase().endsWith(".svg")
+ );
+}
+
+function hexResult(base, bytes, size, encodingNote) {
+ return {
+ ...base,
+ mode: "hex",
+ supported: true,
+ truncated: bytes.length < size,
+ shown: bytes.length,
+ encoding: "binary",
+ note: encodingNote,
+ content: hexDump(bytes),
+ };
+}
diff --git a/extensions/pr-artifact-explorer/render.mjs b/extensions/pr-artifact-explorer/render.mjs
index a43f429207..520dace3a6 100644
--- a/extensions/pr-artifact-explorer/render.mjs
+++ b/extensions/pr-artifact-explorer/render.mjs
@@ -23,6 +23,9 @@ export const HTML = `
+
+
+
@@ -69,12 +72,28 @@ export const HTML = `
-
diff --git a/extensions/pr-artifact-explorer/report-state.test.mjs b/extensions/pr-artifact-explorer/report-state.test.mjs
new file mode 100644
index 0000000000..0e36dd34fb
--- /dev/null
+++ b/extensions/pr-artifact-explorer/report-state.test.mjs
@@ -0,0 +1,86 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { crc32 } from "node:zlib";
+
+const sharedHome = await mkdtemp(join(tmpdir(), "pae-report-state-"));
+process.env.COPILOT_HOME = sharedHome;
+
+const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer);
+const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer);
+
+function zipOf(name, raw) {
+ const nameBuf = Buffer.from(name);
+ const crc = crc32(raw);
+ const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]);
+ const central = Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf]);
+ return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0)]);
+}
+
+const XML = `
+trace hi
", zip64 = false, crc, dirOffset } = {}) {
+ const data = Buffer.from(content);
+ const nameBuf = Buffer.from(name);
+ const checksum = crc ?? crc32(data);
+ const local = Buffer.concat([
+ u32(0x04034b50), u16(zip64 ? 45 : 20), u16(0), u16(0), u16(0), u16(0x21),
+ u32(checksum), u32(data.length), u32(data.length), u16(nameBuf.length), u16(0), nameBuf, data,
+ ]);
+ const extra = zip64 ? Buffer.concat([u16(1), u16(24), u64(data.length), u64(data.length), u64(0)]) : Buffer.alloc(0);
+ const central = Buffer.concat([
+ u32(0x02014b50), u16(45), u16(zip64 ? 45 : 20), u16(0), u16(0), u16(0), u16(0x21),
+ u32(checksum), u32(zip64 ? 0xffffffff : data.length), u32(zip64 ? 0xffffffff : data.length),
+ u16(nameBuf.length), u16(extra.length), u16(0), u16(0), u16(0), u32(0),
+ u32(zip64 ? 0xffffffff : 0), nameBuf, extra,
+ ]);
+ const cdOffset = dirOffset ?? local.length;
+ if (!zip64) {
+ return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(cdOffset), u16(0)]);
+ }
+ const eocd64Offset = local.length + central.length;
+ const eocd64 = Buffer.concat([
+ u32(0x06064b50), u64(44), u16(45), u16(45), u32(0), u32(0), u64(1), u64(1), u64(central.length), u64(cdOffset),
+ ]);
+ const locator = Buffer.concat([u32(0x07064b50), u32(0), u64(eocd64Offset), u32(1)]);
+ return Buffer.concat([
+ local, central, eocd64, locator,
+ u32(0x06054b50), u16(0), u16(0), u16(0xffff), u16(0xffff), u32(0xffffffff), u32(0xffffffff), u16(0),
+ ]);
+}
+
+async function withZip(options, fn) {
+ const dir = await mkdtemp(join(tmpdir(), "zip64-"));
+ try {
+ const path = join(dir, "a.zip");
+ await writeFile(path, buildZip(options));
+ return await fn(path);
+ } finally {
+ await rm(dir, { recursive: true, force: true });
+ }
+}
+
+for (const zip64 of [false, true]) {
+ test(`reads a valid ${zip64 ? "ZIP64" : "ZIP32"} archive`, () =>
+ withZip({ zip64 }, async (path) => {
+ const index = await readZipIndex(path);
+ assert.equal(index.zip64, zip64);
+ assert.equal(index.entries.length, 1);
+ assert.equal((await readZipEntry(path, index.entries[0])).toString(), "hi
");
+ }));
+}
+
+test("CRC mismatch is a hard integrity failure", () =>
+ withZip({ zip64: true, crc: 1234 }, async (path) => {
+ const index = await readZipIndex(path);
+ await assert.rejects(readZipEntry(path, index.entries[0]), /checksum/);
+ }));
+
+test("path traversal is rejected", () =>
+ withZip({ zip64: true, name: "../escape.txt" }, async (path) => {
+ await assert.rejects(readZipIndex(path), /unsafe path/);
+ }));
+
+test("a central directory pointing outside the archive is rejected", () =>
+ withZip({ dirOffset: 99999 }, async (path) => {
+ await assert.rejects(readZipIndex(path), /outside the archive|central directory/i);
+ }));
+
+test("soft entry limit warns while indexing continues", () =>
+ withZip({ zip64: true }, async (path) => {
+ const warnings = [];
+ const index = await readZipIndex(path, {
+ softLimits: { zipEntries: 0 },
+ onSoftLimit: (kind, current) => warnings.push([kind, current]),
+ });
+ assert.equal(index.entries.length, 1);
+ assert.equal(warnings.length, 1);
+ assert.equal(warnings[0][0], "zipEntries");
+ assert.equal(warnings[0][1], index.entries.length);
+ assert.ok(warnings[0][1] > 0);
+ }));
diff --git a/plugins/pr-artifact-explorer/plugin.json b/plugins/pr-artifact-explorer/plugin.json
index 2841734f7b..bedb8d39de 100644
--- a/plugins/pr-artifact-explorer/plugin.json
+++ b/plugins/pr-artifact-explorer/plugin.json
@@ -20,6 +20,9 @@
"logo": "assets/preview.png"
},
"com.github.awesome-copilot": {
+ "skills": [
+ "./skills/pr-artifact-explorer/"
+ ],
"extensions": [
"./extensions/pr-artifact-explorer"
]
diff --git a/skills/pr-artifact-explorer/SKILL.md b/skills/pr-artifact-explorer/SKILL.md
new file mode 100644
index 0000000000..a0865df83c
--- /dev/null
+++ b/skills/pr-artifact-explorer/SKILL.md
@@ -0,0 +1,55 @@
+---
+name: pr-artifact-explorer
+description: 'Open, share, and inspect GitHub PRs, issues, Actions artifacts, and local or HTTP(S) web previews in the Artifact Explorer canvas, with viewport presets, zoom, screenshots, and recoverable download jobs.'
+---
+
+# Artifact Explorer
+
+Use the `pr-artifact-explorer` canvas to show a user pull requests, issues, Actions artifacts, and web pages.
+
+## How to drive the canvas
+
+The action names below (`open_target`, `share`, ...) are **canvas actions, not standalone tools**. Always:
+
+1. Call `list_canvas_capabilities { canvasId: "pr-artifact-explorer" }` to discover the actions and their schemas.
+2. Call `open_canvas { canvasId: "pr-artifact-explorer", instanceId: "" }` to open or focus the panel.
+3. Call `invoke_canvas_action { instanceId, actionName, input }` with that same `instanceId`.
+
+## Open a target
+
+`invoke_canvas_action` with `open_target { input }` (or the open input `repository`, `pullNumber`, `artifactId`, `url`, `route`, plus `preset`/`width`/`height`/`zoom`). `input` accepts:
+
+- GitHub PR/issue URLs or `owner/repo#123`; issues display details only, artifacts are PR-specific
+- real artifact permalinks (`https://github.com///actions/runs//artifacts/`), an artifact ID with a repository, or a shared explorer link/route such as `#/docs`, `#/artifact/owner%2Frepo/0/456?file=index.html`, `#/browser?v=...`
+- `http(s)://` and `localhost` URLs (browser preview)
+- bounded natural language: `open PR 123 in owner/repo`, `show localhost:3000 on mobile`, `go back`, `zoom 150%`, `tablet`, `1280x720`, `screenshot`
+
+Use `share { input, preset?, zoom?, width?, height? }` to produce a link, route, and text to give the user. Artifact shares keep repository/artifact/file identity (not preview ports); the recipient pastes it into the canvas or into `open_target`.
+
+## Artifacts
+
+`inspect_artifact { repository, artifactId }` starts a background job. Downloads continue past soft limits; when one is reached the user is prompted for a larger value (`set_limit { kind, value }`; the value must be at least the live progress). Check `job_status`; use `retry_job` after an `interrupted` or `failed` job (a completed ZIP is reused) and `cancel_job` only when asked. Never execute artifact programs or build scripts: artifacts are only inspected or previewed as static sites and files.
+
+Re-running the workflow that produced an artifact is a UI-only, user-confirmed action (the Re-run button on an artifact row). Never attempt it yourself or call its API; if the user wants a fresh artifact, tell them to use that button. It reuses the original commit, ref and actor, is limited to 30 days and 50 re-runs, and only requests a run, not a ready artifact.
+
+## Browser preview
+
+- `navigate_browser { url, preset?, zoom? }` opens an http(s) URL, including localhost.
+- `set_viewport { preset: native | mobile | tablet | desktop | custom, width?, height?, orientation? }` sets the emulated page size.
+- `set_zoom { zoom, fit? }` scales the view without changing the viewport.
+- `screenshot { mode?: "fresh" | "controlled", url?, preset?, width?, height?, fullPage? }` takes a real Chromium PNG saved under the session `files/artifact-explorer-screenshots` folder. `fresh` (default) renders the URL anew and is labeled `fresh-render`; `controlled` captures the live isolated Chromium page (`controlled-current`).
+- `controlled_navigate { url, preset?, ... }`, `controlled_back`, `controlled_forward`, `controlled_refresh`, `controlled_close` drive an isolated Chromium (in-memory profile, no login state) with real history; use it for sites that block iframes. Navigation failures are returned as errors, never as blank pages. If Playwright or Chromium is missing, relay the returned setup instructions to the user (including a `playwright_config_unsupported` error for the retired `PR_ARTIFACT_EXPLORER_PLAYWRIGHT` variable); never install silently.
+- Pages that forbid framing (X-Frame-Options / CSP) are reported and not bypassed.
+
+## Previewing files
+
+- A contextual **Browser view** action appears in the preview toolbar only for static-site HTML artifacts; it is not a global nav item. Open URLs directly with `open_target` / `navigate_browser` or a `#/browser?v=...` route.
+- `.webm`, `.mp4` and `.mov` use native `
- one<\/li><\/ol>/);
+ assert.match(html, /
A<\/th>/); + assert.match(html, /x<1/); +}); + +test("markdown never emits raw HTML or unsafe links", () => { + const html = toHtml('\n\n[x](javascript:alert(1))  [ok](https://example.com)'); + assert.ok(!html.includes(" + `, + namespaced: `\uFEFF ++ ++ text only]]> suite out suite err ', + ]); + assert.deepEqual(outcomes[0], ["Skipped", true]); + assert.deepEqual(outcomes[1], ["Passed", false]); + assert.deepEqual(outcomes[2], ["No tests", true]); +}); diff --git a/extensions/pr-artifact-explorer/mode-race.test.mjs b/extensions/pr-artifact-explorer/mode-race.test.mjs new file mode 100644 index 0000000000..13baea0396 --- /dev/null +++ b/extensions/pr-artifact-explorer/mode-race.test.mjs @@ -0,0 +1,140 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32 } from "node:zlib"; + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-mode-race-")); +process.env.COPILOT_HOME = sharedHome; + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(files) { + const locals = []; + const centrals = []; + let offset = 0; + for (const [name, raw] of Object.entries(files)) { + const nameBuf = Buffer.from(name); + const crc = crc32(raw); + const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]); + centrals.push(Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(offset), nameBuf])); + locals.push(local); + offset += local.length; + } + const central = Buffer.concat(centrals); + return Buffer.concat([...locals, central, u32(0x06054b50), u16(0), u16(0), u16(centrals.length), u16(centrals.length), u32(central.length), u32(offset), u16(0)]); +} + +const HTML = " race hello
"; +const TEXT = "plain text"; + +test("late async responses cannot overwrite the selected mode or file", async (t) => { + const { loadPlaywright } = await import("./capture.mjs"); + let chromium; + try { + chromium = await loadPlaywright(); + } catch (error) { + return t.skip(error.message.split("\n")[0]); + } + let browser; + for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) { + try { + browser = await chromium.launch({ headless: true, ...options }); + break; + } catch { + // try the next channel + } + } + if (!browser) return t.skip("Chromium is not available"); + + const { startInstance, stopInstance } = await import("./server.mjs"); + const instanceId = `mode-race-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await browser.close(); + await stopInstance(instanceId); + await rm(sharedHome, { recursive: true, force: true }); + }); + const cache = join(sharedHome, "extensions", "pr-artifact-explorer", "artifacts", "cache"); + await mkdir(cache, { recursive: true }); + const files = { "index.html": Buffer.from(HTML), "notes.txt": Buffer.from(TEXT) }; + await writeFile(join(cache, "3003.zip"), zipOf(files)); + const entry = (name, kind, mime, raw) => ({ path: name, name, size: raw.length, compressedSize: raw.length, kind, mime, supported: true }); + await writeFile(join(cache, "3003.json"), JSON.stringify({ + repository: "o/r", + artifact: { id: 3003, name: "a" }, + downloadedAt: new Date().toISOString(), + lastAccessedAt: new Date().toISOString(), + compressedBytes: 0, + analysis: { + primary: { kind: "html", path: "index.html", label: "HTML" }, + entries: [entry("index.html", "html", "text/html", files["index.html"]), entry("notes.txt", "text", "text/plain", files["notes.txt"])], + counts: { html: 1, text: 1 }, + fileCount: 2, + totalUncompressedBytes: HTML.length + TEXT.length, + zipBacked: true, + }, + })); + + const page = await browser.newPage(); + const errors = []; + page.on("pageerror", (error) => errors.push(error.message)); + const gates = { preview: null, raw: null }; + const hold = (key) => { + let release; + gates[key] = new Promise((resolve) => (release = resolve)); + return release; + }; + await page.route("**/api/artifacts/3003/preview-url*", async (route) => { + if (gates.preview) await gates.preview; + await route.continue(); + }); + await page.route("**/api/artifacts/3003/raw*", async (route) => { + if (gates.raw) await gates.raw; + await route.continue(); + }); + const base = server.url ?? `${server.origin}/`; + const settle = () => page.waitForTimeout(1000); + + // Preview -> Raw while the preview-url request is pending. + const releasePreview = hold("preview"); + await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=index.html`); + await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 }); + await page.click('[data-preview-mode="raw"]'); + await page.waitForSelector(".raw-view", { timeout: 40_000 }); + releasePreview(); + gates.preview = null; + await settle(); + assert.equal(await page.locator("iframe.preview-frame").count(), 0, "late preview must not execute HTML"); + assert.equal(await page.locator(".raw-view").count(), 1); + assert.equal(await page.getAttribute('[data-preview-mode="raw"]', "aria-pressed"), "true"); + assert.equal(await page.locator("#preview-open-browser").isVisible(), false); + + // Raw -> Preview while the raw request is pending. + await page.click('[data-preview-mode="preview"]'); + await page.waitForSelector("iframe.preview-frame", { timeout: 40_000 }); + const releaseRaw = hold("raw"); + await page.click('[data-preview-mode="raw"]'); + await page.click('[data-preview-mode="preview"]'); + await page.waitForSelector("iframe.preview-frame", { timeout: 40_000 }); + releaseRaw(); + gates.raw = null; + await settle(); + assert.equal(await page.locator(".raw-view").count(), 0, "late raw must not overwrite Preview"); + assert.equal(await page.locator("iframe.preview-frame").count(), 1); + + // File switch while the HTML preview-url request is pending. + const releaseSwitch = hold("preview"); + await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=notes.txt`); + await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=index.html`); + await page.goto(`${base}#/artifact/o%2Fr/1/3003?file=notes.txt`); + await page.waitForSelector(".text-preview", { timeout: 40_000 }); + releaseSwitch(); + gates.preview = null; + await settle(); + assert.equal(await page.locator("iframe.preview-frame").count(), 0, "late HTML must not replace the selected text file"); + assert.equal(await page.locator(".text-preview").textContent(), TEXT); + assert.deepEqual(errors, []); +}); diff --git a/extensions/pr-artifact-explorer/nav-history.test.mjs b/extensions/pr-artifact-explorer/nav-history.test.mjs new file mode 100644 index 0000000000..553651b423 --- /dev/null +++ b/extensions/pr-artifact-explorer/nav-history.test.mjs @@ -0,0 +1,211 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32 } from "node:zlib"; + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-nav-history-")); +process.env.COPILOT_HOME = sharedHome; + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(files) { + const locals = []; + const centrals = []; + let offset = 0; + for (const [name, raw] of Object.entries(files)) { + const nameBuf = Buffer.from(name); + const crc = crc32(raw); + const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]); + centrals.push(Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(offset), nameBuf])); + locals.push(local); + offset += local.length; + } + const central = Buffer.concat(centrals); + return Buffer.concat([...locals, central, u32(0x06054b50), u16(0), u16(0), u16(centrals.length), u16(centrals.length), u32(central.length), u32(offset), u16(0)]); +} + +test("breadcrumb Back/Forward keeps independent in-canvas route history", async (t) => { + const { loadPlaywright } = await import("./capture.mjs"); + let chromium; + try { + chromium = await loadPlaywright(); + } catch (error) { + return t.skip(error.message.split("\n")[0]); + } + let browser; + for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) { + try { + browser = await chromium.launch({ headless: true, ...options }); + break; + } catch { + // try the next channel + } + } + if (!browser) return t.skip("Chromium is not available"); + + const { startInstance, stopInstance } = await import("./server.mjs"); + const instanceId = `nav-history-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await browser.close(); + await stopInstance(instanceId); + await rm(sharedHome, { recursive: true, force: true }); + }); + const cache = join(sharedHome, "extensions", "pr-artifact-explorer", "artifacts", "cache"); + await mkdir(cache, { recursive: true }); + const files = { "a.txt": Buffer.from("alpha"), "b.txt": Buffer.from("bravo") }; + await writeFile(join(cache, "4004.zip"), zipOf(files)); + const entry = (name, raw) => ({ path: name, name, size: raw.length, compressedSize: raw.length, kind: "text", mime: "text/plain", supported: true }); + await writeFile(join(cache, "4004.json"), JSON.stringify({ + repository: "o/r", + artifact: { id: 4004, name: "a" }, + downloadedAt: new Date().toISOString(), + lastAccessedAt: new Date().toISOString(), + compressedBytes: 0, + analysis: { + primary: { kind: "text", path: "a.txt", label: "Text" }, + entries: [entry("a.txt", files["a.txt"]), entry("b.txt", files["b.txt"])], + counts: { text: 2 }, + fileCount: 2, + totalUncompressedBytes: 10, + zipBacked: true, + }, + })); + + const page = await browser.newPage({ viewport: { width: 1200, height: 800 } }); + const errors = []; + page.on("pageerror", (error) => errors.push(error.message)); + const base = server.url ?? `${server.origin}/`; + const state = () => + page.evaluate(() => ({ + back: document.querySelector("#route-back").disabled, + forward: document.querySelector("#route-forward").disabled, + hash: location.hash, + stack: JSON.parse(sessionStorage.getItem("pae.routeHistory") ?? "{}").stack ?? [], + })); + + await page.goto(`${base}#/artifact/o%2Fr/1/4004?file=a.txt`); + await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 }); + let s = await state(); + assert.equal(s.back, true, "Back starts disabled"); + assert.equal(s.forward, true, "Forward starts disabled"); + + // Controls are right-aligned and do not overlap the breadcrumb trail. + for (const width of [320, 420, 882, 1600]) { + await page.setViewportSize({ width, height: 800 }); + const geo = await page.evaluate(() => { + const trail = document.querySelector("#breadcrumb-trail").getBoundingClientRect(); + const nav = document.querySelector(".route-history").getBoundingClientRect(); + return { trailRight: trail.right, navLeft: nav.left, navRight: nav.right, width: innerWidth, overflow: document.documentElement.scrollWidth > innerWidth }; + }); + assert.ok(geo.navLeft >= geo.trailRight - 0.5, `no overlap at ${width}`); + assert.ok(geo.navRight <= geo.width, `controls on screen at ${width}`); + assert.equal(geo.overflow, false, `no horizontal overflow at ${width}`); + } + await page.setViewportSize({ width: 1200, height: 800 }); + s = await state(); + assert.equal(s.stack.length, 1, "resize does not add entries"); + + // File selection and Raw each create a history entry. + await page.click('[data-artifact-file="b.txt"]'); + await page.waitForFunction(() => location.hash.includes("file=b.txt")); + await page.click('[data-preview-mode="raw"]'); + await page.waitForSelector(".raw-view", { timeout: 40_000 }); + s = await state(); + assert.equal(s.stack.length, 3); + assert.equal(s.back, false); + + // Back restores Raw -> Preview of b.txt, then a.txt, without appending. + await page.click("#route-back"); + await page.waitForSelector(".raw-view", { state: "detached", timeout: 40_000 }); + s = await state(); + assert.equal(s.stack.length, 3, "traversal does not append"); + assert.match(s.hash, /file=b\.txt/); + assert.doesNotMatch(s.hash, /view=raw/); + assert.equal(s.forward, false); + await page.click("#route-back"); + await page.waitForFunction(() => location.hash.includes("file=a.txt")); + s = await state(); + assert.equal(s.back, true); + + // Reload keeps the stack (session scoped) and does not duplicate. + await page.reload(); + await page.waitForSelector('[data-preview-mode="raw"]', { timeout: 40_000 }); + s = await state(); + assert.equal(s.stack.length, 3); + assert.equal(s.forward, false); + + // A new destination after Back clears the forward branch. + await page.click('[data-artifact-file="b.txt"]'); + await page.waitForFunction(() => location.hash.includes("file=b.txt")); + s = await state(); + assert.equal(s.forward, true, "forward branch cleared"); + assert.equal(s.stack.length, 2); + + // Invalid routes are not recorded. + for (const bad of ["#nonsense", "#/nonsense", "#/pull/not-a-repo/3", "#/artifact/o%2Fr/x/1", "#/pulls/%E0%A4%A"]) { + await page.evaluate((hash) => (location.hash = hash), bad); + await page.waitForTimeout(200); + } + s = await state(); + assert.deepEqual(s.stack.filter((h) => /nonsense|not-a-repo|%2Fr\/x|%E0/.test(h)), []); + + // Docs, cache and accounts are meaningful steps. + const before = s.stack.length; + for (const hash of ["#/docs", "#/cache", "#/accounts"]) { + await page.evaluate((h) => (location.hash = h), hash); + await page.waitForFunction((h) => location.hash === h, hash); + } + s = await state(); + assert.equal(s.stack.length, before + 3); + assert.deepEqual(s.stack.slice(-3), ["#/docs", "#/cache", "#/accounts"]); + + // The browser view is one step; its URL/zoom noise replaces the entry. + const artifactRoute = "#/artifact/o%2Fr/1/4004?file=a.txt"; + await page.evaluate((h) => (location.hash = h), artifactRoute); + await page.waitForFunction((h) => location.hash === h, artifactRoute); + await page.evaluate(() => (location.hash = "#/browser")); + await page.waitForFunction(() => location.hash.startsWith("#/browser")); + await page.evaluate(() => history.replaceState(null, "", "#/browser?v=e30")); + await page.evaluate(() => window.dispatchEvent(new HashChangeEvent("hashchange"))); + s = await state(); + const browserEntries = s.stack.filter((h) => h.startsWith("#/browser")); + assert.equal(browserEntries.length, 1, "browser entry recorded once"); + const top = s.stack.length; + // Canvas history controls stay in a compact row in browser view, distinct from site history. + assert.equal(await page.locator("#route-back").isVisible(), true); + assert.equal(await page.locator("#route-back").getAttribute("aria-label"), "Back in Artifact Explorer"); + assert.equal(await page.locator("#br-back").getAttribute("aria-label"), "Back in site (Alt+Left)"); + await page.click("#route-back"); + await page.waitForFunction((h) => location.hash === h, artifactRoute); + s = await state(); + assert.equal(s.stack.length, top, "Back from browser does not append"); + assert.equal(await page.locator("#route-forward").isDisabled(), false, "Forward available to browser"); + await page.click("#route-forward"); + await page.waitForFunction(() => location.hash.startsWith("#/browser")); + await page.waitForSelector("#br-back"); + assert.equal(await page.locator("#route-back").isVisible(), true); + s = await state(); + assert.equal(s.stack.length, top); + assert.deepEqual(errors, []); + + // A fresh landing on #/docs is recorded, so Back returns to it. + const fresh = await browser.newPage({ viewport: { width: 1200, height: 800 } }); + await fresh.goto(`${base}#/docs`); + await fresh.evaluate(() => (location.hash = "#/cache")); + await fresh.waitForFunction(() => location.hash === "#/cache"); + await fresh.evaluate(() => (location.hash = "#/accounts")); + await fresh.waitForFunction(() => location.hash === "#/accounts"); + const stack = await fresh.evaluate( + () => JSON.parse(sessionStorage.getItem("pae.routeHistory") ?? "{}").stack, + ); + assert.deepEqual(stack, ["#/docs", "#/cache", "#/accounts"]); + await fresh.click("#route-back"); + await fresh.click("#route-back"); + await fresh.waitForFunction(() => location.hash === "#/docs"); + assert.equal(await fresh.locator("#route-back").isDisabled(), true); + await fresh.close(); +}); diff --git a/extensions/pr-artifact-explorer/owned-theme.test.mjs b/extensions/pr-artifact-explorer/owned-theme.test.mjs new file mode 100644 index 0000000000..29b835f900 --- /dev/null +++ b/extensions/pr-artifact-explorer/owned-theme.test.mjs @@ -0,0 +1,84 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32 } from "node:zlib"; + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-owned-theme-")); +process.env.COPILOT_HOME = sharedHome; + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(name, raw) { + const nameBuf = Buffer.from(name); + const crc = crc32(raw); + const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]); + const central = Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf]); + return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0)]); +} + +test("closeBrowserBounded returns within its bound for a stuck browser and never throws", async () => { + const { closeBrowserBounded } = await import("./capture.mjs"); const started = Date.now(); + assert.equal(await closeBrowserBounded({ close: () => new Promise(() => {}) }, 150), false); + assert.ok(Date.now() - started < 2000); + assert.equal(await closeBrowserBounded({ close: async () => { throw new Error("boom"); } }, 150), true); + assert.equal(await closeBrowserBounded({ close: async () => {} }, 150), true); + assert.equal(await closeBrowserBounded(null, 150), true); +}); + +test("owned artifact pages follow the CURRENT theme in controlled browsing and capture", async (t) => { + const home = sharedHome; + const { startInstance, stopInstance } = await import("./server.mjs"); + const { startStaticPreview } = await import("./preview.mjs"); + const instanceId = `owned-theme-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await stopInstance(instanceId); + await rm(home, { recursive: true, force: true }); + }); + const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache"); + await mkdir(cache, { recursive: true }); + const html = Buffer.from( + "pending ", + ); + await writeFile(join(cache, "3001.zip"), zipOf("index.html", html)); + await writeFile(join(cache, "3001.json"), JSON.stringify({ repository: "o/r", artifact: { id: 3001, name: "a" }, entries: [{ name: "index.html", kind: "html" }] })); + + const call = async (path, body) => { + const res = await fetch(`${server.origin}${path}`, { + method: "POST", + headers: { "content-type": "application/json", "x-pr-artifact-explorer-token": server.token }, + body: JSON.stringify(body), + }); + return { status: res.status, body: await res.json().catch(() => ({})) }; + }; + + const bakedLight = new URL(await startStaticPreview(3001, "index.html", { theme: "light", parentOrigin: server.origin })); + const target = `${bakedLight.origin}/index.html?x=1#h`; + try { + const nav = await call("/api/controlled/navigate", { url: target, theme: "dark", preset: "desktop" }); + if (nav.status === 424 && /playwright|chromium/i.test(JSON.stringify(nav.body))) return t.skip("Chromium runtime unavailable"); + assert.equal(nav.status, 200, JSON.stringify(nav.body)); + assert.equal(nav.body.controlled.title, "dark|true"); + assert.notEqual(new URL(nav.body.controlled.url).origin, bakedLight.origin); + assert.match(nav.body.controlled.url, /\/index\.html\?x=1#h$/); + + const toLight = await call("/api/controlled/theme", { theme: "light" }); + assert.equal(toLight.status, 200, JSON.stringify(toLight.body)); + assert.equal(toLight.body.controlled.title, "light|false"); + assert.match(toLight.body.controlled.url, /\?x=1#h$/); + + const shot = await call("/api/capture", { url: target, theme: "dark", preset: "desktop" }); + assert.equal(shot.status, 200, JSON.stringify(shot.body)); + assert.match(shot.body.capture.finalUrl, /\/index\.html\?x=1/); + assert.notEqual(new URL(shot.body.capture.finalUrl).origin, bakedLight.origin); + assert.equal(shot.body.capture.colorScheme, "dark"); + } finally { + const started = Date.now(); + const closed = await call("/api/controlled/close", {}); + assert.equal(closed.status, 200); + assert.ok(Date.now() - started < 15_000); + } +}); diff --git a/extensions/pr-artifact-explorer/package-lock.json b/extensions/pr-artifact-explorer/package-lock.json new file mode 100644 index 0000000000..7dc58f1151 --- /dev/null +++ b/extensions/pr-artifact-explorer/package-lock.json @@ -0,0 +1,28 @@ +{ + "name": "pr-artifact-explorer", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "pr-artifact-explorer", + "version": "1.0.0", + "optionalDependencies": { + "playwright-core": "^1.60.0" + } + }, + "node_modules/playwright-core": { + "version": "1.63.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz", + "integrity": "sha1-5XZlvDKEbCE6w5oeTVvGIo52s3Y=", + "license": "Apache-2.0", + "optional": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=20" + } + } + } +} diff --git a/extensions/pr-artifact-explorer/package.json b/extensions/pr-artifact-explorer/package.json new file mode 100644 index 0000000000..3719091cb0 --- /dev/null +++ b/extensions/pr-artifact-explorer/package.json @@ -0,0 +1,18 @@ +{ + "name": "pr-artifact-explorer", + "version": "1.0.0", + "type": "module", + "main": "extension.mjs", + "optionalDependencies": { + "playwright-core": "^1.60.0" + }, + "description": "Navigate pull requests and securely explore GitHub Actions artifacts, including test results, static sites, terminal recordings, and source files.", + "keywords": [ + "actions-artifacts", + "artifact-browser", + "canvas", + "github-actions", + "pull-requests", + "test-results" + ] +} diff --git a/extensions/pr-artifact-explorer/preview.mjs b/extensions/pr-artifact-explorer/preview.mjs index d6f2194fff..a90463df00 100644 --- a/extensions/pr-artifact-explorer/preview.mjs +++ b/extensions/pr-artifact-explorer/preview.mjs @@ -1,10 +1,9 @@ import { createServer } from "node:http"; import { posix } from "node:path"; import { Transform } from "node:stream"; -import { getCachedEntry } from "./cache.mjs"; +import { getCachedEntry, streamCachedEntry } from "./cache.mjs"; import { mimeForPath } from "./detector.mjs"; import { isCanonicalHost } from "./security.mjs"; -import { streamZipEntry } from "./zip.mjs"; const previewServers = new Map(); const HTML_INJECTION_SEARCH_BYTES = 64 * 1024; @@ -188,9 +187,8 @@ async function servePreviewRequest( res.end(themeBridge); return; } - await streamZipEntry( - context.archivePath, - context.entry, + await streamCachedEntry( + context, res, themeBridge ? createHtmlInjectionTransform(themeBridge) : null, ); @@ -260,10 +258,32 @@ export async function startStaticPreview(artifactId, entryPath, options) { } serverEntry.host = `127.0.0.1:${address.port}`; const url = `http://127.0.0.1:${address.port}/`; - previewServers.set(key, { artifactId: String(artifactId), server, url, canvasOrigin: parentOrigin }); + previewServers.set(key, { + artifactId: String(artifactId), + entryPath: context.entry.name, + server, + url, + canvasOrigin: parentOrigin, + theme, + }); return url; } +/** Maps an origin back to the owned static preview serving it, or null for any foreign origin. */ +export function describeOwnedPreview(origin) { + for (const value of previewServers.values()) { + if (new URL(value.url).origin === origin) { + return { + artifactId: value.artifactId, + entryPath: value.entryPath, + theme: value.theme, + canvasOrigin: value.canvasOrigin, + }; + } + } + return null; +} + export async function stopStaticPreviewsForArtifact(artifactId) { const id = String(artifactId); const matching = [...previewServers.entries()].filter( diff --git a/extensions/pr-artifact-explorer/pull-loading.test.mjs b/extensions/pr-artifact-explorer/pull-loading.test.mjs new file mode 100644 index 0000000000..14060c906c --- /dev/null +++ b/extensions/pr-artifact-explorer/pull-loading.test.mjs @@ -0,0 +1,150 @@ +import assert from "node:assert/strict"; +import { mkdtemp, rm } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-pull-loading-")); +process.env.COPILOT_HOME = sharedHome; + +const pullPayload = (title) => ({ + pullRequest: { + number: 1803, + title, + url: "https://github.com/o/r/pull/1803", + state: "open", + author: "octo", + baseRef: "main", + updatedAt: new Date().toISOString(), + }, + artifacts: [], + runs: [], + artifactCount: 0, + runCount: 0, +}); + +test("PR detail loading covers header, summary, badge and table", async (t) => { + const { loadPlaywright } = await import("./capture.mjs"); + let chromium; + try { + chromium = await loadPlaywright(); + } catch (error) { + return t.skip(error.message.split("\n")[0]); + } + let browser; + for (const options of [{}, { channel: "chrome" }, { channel: "msedge" }]) { + try { + browser = await chromium.launch({ headless: true, ...options }); + break; + } catch { + // try the next channel + } + } + if (!browser) return t.skip("Chromium is not available"); + + const { startInstance, stopInstance } = await import("./server.mjs"); + const instanceId = `pull-loading-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await browser.close(); + await stopInstance(instanceId); + await rm(sharedHome, { recursive: true, force: true }); + }); + + const page = await browser.newPage({ viewport: { width: 1200, height: 800 } }); + const errors = []; + page.on("pageerror", (error) => errors.push(error.message)); + + let mode = "ok"; + let title = "First title"; + let release; + let gate = Promise.resolve(); + await page.route("**/api/pulls/1803?*", async (route) => { + await gate; + if (mode === "fail") { + return route.fulfill({ + status: 502, + contentType: "application/json", + body: JSON.stringify({ error: "Upstream exploded" }), + }); + } + return route.fulfill({ + status: 200, + contentType: "application/json", + body: JSON.stringify(pullPayload(title)), + }); + }); + const closeGate = () => { + gate = new Promise((resolve) => { + release = resolve; + }); + }; + const snapshot = () => + page.evaluate(() => ({ + busy: document.querySelector("#view")?.getAttribute("aria-busy") ?? null, + skeletons: [...document.querySelectorAll("[data-skeleton]")].map((el) => el.dataset.skeleton), + title: document.querySelector("h1.page-title")?.textContent ?? null, + badge: document.querySelector(".pr-summary .state-badge")?.textContent?.trim() ?? null, + table: Boolean(document.querySelector("#view .artifact-list-box:not([data-skeleton])")), + flashError: document.querySelector("#view .flash-error")?.textContent ?? null, + })); + + const base = server.url ?? `${server.origin}/`; + await page.goto(`${base}#/pull/o%2Fr/1803`); + await page.waitForSelector("h1.page-title"); + let s = await snapshot(); + assert.match(s.title, /First title/); + assert.equal(s.busy, null); + + // Forced refresh: nothing from the old header is shown while loading. + closeGate(); + title = "Second title"; + await page.click("[data-refresh-view]"); + await page.waitForSelector("[data-pull-loading]"); + s = await snapshot(); + assert.deepEqual(new Set(s.skeletons), new Set(["title", "action", "badge", "summary", "table"])); + assert.equal(s.busy, "true"); + assert.equal(s.title, null, "no stale heading while loading"); + assert.equal(s.badge, null, "no stale badge while loading"); + assert.equal(s.table, false); + release(); + await page.waitForFunction(() => document.querySelector("h1.page-title")?.textContent.includes("Second title")); + s = await snapshot(); + assert.equal(s.skeletons.length, 0); + assert.equal(s.busy, null); + assert.equal(s.badge, "Open"); + assert.equal(s.table, true); + + // Failure: explicit error with Retry, no stuck skeleton. + closeGate(); + mode = "fail"; + await page.click("[data-refresh-view]"); + await page.waitForSelector("[data-pull-loading]"); + release(); + await page.waitForSelector("#view .flash-error"); + s = await snapshot(); + assert.equal(s.skeletons.length, 0); + assert.equal(s.busy, null); + assert.match(s.flashError, /Upstream exploded|Unable/); + mode = "ok"; + title = "Recovered title"; + await page.click("#view [data-refresh-view]"); + await page.waitForFunction(() => document.querySelector("h1.page-title")?.textContent.includes("Recovered title")); + + // A late response must not overwrite a different route. + closeGate(); + title = "Late title"; + await page.click("[data-refresh-view]"); + await page.waitForSelector("[data-pull-loading]"); + await page.evaluate(() => { + location.hash = "#/docs"; + }); + await page.waitForFunction(() => !document.querySelector("[data-pull-loading]")); + release(); + await page.waitForTimeout(300); + s = await snapshot(); + assert.equal(s.title?.includes("Late title") ?? false, false); + assert.equal(s.skeletons.length, 0); + assert.equal(s.busy, null); + assert.deepEqual(errors, []); +}); diff --git a/extensions/pr-artifact-explorer/range-integrity.test.mjs b/extensions/pr-artifact-explorer/range-integrity.test.mjs new file mode 100644 index 0000000000..e382a1bf78 --- /dev/null +++ b/extensions/pr-artifact-explorer/range-integrity.test.mjs @@ -0,0 +1,85 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32, deflateRawSync } from "node:zlib"; + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(name, raw, { deflate, crc = crc32(raw), size = raw.length, flipDataByte = false }) { + const data = Buffer.from(deflate ? deflateRawSync(raw) : raw); + if (flipDataByte) data[Math.floor(data.length / 2)] ^= 0xff; + const nameBuf = Buffer.from(name); + const method = deflate ? 8 : 0; + const local = Buffer.concat([ + u32(0x04034b50), u16(20), u16(0), u16(method), u16(0), u16(0x21), + u32(crc), u32(data.length), u32(size), u16(nameBuf.length), u16(0), nameBuf, data, + ]); + const central = Buffer.concat([ + u32(0x02014b50), u16(20), u16(20), u16(0), u16(method), u16(0), u16(0x21), + u32(crc), u32(data.length), u32(size), + u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf, + ]); + return Buffer.concat([ + local, central, + u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0), + ]); +} + +test("ranged video reads verify the whole entry first and reject corrupt CRC/size", async (t) => { + const home = await mkdtemp(join(tmpdir(), "pae-range-integrity-")); + process.env.COPILOT_HOME = home; + const { startInstance, stopInstance } = await import("./server.mjs"); + const instanceId = `range-integrity-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await stopInstance(instanceId); + await rm(home, { recursive: true, force: true }); + }); + + const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache"); + await mkdir(cache, { recursive: true }); + const content = Buffer.from(Array.from({ length: 6000 }, (_, i) => (i * 13) % 251)); + const cases = [ + ["1001", "good-stored", { deflate: false }, true], + ["1002", "good-deflated", { deflate: true }, true], + ["1003", "bad-crc-stored", { deflate: false, crc: crc32(content) ^ 1 }, false], + ["1004", "bad-crc-deflated", { deflate: true, crc: crc32(content) ^ 1 }, false], + ["1005", "bad-data-stored", { deflate: false, flipDataByte: true }, false], + ["1006", "bad-size-deflated", { deflate: true, size: 5000 }, false], + ["1007", "bad-size-larger-deflated", { deflate: true, size: 7000 }, false], + ]; + for (const [id, , options] of cases) { + await writeFile(join(cache, `${id}.zip`), zipOf("v/video.webm", content, options)); + await writeFile( + join(cache, `${id}.json`), + JSON.stringify({ + repository: "o/r", + artifact: { id: Number(id), name: "a" }, + entries: [{ name: "v/video.webm", kind: "video" }], + }), + ); + } + + for (const [id, label, options, good] of cases) { + const url = `${server.origin}/content/${id}/v/video.webm?token=${server.token}`; + const size = options.size ?? content.length; + const partial = await fetch(url, { headers: { Range: "bytes=100-199" } }); + if (good) { + assert.equal(partial.status, 206, label); + assert.deepEqual(Buffer.from(await partial.arrayBuffer()), content.subarray(100, 200), label); + // Seeking backwards and to the tail reuses the verified entry. + const back = await fetch(url, { headers: { Range: "bytes=0-9" } }); + assert.deepEqual(Buffer.from(await back.arrayBuffer()), content.subarray(0, 10), label); + const tail = await fetch(url, { headers: { Range: "bytes=-50" } }); + assert.deepEqual(Buffer.from(await tail.arrayBuffer()), content.subarray(5950), label); + } else { + assert.notEqual(partial.status, 206, `${label} (size ${size}) must not serve a partial range`); + assert.ok(partial.status >= 400, label); + const body = Buffer.from(await partial.arrayBuffer()); + assert.equal(body.includes(content.subarray(100, 140)), false, `${label} leaked bytes`); + } + } +}); diff --git a/extensions/pr-artifact-explorer/raw-open.test.mjs b/extensions/pr-artifact-explorer/raw-open.test.mjs new file mode 100644 index 0000000000..703b550204 --- /dev/null +++ b/extensions/pr-artifact-explorer/raw-open.test.mjs @@ -0,0 +1,215 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32, deflateRawSync } from "node:zlib"; +import { ExternalOpenError, launchWithAck, launcherCommand, setExternalOpener, validateExternalUrl } from "./external-open.mjs"; +import { EventEmitter } from "node:events"; + +function fakeSpawn(behavior) { + return (command, args, options) => { + const child = new EventEmitter(); + child.unref = () => { child.unrefd = true; }; + child.spawned = { command, args, options }; + setImmediate(() => behavior(child)); + return child; + }; +} + +test("launcher acknowledgement reports nonzero exit, errors, zero exit and long-lived launchers truthfully", async () => { + const run = (behavior, ackMs = 200) => launchWithAck("http://a/", { spawnFn: fakeSpawn(behavior), ackMs, command: { command: "x", args: ["http://a/"] } }); + await assert.rejects(run((c) => c.emit("exit", 1, null)), /code 1/); + await assert.rejects(run((c) => c.emit("exit", null, "SIGKILL")), /SIGKILL/); + await assert.rejects(run((c) => c.emit("error", new Error("ENOENT"))), /ENOENT/); + await run((c) => c.emit("exit", 0, null)); + let alive; + await run((c) => { alive = c; }); + assert.equal(alive.unrefd, true); + assert.equal(alive.listenerCount("exit"), 0); + assert.deepEqual( + Object.keys(await new Promise((r) => { const s = fakeSpawn((c) => c.emit("exit", 0)); const c = s("x", [], { shell: false, windowsHide: true, detached: true, stdio: "ignore" }); r(c.spawned.options); })).sort(), + ["detached", "shell", "stdio", "windowsHide"], + ); + await assert.rejects( + (async () => { setExternalOpener((u) => launchWithAck(u, { spawnFn: fakeSpawn((c) => c.emit("exit", 3)), ackMs: 100, command: { command: "x", args: [] } })); try { const { openInDefaultBrowser } = await import("./external-open.mjs"); await openInDefaultBrowser("http://127.0.0.1/"); } finally { setExternalOpener(null); } })(), + (error) => error.code === "launch_failed", + ); +}); + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(name, raw, { deflate = false, flags = 0, method, declaredSize, declaredCrc } = {}) { + const data = Buffer.from(deflate ? deflateRawSync(raw) : raw); + const nameBuf = Buffer.from(name); + const m = method ?? (deflate ? 8 : 0); + const crc = declaredCrc ?? crc32(raw); + const usize = declaredSize ?? raw.length; + const local = Buffer.concat([ + u32(0x04034b50), u16(20), u16(flags), u16(m), u16(0), u16(0x21), + u32(crc), u32(data.length), u32(usize), u16(nameBuf.length), u16(0), nameBuf, data, + ]); + const central = Buffer.concat([ + u32(0x02014b50), u16(20), u16(20), u16(flags), u16(m), u16(0), u16(0x21), + u32(crc), u32(data.length), u32(usize), + u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf, + ]); + return Buffer.concat([ + local, central, + u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0), + ]); +} + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-raw-")); +process.env.COPILOT_HOME = sharedHome; + +test("hexDump formats offset, hex and ASCII without decoding", async () => { + const { hexDump } = await import("./raw.mjs"); + const dump = hexDump(Buffer.from([0x41, 0x00, 0xff, 0x7e]), 16); + assert.match(dump, /^00000010 {2}41 00 ff 7e/); + assert.match(dump, /\|A\.\.~\|$/); +}); + +test("raw view returns exact source, bounded hex, and explains unsupported entries", async (t) => { + const home = sharedHome; + const instanceId = `raw-${Date.now()}`; + const { startInstance, stopInstance } = await import("./server.mjs"); + const server = await startInstance(instanceId, null, () => {}); + t.after(async () => { + await stopInstance(instanceId); + await rm(home, { recursive: true, force: true }); + }); + const cache = join(home, "extensions", "pr-artifact-explorer", "artifacts", "cache"); + await mkdir(cache, { recursive: true }); + + const ugly = Buffer.from('{"b":1,\r\n "a" :[1,2],"é":"ü"}\r\n'); + const bin = Buffer.from(Array.from({ length: 40000 }, (_, i) => (i * 7) % 256)); + const bigText = Buffer.from("line of text\n".repeat(400000)); + const htmlSource = Buffer.from("\r\né
\r\n"); + const castSource = Buffer.from('{"version":2,"width":80,"height":24}\n[0.1,"o","hi"]\n'); + const svgSource = Buffer.from(''); + const fixtures = [ + ["2001", "d/data.json", ugly, {}], + ["2002", "d/empty.txt", Buffer.alloc(0), {}], + ["2003", "d/movie.webm", bin, { deflate: true }], + ["2004", "d/big.log", bigText, { deflate: true }], + ["2005", "d/secret.txt", Buffer.from("x"), { flags: 1 }], + ["2006", "d/odd.txt", Buffer.from("abc"), { method: 14 }], + ["2007", "d/tiny.png", Buffer.from([0x89, 0x50, 0x4e, 0x47]), {}], + ["2008", "d/bad-crc.txt", Buffer.alloc(0), { declaredCrc: 0xdeadbeef }], + ["2009", "d/bad-data.txt", Buffer.from("hidden"), { declaredSize: 0, declaredCrc: 0 }], + ["2010", "d/index.html", htmlSource, {}], + ["2011", "d/demo.cast", castSource, {}], + ["2012", "d/logo.svg", svgSource, {}], + ]; + for (const [id, name, content, options] of fixtures) { + await writeFile(join(cache, `${id}.zip`), zipOf(name, content, options)); + await writeFile( + join(cache, `${id}.json`), + JSON.stringify({ repository: "o/r", artifact: { id: Number(id), name: "a" }, entries: [{ name, kind: "binary" }] }), + ); + } + const raw = async (id, name) => { + const response = await fetch( + `${server.origin}/api/artifacts/${id}/raw?path=${encodeURIComponent(name)}`, + { headers: { "x-pr-artifact-explorer-token": server.token } }, + ); + return { status: response.status, body: await response.json() }; + }; + + const json = await raw(2001, "d/data.json"); + assert.equal(json.status, 200, JSON.stringify(json.body)); + assert.equal(json.body.mode, "text"); + assert.equal(json.body.content, ugly.toString("utf8"), "JSON is not reserialized"); + assert.equal(json.body.truncated, false); + + const empty = await raw(2002, "d/empty.txt"); + assert.equal(empty.body.mode, "empty"); + assert.equal(empty.body.size, 0); + for (const [id, name] of [[2008, "d/bad-crc.txt"], [2009, "d/bad-data.txt"]]) { + const bad = await raw(id, name); + assert.ok(bad.status >= 400, `${name} must not become an empty success: ${JSON.stringify(bad.body)}`); + assert.notEqual(bad.body.mode, "empty"); + } + + for (const [id, name, source] of [ + [2010, "d/index.html", htmlSource], + [2011, "d/demo.cast", castSource], + [2012, "d/logo.svg", svgSource], + ]) { + const result = await raw(id, name); + assert.equal(result.body.mode, "text", name); + assert.equal(result.body.content, source.toString("utf8"), `${name} exact source`); + } + + const movie = await raw(2003, "d/movie.webm"); + assert.equal(movie.body.mode, "hex"); + assert.equal(movie.body.truncated, true); + assert.equal(movie.body.size, bin.length); + assert.equal(movie.body.shown, 16 * 1024); + assert.equal(movie.body.content.split("\n").length, 1024); + + const big = await raw(2004, "d/big.log"); + assert.equal(big.body.mode, "text"); + assert.equal(big.body.truncated, true); + assert.equal(big.body.size, bigText.length); + assert.ok(big.body.shown < bigText.length); + assert.equal(big.body.content, bigText.subarray(0, big.body.shown).toString("utf8")); + + const small = await raw(2007, "d/tiny.png"); + assert.equal(small.body.mode, "hex"); + assert.equal(small.body.truncated, false); + + const encrypted = await raw(2005, "d/secret.txt"); + assert.equal(encrypted.body.mode, "unsupported"); + assert.match(encrypted.body.reason, /encrypted/); + const odd = await raw(2006, "d/odd.txt"); + assert.equal(odd.body.mode, "unsupported"); + assert.match(odd.body.reason, /method 14/); + + const missing = await raw(2001, "d/nope.txt"); + assert.ok(missing.status >= 400); +}); + +test("external open validates URLs and routes through an injectable launcher", async (t) => { + assert.equal(validateExternalUrl("http://127.0.0.1:3000/a?b=1#c"), "http://127.0.0.1:3000/a?b=1#c"); + for (const bad of ["", "file:///etc/passwd", "javascript:alert(1)", "http://u:p@example.com/", "http://exa mple.com/", "http://a.com/\n", "ftp://x.com", "not a url"]) { + assert.throws(() => validateExternalUrl(bad), ExternalOpenError, bad); + } + assert.deepEqual(launcherCommand("http://a/", "win32", { SystemRoot: "C:\\Windows" }), { command: "C:\\Windows\\System32\\rundll32.exe", args: ["url.dll,FileProtocolHandler", "http://a/"] }); + assert.equal(launcherCommand("http://a/", "darwin").command, "/usr/bin/open"); + assert.equal(launcherCommand("http://a/", "linux").command, "xdg-open"); + + const home = await mkdtemp(join(tmpdir(), "pae-open-")); + process.env.COPILOT_HOME = home; + const { startInstance, stopInstance } = await import("./server.mjs"); + const instanceId = `open-${Date.now()}`; + const server = await startInstance(instanceId, null, () => {}); + const opened = []; + setExternalOpener(async (url) => { opened.push(url); }); + t.after(async () => { + setExternalOpener(null); + await stopInstance(instanceId); + await rm(home, { recursive: true, force: true }); + }); + const post = (body) => + fetch(`${server.origin}/api/browser/open-external`, { + method: "POST", + headers: { "content-type": "application/json", "x-pr-artifact-explorer-token": server.token }, + body: JSON.stringify(body), + }); + + const ok = await post({ url: "https://example.com/x?y=1#z", theme: "dark" }); + assert.equal(ok.status, 200); + assert.deepEqual(opened, ["https://example.com/x?y=1#z"]); + + const rejected = await post({ url: "javascript:alert(1)" }); + assert.equal(rejected.status, 400); + assert.equal(opened.length, 1, "invalid URLs never reach the launcher"); + + setExternalOpener(async () => { throw new Error("no handler"); }); + const failed = await post({ url: "https://example.com/" }); + assert.equal(failed.status, 502); + assert.match((await failed.json()).error ?? "", /Could not launch/); +}); diff --git a/extensions/pr-artifact-explorer/raw-wiring.test.mjs b/extensions/pr-artifact-explorer/raw-wiring.test.mjs new file mode 100644 index 0000000000..f7e40c1677 --- /dev/null +++ b/extensions/pr-artifact-explorer/raw-wiring.test.mjs @@ -0,0 +1,89 @@ +import assert from "node:assert/strict"; +import { readFile } from "node:fs/promises"; +import test from "node:test"; +import { normalizeColorScheme } from "./capture.mjs"; + +const asset = (name) => readFile(new URL(`./assets/${name}`, import.meta.url), "utf8"); + +test("color scheme is validated", () => { + assert.equal(normalizeColorScheme("dark"), "dark"); + assert.equal(normalizeColorScheme("light"), "light"); + assert.throws(() => normalizeColorScheme("neon")); +}); + +test("preview toolbar wires a single Preview/Raw toggle before Download", async () => { + const app = await asset("app.js"); + assert.ok(app.indexOf('class="preview-mode"') < app.indexOf('id="preview-download"')); + assert.match(app, /view=raw/); + assert.match(app, /renderRawPreview/); + assert.equal((app.match(/class="preview-mode"/g) ?? []).length, 1); +}); + +test("shared browser route only accepts version 1 safe http(s) URLs", async () => { + const src = await asset("browser.js"); + const grab = (name) => src.slice(src.indexOf(`function ${name}(`)).split(/\n}\n/)[0] + "\n}"; + const { decodeViewClient, encodeViewClient } = new Function( + `${grab("encodeViewClient")}\n${grab("safeHttpUrl")}\n${grab("decodeViewClient")}\nreturn { decodeViewClient, encodeViewClient };`, + )(); + const enc = (body) => Buffer.from(JSON.stringify(body)).toString("base64url"); + for (const url of ["javascript:alert(1)", "data:text/html,x", "http://u:p@example.com/", "https://ex\u0000.com/", "file:///c:/x"]) { + assert.equal(decodeViewClient(enc({ v: 1, url })).url, undefined, url); + } + assert.deepEqual(decodeViewClient(enc({ v: 2, url: "https://example.com/" })), {}); + assert.deepEqual(decodeViewClient("!!!"), {}); + const ok = decodeViewClient(encodeViewClient({ url: "http://localhost:3000/a", preset: "mobile", zoom: 1.5 })); + assert.equal(ok.url, "http://localhost:3000/a"); + assert.equal(ok.preset, "mobile"); +}); + +test("browser view syncs theme on load/change and exposes native open", async () => { + const browser = await asset("browser.js"); + assert.match(browser, /data-theme-aware-preview/); + assert.match(browser, /\/api\/browser\/owned/); + assert.match(browser, /id="br-open-external"/); + assert.match(browser, /\/api\/browser\/open-external/); + assert.match(browser, /observeCanvasTheme\(/); + assert.match(browser, /stopThemeObserver\(\)/); + assert.match(browser, /theme: resolvedCanvasTheme\(\)/); +}); + +test("theme observer covers root+body attributes, color-scheme and media changes without silent failures", async () => { + const app = await asset("app.js"); + assert.match(app, /THEME_ATTRIBUTES/); + assert.match(app, /observe\(document\.body/); + assert.match(app, /previewThemeMedia\.addEventListener\("change"/); + assert.match(app, /color-scheme|colorScheme/); + assert.match(app, /theme === last/); + const themeBlock = app.slice(app.indexOf("function resolvedCanvasTheme"), app.indexOf("function installPreviewThemeSync")); + assert.doesNotMatch(themeBlock, /catch\(\(\)\s*=>\s*\{\s*\}\)/); +}); + +test("raw styles exist", async () => { + const css = await asset("app.css"); + for (const selector of [".preview-mode", ".raw-view", ".raw-note", ".raw-content"]) { + assert.ok(css.includes(selector), selector); + } +}); + +test("in-report XML source button routes into the global Raw mode", async () => { + const app = await readFile(new URL("./assets/app.js", import.meta.url), "utf8"); + assert.match(app, /viewName === "raw" && currentArtifact\?\.selectedPath[\s\S]{0,60}setPreviewMode\("raw"\)/); +}); + +test("capture loads Playwright without non-literal import/require calls", async () => { + const src = await readFile(new URL("./capture.mjs", import.meta.url), "utf8"); + assert.doesNotMatch(src, /\bimport\s*\(\s*[^'"\s)]/); + assert.doesNotMatch(src, /(? { + const css = await asset("app.css"); + const block = css.match(/\.browser-stage \{[^}]*\}/)[0]; + assert.match(block, /background: var\(--bgColor-inset, var\(--background-color-default/); + assert.match(block, /color-scheme: light dark/); +}); \ No newline at end of file diff --git a/extensions/pr-artifact-explorer/raw.mjs b/extensions/pr-artifact-explorer/raw.mjs new file mode 100644 index 0000000000..10c6b91f25 --- /dev/null +++ b/extensions/pr-artifact-explorer/raw.mjs @@ -0,0 +1,125 @@ +import { Writable } from "node:stream"; +import { MAX_INLINE_PREVIEW_BYTES, MAX_TRX_PREVIEW_BYTES } from "./constants.mjs"; +import { getCachedEntry, readCachedEntry, streamCachedEntry, verifyCachedEntry } from "./cache.mjs"; +import { isInlineTextKind, kindForPath } from "./detector.mjs"; + +export const RAW_HEX_PREFIX_BYTES = 16 * 1024; +export const RAW_TEXT_PREFIX_BYTES = 256 * 1024; + +/** Classic offset / hex / ASCII dump. Non-printable bytes render as "."; no decoding, so no mojibake. */ +export function hexDump(bytes, baseOffset = 0) { + const lines = []; + for (let i = 0; i < bytes.length; i += 16) { + const chunk = bytes.subarray(i, i + 16); + const hex = [...chunk].map((b) => b.toString(16).padStart(2, "0")); + while (hex.length < 16) hex.push(" "); + const ascii = [...chunk].map((b) => (b >= 0x20 && b < 0x7f ? String.fromCharCode(b) : ".")).join(""); + lines.push( + `${(baseOffset + i).toString(16).padStart(8, "0")} ${hex.slice(0, 8).join(" ")} ${hex.slice(8).join(" ")} |${ascii}|`, + ); + } + return lines.join("\n"); +} + +function unsupportedReason(entry) { + if (entry.directory) return "This entry is a directory."; + if (entry.symlink) return "This entry is a symbolic link; its target is never followed or read."; + if (entry.encrypted) return "This entry is encrypted, so its original bytes cannot be decoded here."; + return `This entry uses ZIP compression method ${entry.method}, which cannot be safely decoded here.`; +} + +function decodeUtf8(bytes) { + try { + return new TextDecoder("utf-8", { fatal: true, ignoreBOM: true }).decode(bytes); + } catch { + return null; + } +} + +/** Drops an incomplete trailing UTF-8 sequence so a truncated prefix still decodes strictly. */ +function trimIncompleteUtf8(bytes) { + let end = bytes.length; + for (let back = 1; back <= 3 && end - back >= 0; back += 1) { + const b = bytes[end - back]; + if ((b & 0xc0) === 0x80) continue; + const need = b >= 0xf0 ? 4 : b >= 0xe0 ? 3 : b >= 0xc0 ? 2 : 1; + if (need > back) end -= back; + break; + } + return bytes.subarray(0, end); +} + +async function readPrefix(context, length) { + const chunks = []; + const sink = new Writable({ + write(chunk, _enc, cb) { + chunks.push(Buffer.from(chunk)); + cb(); + }, + }); + await verifyCachedEntry(context); + await streamCachedEntry(context, sink, null, { start: 0, end: length - 1 }); + sink.end(); + return Buffer.concat(chunks); +} + +/** + * Builds the Raw view payload for one cached entry. Whole-entry CRC/size verification always + * happens before any bytes are returned; large files return only a bounded, clearly partial prefix. + */ +export async function buildRawView(artifactId, entryPath) { + const context = await getCachedEntry(artifactId, entryPath); + const { entry } = context; + const size = entry.uncompressedSize; + const base = { path: entry.name, size }; + if (!entry.supported) { + return { ...base, mode: "unsupported", supported: false, reason: unsupportedReason(entry) }; + } + if (size === 0) { + await verifyCachedEntry(context); + return { ...base, mode: "empty", supported: true, truncated: false, shown: 0 }; + } + + const kind = kindForPath(entry.name); + if (isRawTextKind(kind, entry.name)) { + const limit = kind === "trx" ? MAX_TRX_PREVIEW_BYTES : MAX_INLINE_PREVIEW_BYTES; + if (size <= limit) { + const { content } = await readCachedEntry(artifactId, entryPath, limit); + const text = decodeUtf8(content); + if (text !== null) { + return { ...base, mode: "text", supported: true, truncated: false, shown: size, encoding: "utf-8", content: text }; + } + return hexResult(base, content.subarray(0, RAW_HEX_PREFIX_BYTES), size, "Not valid UTF-8; shown as bytes."); + } + const prefix = trimIncompleteUtf8(await readPrefix(context, RAW_TEXT_PREFIX_BYTES)); + const text = decodeUtf8(prefix); + if (text !== null) { + return { ...base, mode: "text", supported: true, truncated: true, shown: prefix.length, encoding: "utf-8", content: text }; + } + return hexResult(base, prefix.subarray(0, RAW_HEX_PREFIX_BYTES), size, "Not valid UTF-8; shown as bytes."); + } + const prefix = size <= RAW_HEX_PREFIX_BYTES ? await readPrefix(context, size) : await readPrefix(context, RAW_HEX_PREFIX_BYTES); + return hexResult(base, prefix, size, "Binary content; shown as bytes."); +} + +function isRawTextKind(kind, name) { + return ( + isInlineTextKind(kind) || + kind === "html" || + kind === "asciinema" || + String(name).toLowerCase().endsWith(".svg") + ); +} + +function hexResult(base, bytes, size, encodingNote) { + return { + ...base, + mode: "hex", + supported: true, + truncated: bytes.length < size, + shown: bytes.length, + encoding: "binary", + note: encodingNote, + content: hexDump(bytes), + }; +} diff --git a/extensions/pr-artifact-explorer/render.mjs b/extensions/pr-artifact-explorer/render.mjs index a43f429207..520dace3a6 100644 --- a/extensions/pr-artifact-explorer/render.mjs +++ b/extensions/pr-artifact-explorer/render.mjs @@ -23,6 +23,9 @@ export const HTML = ` + + + @@ -69,12 +72,28 @@ export const HTML = ` - diff --git a/extensions/pr-artifact-explorer/report-state.test.mjs b/extensions/pr-artifact-explorer/report-state.test.mjs new file mode 100644 index 0000000000..0e36dd34fb --- /dev/null +++ b/extensions/pr-artifact-explorer/report-state.test.mjs @@ -0,0 +1,86 @@ +import assert from "node:assert/strict"; +import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import test from "node:test"; +import { crc32 } from "node:zlib"; + +const sharedHome = await mkdtemp(join(tmpdir(), "pae-report-state-")); +process.env.COPILOT_HOME = sharedHome; + +const u16 = (v) => Buffer.from(Uint16Array.of(v).buffer); +const u32 = (v) => Buffer.from(Uint32Array.of(v).buffer); + +function zipOf(name, raw) { + const nameBuf = Buffer.from(name); + const crc = crc32(raw); + const local = Buffer.concat([u32(0x04034b50), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), nameBuf, raw]); + const central = Buffer.concat([u32(0x02014b50), u16(20), u16(20), u16(0), u16(0), u16(0), u16(0x21), u32(crc), u32(raw.length), u32(raw.length), u16(nameBuf.length), u16(0), u16(0), u16(0), u16(0), u32(0), u32(0), nameBuf]); + return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(local.length), u16(0)]); +} + +const XML = `+ + trace hi
", zip64 = false, crc, dirOffset } = {}) { + const data = Buffer.from(content); + const nameBuf = Buffer.from(name); + const checksum = crc ?? crc32(data); + const local = Buffer.concat([ + u32(0x04034b50), u16(zip64 ? 45 : 20), u16(0), u16(0), u16(0), u16(0x21), + u32(checksum), u32(data.length), u32(data.length), u16(nameBuf.length), u16(0), nameBuf, data, + ]); + const extra = zip64 ? Buffer.concat([u16(1), u16(24), u64(data.length), u64(data.length), u64(0)]) : Buffer.alloc(0); + const central = Buffer.concat([ + u32(0x02014b50), u16(45), u16(zip64 ? 45 : 20), u16(0), u16(0), u16(0), u16(0x21), + u32(checksum), u32(zip64 ? 0xffffffff : data.length), u32(zip64 ? 0xffffffff : data.length), + u16(nameBuf.length), u16(extra.length), u16(0), u16(0), u16(0), u32(0), + u32(zip64 ? 0xffffffff : 0), nameBuf, extra, + ]); + const cdOffset = dirOffset ?? local.length; + if (!zip64) { + return Buffer.concat([local, central, u32(0x06054b50), u16(0), u16(0), u16(1), u16(1), u32(central.length), u32(cdOffset), u16(0)]); + } + const eocd64Offset = local.length + central.length; + const eocd64 = Buffer.concat([ + u32(0x06064b50), u64(44), u16(45), u16(45), u32(0), u32(0), u64(1), u64(1), u64(central.length), u64(cdOffset), + ]); + const locator = Buffer.concat([u32(0x07064b50), u32(0), u64(eocd64Offset), u32(1)]); + return Buffer.concat([ + local, central, eocd64, locator, + u32(0x06054b50), u16(0), u16(0), u16(0xffff), u16(0xffff), u32(0xffffffff), u32(0xffffffff), u16(0), + ]); +} + +async function withZip(options, fn) { + const dir = await mkdtemp(join(tmpdir(), "zip64-")); + try { + const path = join(dir, "a.zip"); + await writeFile(path, buildZip(options)); + return await fn(path); + } finally { + await rm(dir, { recursive: true, force: true }); + } +} + +for (const zip64 of [false, true]) { + test(`reads a valid ${zip64 ? "ZIP64" : "ZIP32"} archive`, () => + withZip({ zip64 }, async (path) => { + const index = await readZipIndex(path); + assert.equal(index.zip64, zip64); + assert.equal(index.entries.length, 1); + assert.equal((await readZipEntry(path, index.entries[0])).toString(), "hi
"); + })); +} + +test("CRC mismatch is a hard integrity failure", () => + withZip({ zip64: true, crc: 1234 }, async (path) => { + const index = await readZipIndex(path); + await assert.rejects(readZipEntry(path, index.entries[0]), /checksum/); + })); + +test("path traversal is rejected", () => + withZip({ zip64: true, name: "../escape.txt" }, async (path) => { + await assert.rejects(readZipIndex(path), /unsafe path/); + })); + +test("a central directory pointing outside the archive is rejected", () => + withZip({ dirOffset: 99999 }, async (path) => { + await assert.rejects(readZipIndex(path), /outside the archive|central directory/i); + })); + +test("soft entry limit warns while indexing continues", () => + withZip({ zip64: true }, async (path) => { + const warnings = []; + const index = await readZipIndex(path, { + softLimits: { zipEntries: 0 }, + onSoftLimit: (kind, current) => warnings.push([kind, current]), + }); + assert.equal(index.entries.length, 1); + assert.equal(warnings.length, 1); + assert.equal(warnings[0][0], "zipEntries"); + assert.equal(warnings[0][1], index.entries.length); + assert.ok(warnings[0][1] > 0); + })); diff --git a/plugins/pr-artifact-explorer/plugin.json b/plugins/pr-artifact-explorer/plugin.json index 2841734f7b..bedb8d39de 100644 --- a/plugins/pr-artifact-explorer/plugin.json +++ b/plugins/pr-artifact-explorer/plugin.json @@ -20,6 +20,9 @@ "logo": "assets/preview.png" }, "com.github.awesome-copilot": { + "skills": [ + "./skills/pr-artifact-explorer/" + ], "extensions": [ "./extensions/pr-artifact-explorer" ] diff --git a/skills/pr-artifact-explorer/SKILL.md b/skills/pr-artifact-explorer/SKILL.md new file mode 100644 index 0000000000..a0865df83c --- /dev/null +++ b/skills/pr-artifact-explorer/SKILL.md @@ -0,0 +1,55 @@ +--- +name: pr-artifact-explorer +description: 'Open, share, and inspect GitHub PRs, issues, Actions artifacts, and local or HTTP(S) web previews in the Artifact Explorer canvas, with viewport presets, zoom, screenshots, and recoverable download jobs.' +--- + +# Artifact Explorer + +Use the `pr-artifact-explorer` canvas to show a user pull requests, issues, Actions artifacts, and web pages. + +## How to drive the canvas + +The action names below (`open_target`, `share`, ...) are **canvas actions, not standalone tools**. Always: + +1. Call `list_canvas_capabilities { canvasId: "pr-artifact-explorer" }` to discover the actions and their schemas. +2. Call `open_canvas { canvasId: "pr-artifact-explorer", instanceId: "" }` to open or focus the panel. +3. Call `invoke_canvas_action { instanceId, actionName, input }` with that same `instanceId`. + +## Open a target + +`invoke_canvas_action` with `open_target { input }` (or the open input `repository`, `pullNumber`, `artifactId`, `url`, `route`, plus `preset`/`width`/`height`/`zoom`). `input` accepts: + +- GitHub PR/issue URLs or `owner/repo#123`; issues display details only, artifacts are PR-specific +- real artifact permalinks (`https://github.com/ / /actions/runs/ /artifacts/ `), an artifact ID with a repository, or a shared explorer link/route such as `#/docs`, `#/artifact/owner%2Frepo/0/456?file=index.html`, `#/browser?v=...` +- `http(s)://` and `localhost` URLs (browser preview) +- bounded natural language: `open PR 123 in owner/repo`, `show localhost:3000 on mobile`, `go back`, `zoom 150%`, `tablet`, `1280x720`, `screenshot` + +Use `share { input, preset?, zoom?, width?, height? }` to produce a link, route, and text to give the user. Artifact shares keep repository/artifact/file identity (not preview ports); the recipient pastes it into the canvas or into `open_target`. + +## Artifacts + +`inspect_artifact { repository, artifactId }` starts a background job. Downloads continue past soft limits; when one is reached the user is prompted for a larger value (`set_limit { kind, value }`; the value must be at least the live progress). Check `job_status`; use `retry_job` after an `interrupted` or `failed` job (a completed ZIP is reused) and `cancel_job` only when asked. Never execute artifact programs or build scripts: artifacts are only inspected or previewed as static sites and files. + +Re-running the workflow that produced an artifact is a UI-only, user-confirmed action (the Re-run button on an artifact row). Never attempt it yourself or call its API; if the user wants a fresh artifact, tell them to use that button. It reuses the original commit, ref and actor, is limited to 30 days and 50 re-runs, and only requests a run, not a ready artifact. + +## Browser preview + +- `navigate_browser { url, preset?, zoom? }` opens an http(s) URL, including localhost. +- `set_viewport { preset: native | mobile | tablet | desktop | custom, width?, height?, orientation? }` sets the emulated page size. +- `set_zoom { zoom, fit? }` scales the view without changing the viewport. +- `screenshot { mode?: "fresh" | "controlled", url?, preset?, width?, height?, fullPage? }` takes a real Chromium PNG saved under the session `files/artifact-explorer-screenshots` folder. `fresh` (default) renders the URL anew and is labeled `fresh-render`; `controlled` captures the live isolated Chromium page (`controlled-current`). +- `controlled_navigate { url, preset?, ... }`, `controlled_back`, `controlled_forward`, `controlled_refresh`, `controlled_close` drive an isolated Chromium (in-memory profile, no login state) with real history; use it for sites that block iframes. Navigation failures are returned as errors, never as blank pages. If Playwright or Chromium is missing, relay the returned setup instructions to the user (including a `playwright_config_unsupported` error for the retired `PR_ARTIFACT_EXPLORER_PLAYWRIGHT` variable); never install silently. +- Pages that forbid framing (X-Frame-Options / CSP) are reported and not bypassed. + +## Previewing files + +- A contextual **Browser view** action appears in the preview toolbar only for static-site HTML artifacts; it is not a global nav item. Open URLs directly with `open_target` / `navigate_browser` or a `#/browser?v=...` route. +- `.webm`, `.mp4` and `.mov` use native `