-
-
-
+
-
- Diffsplain
-Agent-made change notes
-
@@ -224,10 +230,27 @@ function EmptyState({
);
}
+function ConnectionNotice({
+ demoUnavailable,
+ message,
+}: {
+ demoUnavailable: boolean;
+ message: string | null;
+}) {
+ if (!message) return null;
+ return (
+ (null);
- const [loadError, setLoadError] = useState(null);
- const [demoUnavailable, setDemoUnavailable] = useState(false);
+ const { demoUnavailable, loadError, snapshot } =
+ useLiveSnapshot();
const [selectedPath, setSelectedPath] = useState(null);
const [expandedFiles, setExpandedFiles] = useState>(new Set());
const [pickerOpen, setPickerOpen] = useState(false);
@@ -235,108 +258,23 @@ export default function Home() {
const [motion, setMotion] = useState<"next" | "previous" | "pick">("pick");
const [motionKey, setMotionKey] = useState(0);
const [clock, setClock] = useState(0);
- const latestVersion = useRef(null);
const touchStart = useRef(null);
const searchRef = useRef(null);
- const session = useMemo(
- () => new URLSearchParams(window.location.hash.slice(1)),
- [],
- );
- const [access, setAccess] = useState(() => session.get("access"));
-
- const refresh = useCallback(async () => {
- if (demoUnavailable) return;
-
- let usingBundledDemo = false;
- try {
- const liveUrl = new URL("diff-data.json", document.baseURI);
- liveUrl.searchParams.set("t", String(Date.now()));
- if (access) liveUrl.searchParams.set("access", access);
- const liveResponse = await fetch(liveUrl, {
- cache: "no-store",
- });
- usingBundledDemo =
- liveResponse.status === 404 ||
- liveResponse.headers.get("x-diffsplain-demo") === "true";
- const response = usingBundledDemo
- ? liveResponse.status === 404
- ? await fetch(new URL("demo-diff-data.json", document.baseURI))
- : liveResponse
- : liveResponse;
- if (!response.ok) throw new Error(`Snapshot returned ${response.status}`);
- const next = (await response.json()) as DiffSnapshot;
- if (!Array.isArray(next.files)) throw new Error("Snapshot has no files");
-
- if (next.version !== latestVersion.current) {
- latestVersion.current = next.version;
- setSnapshot(next);
- setSelectedPath((current) => {
- if (current && next.files.some((file) => file.path === current)) {
- return current;
- }
- return next.files[0]?.path ?? null;
- });
- }
- setLoadError(null);
- } catch (error) {
- const message =
- error instanceof Error ? error.message : "Could not read the snapshot";
- if (usingBundledDemo) {
- setDemoUnavailable(true);
- setLoadError(`Bundled demo is unavailable: ${message}`);
- return;
- }
- setLoadError(message);
- }
- }, [access, demoUnavailable]);
useEffect(() => {
- const initial = window.setTimeout(() => void refresh(), 0);
- let poll: number | undefined;
- let events: EventSource | undefined;
- const startPolling = () => {
- if (poll === undefined) {
- poll = window.setInterval(() => void refresh(), FALLBACK_POLL_MS);
- }
- };
- const stopPolling = () => {
- if (poll !== undefined) {
- window.clearInterval(poll);
- poll = undefined;
- }
- };
- if ("EventSource" in window) {
- const eventsUrl = new URL("events", document.baseURI);
- const project = session.get("project");
- if (project) eventsUrl.searchParams.set("project", project);
- if (access) eventsUrl.searchParams.set("access", access);
- events = new EventSource(eventsUrl);
- events.addEventListener("ready", () => {
- stopPolling();
- latestVersion.current = null;
- setSnapshot(null);
- void refresh();
- });
- events.addEventListener("update", () => void refresh());
- events.addEventListener("access", (event) => {
- const nextAccess = (event as MessageEvent).data;
- if (!/^[A-Za-z0-9_-]{32,}$/.test(nextAccess)) return;
- session.set("access", nextAccess);
- window.history.replaceState(null, "", `#${session}`);
- setAccess(nextAccess);
- });
- events.addEventListener("error", startPolling);
- } else {
- startPolling();
- }
const ticker = window.setInterval(() => setClock((value) => value + 1), 5_000);
- return () => {
- window.clearTimeout(initial);
- if (poll !== undefined) window.clearInterval(poll);
- events?.close();
- window.clearInterval(ticker);
- };
- }, [access, refresh, session]);
+ return () => window.clearInterval(ticker);
+ }, []);
+
+ useEffect(() => {
+ if (!snapshot) return;
+ setSelectedPath((current) => {
+ if (current && snapshot.files.some((file) => file.path === current)) {
+ return current;
+ }
+ return snapshot.files[0]?.path ?? null;
+ });
+ }, [snapshot]);
const files = useMemo(() => snapshot?.files ?? [], [snapshot]);
const currentIndex = Math.max(
@@ -407,18 +345,24 @@ export default function Home() {
return (
<>
- = {
+ next: T;
+ source: SnapshotSource;
+ staticDemo: boolean;
+};
+
+class DemoUnavailableError extends Error {}
+
+function currentTarget(): LiveTarget {
+ const session = new URLSearchParams(window.location.hash.slice(1));
+ const access = session.get("access");
+ const project = session.get("project");
+ return {
+ access,
+ key: `${document.baseURI}|${project ?? ""}|${access ?? ""}`,
+ project,
+ };
+}
+
+function hasSnapshotShape(value: object): value is SnapshotShape {
+ const snapshot = value as SnapshotShape;
+ return [
+ typeof snapshot.version === "string",
+ typeof snapshot.generatedAt === "string",
+ Array.isArray(snapshot.files),
+ ].every(Boolean);
+}
+
+async function parseSnapshot(response: Response) {
+ try {
+ return (await response.json()) as unknown;
+ } catch {
+ throw new Error("Snapshot data is malformed");
+ }
+}
+
+function validateSnapshot(value: unknown) {
+ if (!value || typeof value !== "object") {
+ throw new Error("Snapshot data is malformed");
+ }
+ if (!hasSnapshotShape(value)) {
+ throw new Error("Snapshot data is malformed");
+ }
+ return value as T;
+}
+
+function errorMessage(error: unknown) {
+ return error instanceof Error
+ ? error.message
+ : "Could not read the snapshot";
+}
+
+async function checkedSnapshot(response: Response) {
+ if (!response.ok) {
+ throw new Error(`Snapshot returned ${response.status}`);
+ }
+ return validateSnapshot(await parseSnapshot(response));
+}
+
+async function demoSnapshot(
+ response: Promise,
+ staticDemo: boolean,
+): Promise> {
+ try {
+ return {
+ next: await checkedSnapshot(await response),
+ source: "demo",
+ staticDemo,
+ };
+ } catch (error) {
+ throw new DemoUnavailableError(errorMessage(error));
+ }
+}
+
+// fallow-ignore-next-line complexity -- browser tests cover each live and demo result.
+async function fetchSnapshot(
+ signal: AbortSignal,
+ source: SnapshotSource | null,
+ target: LiveTarget,
+): Promise> {
+ const liveUrl = new URL("diff-data.json", document.baseURI);
+ liveUrl.searchParams.set("t", String(Date.now()));
+ if (target.access) liveUrl.searchParams.set("access", target.access);
+ const liveResponse = await fetch(liveUrl, {
+ cache: "no-store",
+ signal,
+ });
+ const staticDemo =
+ liveResponse.headers.get("x-diffsplain-demo") === "true";
+
+ if (liveResponse.status === 404) {
+ if (source === "live") throw new Error("Live snapshot is missing");
+ return demoSnapshot(
+ fetch(new URL("demo-diff-data.json", document.baseURI), { signal }),
+ false,
+ );
+ }
+ if (staticDemo) {
+ return demoSnapshot(Promise.resolve(liveResponse), true);
+ }
+ return {
+ next: await checkedSnapshot(liveResponse),
+ source: "live",
+ staticDemo: false,
+ };
+}
+
+function unavailableRequest(
+ active: boolean,
+ controller: AbortController,
+) {
+ return !active || controller.signal.aborted;
+}
+
+function validUpdateEvent(event: Event) {
+ try {
+ const value = JSON.parse((event as MessageEvent).data);
+ return Boolean(value && typeof value === "object" && !Array.isArray(value));
+ } catch {
+ return false;
+ }
+}
+
+export function useLiveSnapshot() {
+ const [snapshot, setSnapshot] = useState(null);
+ const [fetchError, setFetchError] = useState(null);
+ const [streamError, setStreamError] = useState(null);
+ const [demoUnavailable, setDemoUnavailable] = useState(false);
+ const [target, setTarget] = useState(currentTarget);
+ const latestVersion = useRef(null);
+ const source = useRef(null);
+
+ useEffect(() => {
+ const handleTargetChange = () => {
+ const next = currentTarget();
+ setTarget((current) => (current.key === next.key ? current : next));
+ };
+ window.addEventListener("hashchange", handleTargetChange);
+ return () => window.removeEventListener("hashchange", handleTargetChange);
+ }, []);
+
+ // fallow-ignore-next-line complexity -- one effect owns and cleans up all refresh work.
+ useEffect(() => {
+ if (demoUnavailable) return;
+
+ let active = true;
+ let events: EventSource | undefined;
+ let poll: number | undefined;
+ let pollingRequest = false;
+ let requestNumber = 0;
+ let latestSuccessfulRequest = 0;
+ const requests = new Set();
+
+ latestVersion.current = null;
+ source.current = null;
+ setSnapshot(null);
+ setFetchError(null);
+ setStreamError(null);
+
+ const stopPolling = () => {
+ if (poll === undefined) return;
+ window.clearInterval(poll);
+ poll = undefined;
+ };
+ const requestRefresh = () => {
+ if (active) void refresh();
+ };
+ const requestPollRefresh = async () => {
+ if (!active || pollingRequest) return;
+ pollingRequest = true;
+ try {
+ await refresh();
+ } finally {
+ pollingRequest = false;
+ }
+ };
+ const startPolling = () => {
+ if (poll !== undefined) return;
+ poll = window.setInterval(
+ () => void requestPollRefresh(),
+ FALLBACK_POLL_MS,
+ );
+ };
+ const applySnapshot = (result: SnapshotResult) => {
+ source.current = result.source;
+ if (result.next.version !== latestVersion.current) {
+ latestVersion.current = result.next.version;
+ setSnapshot(result.next);
+ }
+ setFetchError(null);
+ if (!result.staticDemo) return;
+ stopPolling();
+ events?.close();
+ setStreamError(null);
+ };
+ const finishRequest = (
+ result: SnapshotResult,
+ controller: AbortController,
+ request: number,
+ ) => {
+ if (
+ unavailableRequest(active, controller) ||
+ request < latestSuccessfulRequest
+ ) {
+ return;
+ }
+ latestSuccessfulRequest = request;
+ applySnapshot(result);
+ };
+ const handleFetchError = (error: unknown) => {
+ const message = errorMessage(error);
+ if (!(error instanceof DemoUnavailableError)) {
+ setFetchError(message);
+ return;
+ }
+ setDemoUnavailable(true);
+ setFetchError(`Bundled demo is unavailable: ${message}`);
+ };
+ const failRequest = (
+ error: unknown,
+ controller: AbortController,
+ request: number,
+ ) => {
+ if (
+ unavailableRequest(active, controller) ||
+ request !== requestNumber
+ ) {
+ return;
+ }
+ handleFetchError(error);
+ };
+
+ async function refresh() {
+ const request = ++requestNumber;
+ const controller = new AbortController();
+ requests.add(controller);
+
+ try {
+ const result = await fetchSnapshot(
+ controller.signal,
+ source.current,
+ target,
+ );
+ finishRequest(result, controller, request);
+ } catch (error) {
+ failRequest(error, controller, request);
+ } finally {
+ requests.delete(controller);
+ }
+ }
+
+ const initial = window.setTimeout(requestRefresh, 0);
+ if ("EventSource" in window) {
+ const eventsUrl = new URL("events", document.baseURI);
+ if (target.project) {
+ eventsUrl.searchParams.set("project", target.project);
+ }
+ if (target.access) {
+ eventsUrl.searchParams.set("access", target.access);
+ }
+ events = new EventSource(eventsUrl);
+ events.addEventListener("ready", () => {
+ if (!active) return;
+ stopPolling();
+ setStreamError(null);
+ requestRefresh();
+ });
+ events.addEventListener("update", (event) => {
+ if (!active) return;
+ if (!validUpdateEvent(event)) {
+ setStreamError(
+ "A live update was malformed. Polling for the next valid snapshot.",
+ );
+ startPolling();
+ } else {
+ stopPolling();
+ setStreamError(null);
+ }
+ requestRefresh();
+ });
+ events.addEventListener("access", (event) => {
+ if (!active) return;
+ const nextAccess = (event as MessageEvent).data;
+ if (!/^[A-Za-z0-9_-]{32,}$/.test(nextAccess)) return;
+ const session = new URLSearchParams(window.location.hash.slice(1));
+ session.set("access", nextAccess);
+ window.history.replaceState(null, "", `#${session}`);
+ const nextTarget = currentTarget();
+ setTarget((current) =>
+ current.key === nextTarget.key ? current : nextTarget,
+ );
+ });
+ events.addEventListener("error", () => {
+ if (!active) return;
+ setStreamError(
+ "Live updates disconnected. Polling while the stream reconnects.",
+ );
+ startPolling();
+ });
+ } else {
+ setStreamError(
+ "Live events are unavailable. Polling for snapshot changes.",
+ );
+ startPolling();
+ }
+
+ return () => {
+ active = false;
+ window.clearTimeout(initial);
+ stopPolling();
+ events?.close();
+ for (const request of requests) request.abort();
+ requests.clear();
+ };
+ }, [demoUnavailable, target]);
+
+ return {
+ demoUnavailable,
+ loadError: fetchError ?? streamError,
+ snapshot,
+ };
+}
diff --git a/docs/content/data.mdx b/docs/content/data.mdx
index fc61597..105408d 100644
--- a/docs/content/data.mdx
+++ b/docs/content/data.mdx
@@ -59,9 +59,11 @@ is open:
npx diffsplain --worktree
```
-The local server tells the page when the snapshot changes. If those update
-events fail, the page checks the live JSON every 1.5 seconds instead. It keeps
-the selected file when new data arrives.
+`npx diffsplain --worktree` starts the watcher and local page together.
+The page listens for live events and polls the JSON every 1.5 seconds when the
+event stream drops. Each refresh ignores older requests that finish late. A
+bad or missing refresh leaves the last valid snapshot and selected file on
+screen while the page reconnects.
In watch mode, remote pull requests and branches update every 30 seconds.
diff --git a/tests/browser/review-journey.test.mjs b/tests/browser/review-journey.test.mjs
index 4596766..9e61845 100644
--- a/tests/browser/review-journey.test.mjs
+++ b/tests/browser/review-journey.test.mjs
@@ -122,6 +122,14 @@ async function writeSnapshot(value) {
await writeFile(output, `${JSON.stringify(value, null, 2)}\n`);
}
+function deferred() {
+ let resolve;
+ const promise = new Promise((done) => {
+ resolve = done;
+ });
+ return { promise, resolve };
+}
+
function startServer() {
return new Promise((resolveServer, rejectServer) => {
const vite = resolve(root, "node_modules/vite/bin/vite.js");
@@ -187,7 +195,11 @@ async function runInBrowser(name, options, journey) {
try {
await journey(page);
assert.deepEqual(
- consoleErrors.filter((message) => !message.includes("status of 503")),
+ consoleErrors.filter(
+ (message) =>
+ !message.includes("status of 503") &&
+ !message.includes("status of 404"),
+ ),
[],
);
} catch (error) {
@@ -254,6 +266,338 @@ test("shows error, empty, binary, truncated, and refreshed review states on desk
});
});
+test("keeps the newest live snapshot through late responses and faults", async () => {
+ await runInBrowser(
+ "ordered live refresh",
+ { viewport: { width: 1280, height: 800 } },
+ async (page) => {
+ await writeSnapshot(fixture("ordered-one"));
+ await page.goto(serverUrl);
+ await page.getByRole("heading", { name: "Explain saved todos" }).waitFor();
+ await selectFile(page, "long-list");
+ await page
+ .getByRole("heading", { name: "Live review ordered-one" })
+ .waitFor();
+
+ const staleCaptured = deferred();
+ const releaseStale = deferred();
+ const staleDelivered = deferred();
+ let holdNext = true;
+ const delaySnapshot = async (route) => {
+ if (!holdNext) {
+ await route.continue();
+ return;
+ }
+ holdNext = false;
+ const response = await route.fetch();
+ const body = await response.body();
+ staleCaptured.resolve();
+ await releaseStale.promise;
+ await route.fulfill({ response, body });
+ staleDelivered.resolve();
+ };
+ await page.route("**/diff-data.json?*", delaySnapshot);
+
+ await writeSnapshot(fixture("ordered-stale"));
+ await staleCaptured.promise;
+ await writeSnapshot(fixture("ordered-newest"));
+ await page
+ .getByRole("heading", { name: "Live review ordered-newest" })
+ .waitFor();
+ releaseStale.resolve();
+ await staleDelivered.promise;
+ await page.unroute("**/diff-data.json?*", delaySnapshot);
+ await page.waitForTimeout(100);
+
+ await page
+ .getByRole("heading", { name: "Live review ordered-newest" })
+ .waitFor();
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+
+ await page.route(
+ "**/diff-data.json?*",
+ (route) =>
+ route.fulfill({
+ body: JSON.stringify({ error: "temporary failure" }),
+ contentType: "application/json",
+ status: 503,
+ }),
+ { times: 1 },
+ );
+ await writeSnapshot(fixture("failed-refresh"));
+ await page.getByText("Snapshot returned 503").waitFor();
+ await page
+ .getByRole("heading", { name: "Live review ordered-newest" })
+ .waitFor();
+
+ await writeSnapshot(fixture("recovered"));
+ await page.getByRole("heading", { name: "Live review recovered" }).waitFor();
+ await page.getByText("Snapshot returned 503").waitFor({ state: "hidden" });
+
+ await page.route(
+ "**/diff-data.json?*",
+ (route) =>
+ route.fulfill({
+ body: "{not valid JSON",
+ contentType: "application/json",
+ status: 200,
+ }),
+ { times: 1 },
+ );
+ await writeSnapshot(fixture("malformed-refresh"));
+ await page.getByText("Snapshot data is malformed").waitFor();
+ await page.getByRole("heading", { name: "Live review recovered" }).waitFor();
+
+ await writeSnapshot(fixture("after-malformed"));
+ await page
+ .getByRole("heading", { name: "Live review after-malformed" })
+ .waitFor();
+
+ await page.route(
+ "**/diff-data.json?*",
+ (route) =>
+ route.fulfill({
+ body: "Not found",
+ contentType: "text/plain",
+ status: 404,
+ }),
+ { times: 1 },
+ );
+ await writeSnapshot(fixture("missing-refresh"));
+ await page.getByText("Live snapshot is missing").waitFor();
+ await page
+ .getByRole("heading", { name: "Live review after-malformed" })
+ .waitFor();
+
+ await writeSnapshot(fixture("after-missing"));
+ await page
+ .getByRole("heading", { name: "Live review after-missing" })
+ .waitFor();
+ await page.getByText("Live snapshot is missing").waitFor({ state: "hidden" });
+
+ const duplicate = page.waitForResponse(
+ (response) =>
+ new URL(response.url()).pathname === "/diff-data.json" &&
+ response.ok(),
+ );
+ await writeSnapshot(fixture("after-missing"));
+ await duplicate;
+ assert.equal(
+ await page
+ .getByRole("heading", { name: "Live review after-missing" })
+ .count(),
+ 1,
+ );
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+ },
+ );
+});
+
+test("keeps a pending success when a newer refresh fails", async () => {
+ await runInBrowser(
+ "pending successful refresh",
+ { viewport: { width: 1280, height: 800 } },
+ async (page) => {
+ await writeSnapshot(fixture("pending-base"));
+ await page.goto(serverUrl);
+ await page.getByRole("heading", { name: "Explain saved todos" }).waitFor();
+ await selectFile(page, "long-list");
+
+ const successCaptured = deferred();
+ const releaseSuccess = deferred();
+ const successDelivered = deferred();
+ const delaySuccess = async (route) => {
+ const response = await route.fetch();
+ const body = await response.body();
+ successCaptured.resolve();
+ await releaseSuccess.promise;
+ await route.fulfill({ response, body });
+ successDelivered.resolve();
+ };
+ await page.route("**/diff-data.json?*", delaySuccess);
+ await writeSnapshot(fixture("pending-success"));
+ await successCaptured.promise;
+
+ await page.route(
+ "**/diff-data.json?*",
+ (route) =>
+ route.fulfill({
+ body: JSON.stringify({ error: "newer request failed" }),
+ contentType: "application/json",
+ status: 503,
+ }),
+ { times: 1 },
+ );
+ await writeSnapshot(fixture("newer-failure"));
+ await page.getByText("Snapshot returned 503").waitFor();
+
+ releaseSuccess.resolve();
+ await successDelivered.promise;
+ await page.unroute("**/diff-data.json?*", delaySuccess);
+ await page
+ .getByRole("heading", { name: "Live review pending-success" })
+ .waitFor();
+ await page.getByText("Snapshot returned 503").waitFor({ state: "hidden" });
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+ },
+ );
+});
+
+test("recovers from event faults without resetting the selected file", async () => {
+ await runInBrowser(
+ "event stream recovery",
+ { viewport: { width: 1280, height: 800 } },
+ async (page) => {
+ await page.addInitScript(() => {
+ class ControlledEventSource extends EventTarget {
+ static instances = [];
+
+ constructor(url) {
+ super();
+ this.closed = false;
+ this.url = String(url);
+ ControlledEventSource.instances.push(this);
+ queueMicrotask(() => {
+ this.dispatchEvent(
+ new MessageEvent("ready", { data: "{}" }),
+ );
+ });
+ }
+
+ close() {
+ this.closed = true;
+ }
+ }
+
+ window.EventSource = ControlledEventSource;
+ window.controlledEvents = {
+ emit(type, data = "{}") {
+ const source = ControlledEventSource.instances.at(-1);
+ const event =
+ type === "error"
+ ? new Event(type)
+ : new MessageEvent(type, { data });
+ source.dispatchEvent(event);
+ },
+ state() {
+ return ControlledEventSource.instances.map((source) => ({
+ closed: source.closed,
+ url: source.url,
+ }));
+ },
+ };
+ });
+
+ await writeSnapshot(fixture("stream-one"));
+ await page.goto(serverUrl);
+ await page.getByRole("heading", { name: "Explain saved todos" }).waitFor();
+ await selectFile(page, "long-list");
+ await page.getByRole("heading", { name: "Live review stream-one" }).waitFor();
+
+ const slowSnapshot = async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 1_900));
+ await route.continue();
+ };
+ await page.route("**/diff-data.json?*", slowSnapshot);
+ await page.evaluate(() => window.controlledEvents.emit("error"));
+ await page.getByText("Live updates disconnected").waitFor();
+ await writeSnapshot(fixture("stream-polled"));
+ await page
+ .getByRole("heading", { name: "Live review stream-polled" })
+ .waitFor();
+ await page.unroute("**/diff-data.json?*", slowSnapshot);
+
+ const malformedRefresh = page.waitForResponse(
+ (response) =>
+ new URL(response.url()).pathname === "/diff-data.json" &&
+ response.ok(),
+ );
+ await page.evaluate(() =>
+ window.controlledEvents.emit("update", "not-json"),
+ );
+ await malformedRefresh;
+ await page.getByText("A live update was malformed").waitFor();
+ let recoveredRequests = 0;
+ const countRecoveredRequests = async (route) => {
+ recoveredRequests += 1;
+ await route.continue();
+ };
+ await page.route("**/diff-data.json?*", countRecoveredRequests);
+ await writeSnapshot(fixture("stream-two"));
+ await page.evaluate(() => window.controlledEvents.emit("update"));
+ await page
+ .getByText("A live update was malformed")
+ .waitFor({ state: "hidden" });
+ await page.getByRole("heading", { name: "Live review stream-two" }).waitFor();
+ await page.waitForTimeout(1_700);
+ assert.equal(recoveredRequests, 1);
+ await page.unroute("**/diff-data.json?*", countRecoveredRequests);
+
+ await page.evaluate(() => {
+ window.controlledEvents.emit("update");
+ window.controlledEvents.emit("update");
+ });
+ await page.getByRole("heading", { name: "Live review stream-two" }).waitFor();
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+
+ const priorEventSources = await page.evaluate(() =>
+ window.controlledEvents.state(),
+ );
+ await page.evaluate(() => {
+ window.location.hash = "project=next-target";
+ });
+ await page.getByRole("heading", { name: "Live review stream-two" }).waitFor();
+ const eventSources = await page.evaluate(() =>
+ window.controlledEvents.state(),
+ );
+ assert.equal(eventSources.length, priorEventSources.length + 1);
+ assert.equal(eventSources.at(-2).closed, true);
+ assert.match(eventSources.at(-1).url, /project=next-target/);
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+
+ const access = "a".repeat(43);
+ await page.evaluate(
+ (nextAccess) => window.controlledEvents.emit("access", nextAccess),
+ access,
+ );
+ await page.waitForFunction(
+ (nextAccess) =>
+ window.controlledEvents.state().at(-1)?.url.includes(nextAccess),
+ access,
+ );
+ const accessEventSources = await page.evaluate(() =>
+ window.controlledEvents.state(),
+ );
+ assert.equal(accessEventSources.at(-2).closed, true);
+ assert.match(accessEventSources.at(-1).url, /project=next-target/);
+ assert.match(accessEventSources.at(-1).url, new RegExp(`access=${access}`));
+ assert.equal(
+ new URLSearchParams(new URL(page.url()).hash.slice(1)).get("access"),
+ access,
+ );
+ assert.equal(
+ await page.locator(".current-path").textContent(),
+ "src/long-list.ts",
+ );
+ },
+ );
+});
+
test("runs the full picker and refresh journey at the supported mobile viewport", async () => {
await runInBrowser(
"mobile review journey",
diff --git a/tests/rendered-html.test.mjs b/tests/rendered-html.test.mjs
index 712e2d4..5e4f6f1 100644
--- a/tests/rendered-html.test.mjs
+++ b/tests/rendered-html.test.mjs
@@ -143,15 +143,20 @@ test("adds PostHog analytics to the public site and docs", async () => {
});
test("uses the bundled demo when no live snapshot exists", async () => {
- const [page, viteConfig] = await Promise.all([
+ const [page, liveSnapshot, viteConfig] = await Promise.all([
readFile(new URL("../app/page.tsx", import.meta.url), "utf8"),
+ readFile(new URL("../app/use-live-snapshot.ts", import.meta.url), "utf8"),
readFile(new URL("../vite.config.ts", import.meta.url), "utf8"),
]);
- assert.match(page, /liveResponse\.status === 404/);
- assert.match(page, /new URL\("demo-diff-data\.json", document\.baseURI\)/);
- assert.match(page, /Bundled demo is unavailable/);
- assert.match(page, /if \(demoUnavailable\) return/);
+ assert.match(liveSnapshot, /liveResponse\.status === 404/);
+ assert.match(
+ liveSnapshot,
+ /new URL\("demo-diff-data\.json", document\.baseURI\)/,
+ );
+ assert.match(liveSnapshot, /Bundled demo is unavailable/);
+ assert.match(liveSnapshot, /if \(demoUnavailable\) return/);
+ assert.match(page, /Check public\/demo-diff-data\.json/);
assert.match(viteConfig, /request\.url\?\.split\("\?", 1\)\[0\] !== "\/diff-data\.json"/);
assert.match(viteConfig, /"content-type": "application\/json; charset=utf-8"/);
assert.match(viteConfig, /"x-diffsplain-demo": "true"/);
+ {message}
+ {demoUnavailable
+ ? ". Check public/demo-diff-data.json."
+ : " The last valid review stays visible while Diffsplain retries."}
+
+ );
+}
+
export default function Home() {
- const [snapshot, setSnapshot] = useState
- {loadError}
- {demoUnavailable ? ". Check public/demo-diff-data.json." : ". Retrying…"}
-
- ) : null}
+
-
-
+
-
- Diffsplain
-Agent-made change notes
-
@@ -851,6 +786,10 @@ export default function Home() {
) : null}
+