diff --git a/web/src/lib/api/repoCompare.ts b/web/src/lib/api/repoCompare.ts
new file mode 100644
index 000000000..1f3197318
--- /dev/null
+++ b/web/src/lib/api/repoCompare.ts
@@ -0,0 +1,126 @@
+import type { Did } from "@atcute/lexicons/syntax";
+import type { GitRepoInfo } from "#lib/components/repo/types.ts";
+import { createBobbinClient } from "#lib/api/client.ts";
+import {
+	branches as listBranches,
+	tags as listTags,
+	gitTarget,
+	type GitServiceConfig
+} from "#lib/api/gitclient.ts";
+import {
+	commitAtRef,
+	getMergeBase,
+	listCommits,
+	toMirrorCommitSummary
+} from "#lib/api/knotmirror.ts";
+import { sortBranchesByRecency } from "#lib/api/pullCompose.ts";
+import {
+	branchSummaries,
+	toTagSummary,
+	type BranchSummary,
+	type CommitSummary,
+	type TagSummary
+} from "#lib/api/repo.ts";
+
+const REF_LIMIT = 100;
+const COMMIT_LIMIT = 100;
+
+// the spec is `base...head` as on github. a git ref cannot contain `..`, thus the split is not ambiguous
+export const parseCompareSpec = (spec: string): { base: string; head: string } | null => {
+	const at = spec.indexOf("...");
+	if (at < 0) return null;
+	return { base: spec.slice(0, at), head: spec.slice(at + 3) };
+};
+
+export const comparePath = (repoPath: string, base: string, head: string): string =>
+	base && head
+		? `${repoPath}/compare/${encodeURIComponent(base)}...${encodeURIComponent(head)}`
+		: `${repoPath}/compare?${new URLSearchParams({ ...(base && { base }), ...(head && { head }) })}`;
+
+export interface CompareData {
+	branches: BranchSummary[];
+	tags: TagSummary[];
+	base: string;
+	head: string;
+	baseHead: string;
+	headHead: string;
+	mergeBase: string;
+	commits: CommitSummary[];
+	error: string;
+}
+
+export const loadCompare = async (args: {
+	config: GitServiceConfig;
+	repo: GitRepoInfo;
+	base: string;
+	head: string;
+	fetch: typeof globalThis.fetch;
+}): Promise<CompareData> => {
+	const { config, repo, fetch: fetchFn } = args;
+	const repoDid = repo.repoDid as Did;
+	const ctx = createBobbinClient({ serviceUrl: config.bobbinUrl, fetch: fetchFn });
+	const git = gitTarget(config, repo, fetchFn);
+
+	const [branchList, tagList] = await Promise.all([
+		listBranches(git, REF_LIMIT)
+			.then(branchSummaries)
+			.catch(() => [] as BranchSummary[]),
+		listTags(git, REF_LIMIT)
+			.then((page) => page.tags.map(toTagSummary))
+			.catch(() => [] as TagSummary[])
+	]);
+
+	const base = args.base || repo.git.defaultBranch;
+	const head =
+		args.head ||
+		sortBranchesByRecency(branchList).find((branch) => branch.name !== base)?.name ||
+		"";
+
+	// a listed ref resolves without a request. other refs, for example a commit hash, go to the mirror
+	const resolveRef = async (ref: string): Promise<string> => {
+		if (!ref) return "";
+		const listed =
+			branchList.find((branch) => branch.name === ref)?.hash ??
+			tagList.find((tag) => tag.name === ref)?.commitHash;
+		if (listed) return listed;
+		return (await commitAtRef(ctx, repoDid, ref))?.oid ?? "";
+	};
+
+	let baseHead = "";
+	let headHead = "";
+	let mergeBase = "";
+	let commits: CommitSummary[] = [];
+	let error = "";
+	try {
+		[baseHead, headHead] = await Promise.all([resolveRef(base), resolveRef(head)]);
+		if (base && !baseHead) error = `Could not find ${base} in this repository.`;
+		else if (head && !headHead) error = `Could not find ${head} in this repository.`;
+		else if (baseHead && headHead && baseHead !== headHead) {
+			const [page, merge] = await Promise.all([
+				listCommits(ctx, {
+					repos: [repoDid],
+					ranges: [`${baseHead}..${headHead}`],
+					limit: COMMIT_LIMIT,
+					includeStats: true
+				}),
+				getMergeBase(ctx, { repos: [repoDid], base: baseHead, head: headHead })
+			]);
+			commits = page.commits.map(toMirrorCommitSummary);
+			mergeBase = merge.commit;
+		}
+	} catch (cause) {
+		error = cause instanceof Error ? cause.message : String(cause);
+	}
+
+	return {
+		branches: branchList,
+		tags: tagList,
+		base,
+		head,
+		baseHead,
+		headHead,
+		mergeBase,
+		commits,
+		error
+	};
+};
diff --git a/web/src/lib/components/repo/CompareView.svelte b/web/src/lib/components/repo/CompareView.svelte
new file mode 100644
index 000000000..5eb2264ae
--- /dev/null
+++ b/web/src/lib/components/repo/CompareView.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { browser } from "$app/env";
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import type { Did } from "@atcute/lexicons/syntax";
+	import ArrowLeft from "$icon/arrow-left";
+	import ArrowLeftRight from "$icon/arrow-left-right";
+	import GitPullRequestCreate from "$icon/git-pull-request-create";
+	import { createBobbinClient } from "#lib/api/client.ts";
+	import { gitTarget } from "#lib/api/gitclient.ts";
+	import { formatPatchUrl } from "#lib/api/knotmirror.ts";
+	import { getPatchStream } from "#lib/api/patchStream.ts";
+	import { comparePath, type CompareData } from "#lib/api/repoCompare.ts";
+	import { loadDiff, type RepoDiffDeps, type RepoDiffSpec } from "#lib/api/repoDiff.ts";
+	import { createLoad } from "#lib/action.svelte.ts";
+	import { getAuth } from "#lib/auth.svelte.ts";
+	import Button from "#lib/components/ui/Button.svelte";
+	import Card from "#lib/components/ui/Card.svelte";
+	import Field from "#lib/components/ui/Field.svelte";
+	import Select from "#lib/components/ui/Select.svelte";
+	import DiffView from "#lib/components/repo/DiffView.svelte";
+	import PullCommitList from "#lib/components/repo/pulls/PullCommitList.svelte";
+	import PullCommitListHeader from "#lib/components/repo/pulls/PullCommitListHeader.svelte";
+	import type { Range } from "#lib/components/ui/RangeSelector.svelte";
+	import type { SelectOption } from "#lib/components/ui/selectField.ts";
+	import type { GitRepoInfo } from "#lib/components/repo/types.ts";
+
+	interface Props {
+		repo: GitRepoInfo;
+		bobbinUrl: string;
+		compare: CompareData;
+	}
+
+	let { repo, bobbinUrl, compare }: Props = $props();
+
+	const auth = getAuth();
+	const repoPath = $derived(`/${repo.ownerHandle}/${repo.name}`);
+	const commits = $derived(compare.commits);
+	const hasChanges = $derived(!compare.error && commits.length > 0);
+	let showChangeIds = $state(true);
+
+	const navigate = (base: string, head: string) =>
+		void goto(resolve(comparePath(repoPath, base, head) as "/"), { reset: false });
+
+	// if the user picks the ref that is on the other side, swap the two refs
+	const pickBase = (ref: string) =>
+		ref === compare.head ? navigate(ref, compare.base) : navigate(ref, compare.head);
+	const pickHead = (ref: string) =>
+		ref === compare.base ? navigate(compare.head, ref) : navigate(compare.base, ref);
+
+	const refOptions = (other: string, otherHint: string): SelectOption[] => [
+		...compare.branches.map((branch) => ({
+			value: branch.name,
+			hint: branch.name === other ? otherHint : branch.isDefault ? "default" : undefined,
+			group: "Branches"
+		})),
+		...compare.tags.map((tag) => ({
+			value: tag.name,
+			hint: tag.name === other ? otherHint : undefined,
+			group: "Tags"
+		}))
+	];
+	const baseOptions = $derived(refOptions(compare.head, "compare"));
+	const headOptions = $derived(refOptions(compare.base, "base"));
+
+	const isBranch = (ref: string) => compare.branches.some((branch) => branch.name === ref);
+	const pullHref = $derived(
+		auth?.currentDid && hasChanges && isBranch(compare.base) && isBranch(compare.head)
+			? `${repoPath}/pulls/new?${new URLSearchParams({ sourceBranch: compare.head, targetBranch: compare.base })}`
+			: undefined
+	);
+
+	let stagedRange = $state<Range | null>(null);
+	let stagedWhole = $state(true);
+	$effect(() => {
+		void compare;
+		stagedRange = null;
+		stagedWhole = true;
+	});
+	const commitRange = $derived<Range>(stagedRange ?? { start: 0, end: commits.length - 1 });
+
+	const diffSpec = $derived<RepoDiffSpec>({
+		kind: "diff",
+		repo: repo.repoDid as Did,
+		version: {
+			// the range includes its two ends, thus the diff starts at the parent of the bottom commit
+			base: commits[commitRange.end + 1]?.hash ?? compare.mergeBase,
+			head: commits[commitRange.start]?.hash ?? compare.headHead
+		}
+	});
+
+	const diffDeps = $derived<RepoDiffDeps>({
+		ctx: createBobbinClient({ serviceUrl: bobbinUrl, fetch: globalThis.fetch }),
+		git: gitTarget({ bobbinUrl }, repo, globalThis.fetch)
+	});
+
+	const diff = createLoad(async () => {
+		if (!hasChanges || !diffSpec.version.base || !diffSpec.version.head) return undefined;
+		return await loadDiff(diffDeps, diffSpec);
+	});
+
+	const patchUrl = $derived(
+		hasChanges && diffSpec.version.base
+			? formatPatchUrl(diffDeps.git.ctx.serviceUrl, {
+					repo: repo.repoDid ?? "",
+					from: diffSpec.version.base,
+					to: diffSpec.version.head
+				})
+			: undefined
+	);
+	const patchStream = $derived(browser && patchUrl ? getPatchStream(patchUrl) : undefined);
+
+	const refSearch = {
+		rich: true,
+		searchPlaceholder: "Find a branch or tag…",
+		emptyLabel: "No branch or tag matches"
+	};
+</script>
+
+{#snippet notice(message: string, danger = false)}
+	<div
+		class="rounded-md border px-md py-sm typography-paragraph-small {danger
+			? 'border-border-danger bg-background-danger-subtle text-foreground-danger'
+			: 'border-border-default bg-background-subtle text-foreground-muted'}"
+	>
+		{message}
+	</div>
+{/snippet}
+
+<div class="flex flex-col gap-md">
+	<Card class="flex flex-col gap-sm">
+		<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+			<Field label="Base" class="min-w-48">
+				{#snippet children({ id })}
+					<Select
+						{id}
+						{...refSearch}
+						label="Base"
+						options={baseOptions}
+						value={compare.base}
+						placeholder={compare.base ? undefined : "Base ref"}
+						onSelect={pickBase}
+					/>
+				{/snippet}
+			</Field>
+			<div class="hidden h-8 shrink-0 items-center sm:flex">
+				<ArrowLeft class="size-4 text-foreground-muted" aria-hidden="true" />
+			</div>
+			<Field label="Compare" class="min-w-48">
+				{#snippet children({ id })}
+					<Select
+						{id}
+						{...refSearch}
+						label="Compare"
+						options={headOptions}
+						value={compare.head}
+						placeholder={compare.head ? undefined : "Compare ref"}
+						onSelect={pickHead}
+					/>
+				{/snippet}
+			</Field>
+			<div class="flex h-8 items-center gap-xs sm:ml-auto">
+				<Button
+					variant="ghost"
+					icon={ArrowLeftRight}
+					disabled={!compare.base || !compare.head}
+					onclick={() => navigate(compare.head, compare.base)}
+				>
+					Swap
+				</Button>
+				{#if pullHref}
+					<Button
+						variant="primary"
+						icon={GitPullRequestCreate}
+						href={resolve(pullHref as "/")}
+					>
+						Create pull request
+					</Button>
+				{/if}
+			</div>
+		</div>
+	</Card>
+
+	{#if compare.error}
+		{@render notice(compare.error, true)}
+	{:else if !compare.head}
+		{@render notice("Pick a ref to compare against the base.")}
+	{:else if commits.length === 0}
+		{@render notice(
+			compare.baseHead === compare.headHead
+				? `${compare.base} and ${compare.head} point at the same commit, nothing to compare.`
+				: `${compare.base} is up to date with all commits from ${compare.head}.`
+		)}
+	{:else}
+		<Card padding="small" class="space-y-xs">
+			<PullCommitListHeader {commits} bind:showChangeIds />
+			<PullCommitList
+				ownerHandle={repo.ownerHandle}
+				repoName={repo.name}
+				{commits}
+				bind:showChangeIds
+				selection={{
+					mode: "range",
+					range: commitRange,
+					whole: stagedWhole,
+					oncommit: (range, whole) => {
+						stagedRange = range;
+						stagedWhole = whole;
+					}
+				}}
+			/>
+		</Card>
+
+		<DiffView
+			deps={diffDeps}
+			diff={diff.data}
+			error={diff.error}
+			loading={diff.loading}
+			{patchUrl}
+			patch={patchStream}
+			treeCollapsed
+		/>
+	{/if}
+</div>
diff --git a/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.svelte b/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.svelte
new file mode 100644
index 000000000..5e7b34458
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import CompareView from "#lib/components/repo/CompareView.svelte";
+	import Pending from "#lib/components/ui/Pending.svelte";
+
+	let { data } = $props();
+</script>
+
+<Pending>
+	{@const repo = await data.repo}
+	<CompareView {repo} bobbinUrl={data.publicConfig.bobbinUrl} compare={await data.compare} />
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.ts b/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.ts
new file mode 100644
index 000000000..e4bc40f5f
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/compare/[...spec]/+page.ts
@@ -0,0 +1,36 @@
+import { requireGit } from "#lib/api/gitclient.ts";
+import { settle, stream } from "#lib/api/load.ts";
+import { loadCompare, parseCompareSpec } from "#lib/api/repoCompare.ts";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const repo = stream(Promise.resolve(parent.repo).then(requireGit));
+	const handle = decodeURIComponent(event.params.handle ?? "");
+	const name = decodeURIComponent(event.params.repo ?? "");
+	const spec = parseCompareSpec(event.params.spec ?? "");
+	const base = spec?.base ?? event.url.searchParams.get("base") ?? "";
+	const head = spec?.head ?? event.url.searchParams.get("head") ?? "";
+
+	return settle({
+		repo,
+		compare: stream(
+			repo.then((info) =>
+				loadCompare({
+					config: parent.publicConfig,
+					repo: info,
+					base,
+					head,
+					fetch: event.fetch
+				})
+			)
+		),
+		meta: {
+			noindex: true,
+			title:
+				base && head
+					? `Comparing ${base}...${head} · ${handle}/${name}`
+					: `Compare · ${handle}/${name}`
+		}
+	});
+};