From 9c55dcb514a952eb69ec657641eaf9bfdd104230 Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Fri, 14 Aug 2026 18:02:21 +0900
Subject: [PATCH] web: pr page redesign

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 web/src/lib/api/gitmirror.ts                  |  19 +
 web/src/lib/api/pull.ts                       |  57 +-
 web/src/lib/api/pullDiff.test.ts              | 295 +++++---
 web/src/lib/api/pullDiff.ts                   | 351 +++++----
 web/src/lib/api/pullPage.ts                   | 136 ----
 web/src/lib/api/pullRoute.test.ts             |  80 +--
 web/src/lib/api/pullRoute.ts                  |  79 +-
 web/src/lib/api/repo.ts                       |   9 +
 .../lib/components/comment/comments.test.ts   | 147 ++++
 web/src/lib/components/comment/comments.ts    |  65 ++
 .../repo/pulls/PullActions.stories.svelte     |  19 -
 .../components/repo/pulls/PullActions.svelte  | 336 ++-------
 .../repo/pulls/PullComment.stories.svelte     |  49 --
 .../components/repo/pulls/PullComment.svelte  | 196 -----
 .../repo/pulls/PullCommitList.stories.svelte  |  45 --
 .../repo/pulls/PullCommitList.svelte          |  83 ---
 .../repo/pulls/PullCommitListDiff.svelte      |  50 ++
 .../repo/pulls/PullCommitListHeader.svelte    |  40 ++
 .../repo/pulls/PullCommitListInterdiff.svelte | 111 +++
 .../repo/pulls/PullCommitRow.svelte           |  90 +++
 .../lib/components/repo/pulls/PullDiff.svelte | 124 ++++
 .../repo/pulls/PullDiffFileCard.svelte        | 119 +++
 .../repo/pulls/PullDiffFileList.svelte        | 104 +++
 .../repo/pulls/PullDiffFiles.svelte           | 119 ---
 .../repo/pulls/PullDiffPanel.stories.svelte   |  50 --
 .../repo/pulls/PullDiffPanel.svelte           | 272 -------
 .../repo/pulls/PullDiscussion.stories.svelte  |  85 ---
 .../repo/pulls/PullDiscussion.svelte          | 482 ++-----------
 .../repo/pulls/PullInfoBar.stories.svelte     |  36 -
 .../components/repo/pulls/PullInfoBar.svelte  |  88 ---
 .../repo/pulls/PullMetaPanel.svelte           | 190 -----
 .../pulls/PullReviewComment.stories.svelte    |  33 +
 .../repo/pulls/PullReviewComment.svelte       | 110 +++
 .../repo/pulls/PullReviewCommentEditor.svelte |  80 +++
 .../PullReviewCommentForm.stories.svelte      |  51 ++
 .../repo/pulls/PullReviewCommentForm.svelte   |  61 ++
 .../repo/pulls/PullVersionList.stories.svelte |  70 ++
 .../repo/pulls/PullVersionList.svelte         |  88 +++
 .../repo/tickets/Ticket.stories.svelte        |  81 +++
 .../lib/components/repo/tickets/Ticket.svelte | 113 +++
 .../components/repo/tickets/TicketBody.svelte |  17 +
 .../repo/tickets/TicketForm.stories.svelte    |  57 ++
 .../components/repo/tickets/TicketForm.svelte |  99 +++
 .../repo/tickets/TicketInfoBar.svelte         |  44 ++
 .../tickets/TicketStatePill.stories.svelte    |  27 +
 .../repo/tickets/TicketStatePill.svelte       |  64 ++
 .../components/ui/GraphCell.stories.svelte    | 125 ++++
 web/src/lib/components/ui/GraphCell.svelte    | 105 +++
 .../ui/RangeSelector.stories.svelte           |  68 ++
 .../lib/components/ui/RangeSelector.svelte    | 244 +++++++
 .../lib/components/ui/RangeSelectorRow.svelte |  31 +
 .../components/ui/SplitButton.stories.svelte  |  45 ++
 web/src/lib/components/ui/SplitButton.svelte  |  84 +++
 web/src/lib/components/ui/TabPanel.svelte     |   2 +-
 web/src/lib/components/ui/Tag.svelte          |   1 +
 .../[handle]/[repo]/pulls/[aturi]/+layout.ts  |  81 +++
 .../[aturi]/[version]/[[range]]/+page.svelte  | 677 +++++++++++-------
 .../[aturi]/[version]/[[range]]/+page.ts      | 128 +---
 58 files changed, 3743 insertions(+), 2769 deletions(-)
 delete mode 100644 web/src/lib/api/pullPage.ts
 create mode 100644 web/src/lib/components/comment/comments.test.ts
 delete mode 100644 web/src/lib/components/repo/pulls/PullActions.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullComment.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullComment.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullCommitList.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListDiff.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitRow.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullDiff.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullDiffFileList.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullDiffFiles.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullDiffPanel.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullDiffPanel.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullInfoBar.stories.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullInfoBar.svelte
 delete mode 100644 web/src/lib/components/repo/pulls/PullMetaPanel.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullReviewComment.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullVersionList.svelte
 create mode 100644 web/src/lib/components/repo/tickets/Ticket.stories.svelte
 create mode 100644 web/src/lib/components/repo/tickets/Ticket.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketBody.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketForm.stories.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketForm.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketInfoBar.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketStatePill.stories.svelte
 create mode 100644 web/src/lib/components/repo/tickets/TicketStatePill.svelte
 create mode 100644 web/src/lib/components/ui/GraphCell.stories.svelte
 create mode 100644 web/src/lib/components/ui/GraphCell.svelte
 create mode 100644 web/src/lib/components/ui/RangeSelector.stories.svelte
 create mode 100644 web/src/lib/components/ui/RangeSelector.svelte
 create mode 100644 web/src/lib/components/ui/RangeSelectorRow.svelte
 create mode 100644 web/src/lib/components/ui/SplitButton.stories.svelte
 create mode 100644 web/src/lib/components/ui/SplitButton.svelte
 create mode 100644 web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts

diff --git a/web/src/lib/api/gitmirror.ts b/web/src/lib/api/gitmirror.ts
index faa83692d..900245a68 100644
--- a/web/src/lib/api/gitmirror.ts
+++ b/web/src/lib/api/gitmirror.ts
@@ -1,6 +1,8 @@
 import { jsonGet } from "./_request";
 import { splitMessage, type CommitSummary } from "./repo";
+import type { Did } from "@atcute/lexicons/syntax";
 import type { BobbinContext, XrpcRequestInit } from "./client";
+import type { Revspec } from "./pullRoute";
 import type * as ShTangledGitDefs from "./lexicons/types/sh/tangled/git/defs";
 import type * as GetDiff from "./lexicons/types/sh/tangled/git/temp2/getDiff";
 import type * as GetInterdiff from "./lexicons/types/sh/tangled/git/temp2/getInterdiff";
@@ -22,6 +24,23 @@ export const listCommits = (
 	init?: XrpcRequestInit
 ) => jsonGet<ListCommits.$output>(ctx, LIST_COMMITS_NSID, params, init);
 
+const LOG_LIMIT = 100;
+
+// every commit a pull version brought, newest first
+export const listLog = async (
+	ctx: BobbinContext,
+	repo: Did,
+	range: Revspec,
+	init?: XrpcRequestInit
+): Promise<CommitSummary[]> => {
+	const page = await listCommits(
+		ctx,
+		{ repo, ranges: [`${range.base}..${range.head}`], limit: LOG_LIMIT },
+		init
+	);
+	return page.commits.map(toMirrorCommitSummary);
+};
+
 export type MirrorFileDiff = ShTangledGitDefs.FileDiff;
 
 export const getDiff = (ctx: BobbinContext, params: GetDiff.$params, init?: XrpcRequestInit) =>
diff --git a/web/src/lib/api/pull.ts b/web/src/lib/api/pull.ts
index 7db0e8843..92de3ed1b 100644
--- a/web/src/lib/api/pull.ts
+++ b/web/src/lib/api/pull.ts
@@ -31,10 +31,11 @@ export const putPull = async (
 	return { uri, cid, value: record };
 };
 
-export const editPull = async (
+/** read-modify-write against the live record */
+const updatePull = async (
 	agent: OAuthUserAgent,
 	rkey: string,
-	patch: { title: string; body: string }
+	mutate: (record: PullRecord) => PullRecord
 ): Promise<RecordView<PullRecord>> => {
 	const rpc = createClient(agent);
 	const existing = await ok(
@@ -46,7 +47,7 @@ export const editPull = async (
 			}
 		})
 	);
-	const record = { ...(existing.value as PullRecord), ...patch };
+	const record = mutate(existing.value as PullRecord);
 	const { uri, cid } = await ok(
 		rpc.call(putRecordSchema, {
 			input: {
@@ -61,6 +62,19 @@ export const editPull = async (
 	return { uri, cid, value: record };
 };
 
+export const editPull = (
+	agent: OAuthUserAgent,
+	rkey: string,
+	ticket: { title: string; body: string }
+): Promise<RecordView<PullRecord>> => updatePull(agent, rkey, (record) => ({ ...record, ...ticket }));
+
+export const resubmitPull = (
+	agent: OAuthUserAgent,
+	rkey: string,
+	version: PullRecord["versions"][number]
+): Promise<RecordView<PullRecord>> =>
+	updatePull(agent, rkey, (record) => ({ ...record, versions: [...record.versions, version] }));
+
 export const deletePull = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
 	const rpc = createClient(agent);
 	await ok(
@@ -139,3 +153,40 @@ export const keepCommit = async (
 	if (!response.ok) throw await toResponseError(response);
 	return (await response.json()) as { commit: string };
 };
+
+const MERGE_COMMIT_NSID = "sh.tangled.git.mergeCommit";
+
+export interface MergeCommitInput {
+	/** the repo and branch being merged into */
+	target: { repo: string; branch: string };
+	/** the repo the head commit lives in, and the commit itself */
+	source: { repo: string; commit: string };
+	style: "rebase";
+}
+
+/** Runs on the target repo's knot, which authorizes it with the repo's push acl. */
+export const mergeCommit = async (
+	agent: OAuthUserAgent,
+	knot: string,
+	input: MergeCommitInput,
+	fetch: typeof globalThis.fetch = globalThis.fetch
+): Promise<void> => {
+	const token = await mintServiceAuth(agent, {
+		aud: serviceDidForHost(knot),
+		lxm: MERGE_COMMIT_NSID
+	});
+	const response = await fetch(`https://${knot}/xrpc/${MERGE_COMMIT_NSID}`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			accept: "application/json",
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			target: { $type: `${MERGE_COMMIT_NSID}#target`, ...input.target },
+			source: { $type: `${MERGE_COMMIT_NSID}#source`, ...input.source },
+			style: input.style
+		})
+	});
+	if (!response.ok) throw await toResponseError(response);
+};
diff --git a/web/src/lib/api/pullDiff.test.ts b/web/src/lib/api/pullDiff.test.ts
index fa1d76fbe..18946fd00 100644
--- a/web/src/lib/api/pullDiff.test.ts
+++ b/web/src/lib/api/pullDiff.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { createBobbinClient } from "./client";
 import { gitTarget } from "./gitclient";
-import { loadPullDiff, loadPullInterdiff } from "./pullDiff";
+import { fetchSides, loadDiff, resolveChange } from "./pullDiff";
 import type { MirrorFileDiff } from "./gitmirror";
 
 const src = (path: string, extra: Partial<MirrorFileDiff["lhsSrc"]> = {}) => ({
@@ -23,12 +23,9 @@ const json = (body: unknown) =>
 		headers: { "content-type": "application/json" }
 	});
 
-const params = {
-	baseRepo: "did:plc:repo" as never,
-	baseCommit: "base",
-	headRepo: "did:plc:repo" as never,
-	headCommit: "head"
-};
+const REPO = "did:plc:repo" as never;
+
+const diffSpec = { kind: "diff", repo: REPO, version: { base: "base", head: "head" } } as const;
 
 // contents keyed by `<ref>:<path>`, so each side can differ
 const harness = (diffs: MirrorFileDiff[], contents: Record<string, string>) => {
@@ -45,23 +42,36 @@ const harness = (diffs: MirrorFileDiff[], contents: Record<string, string>) => {
 		return json({ path: url.searchParams.get("path"), content, encoding: "utf-8", size: 1 });
 	});
 
-	const ctx = createBobbinClient({ serviceUrl: "https://bobbin.test", fetch: fetchMock });
+	const deps = {
+		ctx: createBobbinClient({ serviceUrl: "https://bobbin.test", fetch: fetchMock })
+	};
 	const git = gitTarget(
 		{ bobbinUrl: "https://bobbin.test", knotMirrorUrl: "" } as never,
 		{ uri: "at://did:plc:alice/sh.tangled.repo/core", repoDid: "did:plc:repo" },
 		fetchMock
 	);
-	return { ctx, git, calls };
+	return { deps: { ...deps, git }, calls };
 };
 
-describe("loadPullDiff", () => {
-	it("pairs each file's two sides and sums the stat", async () => {
-		const { ctx, git, calls } = harness(
+const interdiffSpec = {
+	kind: "interdiff",
+	repo: REPO,
+	oldVersion: { base: "v1base", head: "v1head" },
+	version: { base: "v2base", head: "v2head" }
+} as const;
+
+const blobCalls = (calls: string[]) => calls.filter((path) => path.endsWith("repo.blob"));
+
+describe("loadDiff", () => {
+	it("describes every file without reading a single blob", async () => {
+		const { deps, calls } = harness(
 			[
 				{
 					lhsSrc: src("a.ts"),
 					rhsSrc: src("a.ts"),
-					hunks: [{ novelLhs: [0], novelRhs: [0, 1], lines: [{ lhs: 0, rhs: 0 }, { rhs: 1 }] }],
+					hunks: [
+						{ novelLhs: [0], novelRhs: [0, 1], lines: [{ lhs: 0, rhs: 0 }, { rhs: 1 }] }
+					],
 					hasSyntacticChanges: false
 				},
 				{
@@ -75,48 +85,60 @@ describe("loadPullDiff", () => {
 					rhsSrc: absent("gone.ts"),
 					hunks: [{ novelLhs: [0], novelRhs: [], lines: [{ lhs: 0 }] }],
 					hasSyntacticChanges: false
+				},
+				{
+					lhsSrc: src("old.ts"),
+					rhsSrc: src("moved.ts"),
+					hunks: [],
+					hasSyntacticChanges: false
 				}
 			],
-			{
-				"base:a.ts": "one\n",
-				"head:a.ts": "two\nthree\n",
-				"head:new.ts": "hello\n",
-				"base:gone.ts": "bye\n"
-			}
+			{}
 		);
 
-		const diff = await loadPullDiff(ctx, git, params, "unified");
+		const diff = await loadDiff(deps, diffSpec);
 
-		expect(diff.stat).toEqual({ insertions: 3, deletions: 2, files_changed: 3 });
+		expect(diff.stat).toEqual({ insertions: 3, deletions: 2, files_changed: 4 });
 		expect(diff.truncated).toBe(0);
-		expect(diff.files[0]).toMatchObject({
-			name: "a.ts",
-			kind: "changed",
-			oldFile: { name: "a.ts", contents: "one\n" },
-			newFile: { name: "a.ts", contents: "two\nthree\n" }
-		});
-		// a file with no left side gets an empty left side, not a failed fetch
-		expect(diff.files[1]).toMatchObject({
-			name: "new.ts",
-			kind: "new",
-			oldFile: { contents: "" },
-			newFile: { contents: "hello\n" }
-		});
-		expect(diff.files[2]).toMatchObject({
-			name: "gone.ts",
-			kind: "deleted",
-			oldFile: { contents: "bye\n" },
-			newFile: { contents: "" }
-		});
-		// two for the changed file, one each for the sides that exist: the absent side
-		// is never fetched, it would 404
-		expect(calls.filter((path) => path.endsWith("repo.blob"))).toHaveLength(4);
-		// the server prerenders each pair so the first paint ships highlighted
-		expect(diff.prerendered?.["a.ts→a.ts"]).toContain("three");
+		expect(diff.contents).toEqual({ oldRef: "base", newRef: "head" });
+		expect(diff.files.map((file) => file.kind)).toEqual([
+			"changed",
+			"new",
+			"deleted",
+			"renamed"
+		]);
+		expect(diff.files[3].oldName).toBe("old.ts");
+		// every renderable file carries the two sides a later fetch needs
+		expect(diff.files.every((file) => file.sides !== undefined)).toBe(true);
+		// the whole point: metadata costs one request, no blob reads at all
+		expect(blobCalls(calls)).toHaveLength(0);
+		expect(calls).toHaveLength(1);
+	});
+
+	it("reserves height from the hunk line count", async () => {
+		const { deps } = harness(
+			[
+				{
+					lhsSrc: src("a.ts"),
+					rhsSrc: src("a.ts"),
+					hunks: [
+						{ novelLhs: [], novelRhs: [], lines: [{ lhs: 0, rhs: 0 }, { rhs: 1 }] },
+						{ novelLhs: [], novelRhs: [], lines: [{ lhs: 5, rhs: 6 }] }
+					],
+					hasSyntacticChanges: false
+				}
+			],
+			{}
+		);
+
+		const diff = await loadDiff(deps, diffSpec);
+
+		// three line pairs plus two lines of per-hunk chrome
+		expect(diff.files[0].lines).toBe(7);
 	});
 
-	it("notes the files it cannot render instead of dropping them", async () => {
-		const { ctx, git } = harness(
+	it("notes the files it will never fetch, and leaves them no sides", async () => {
+		const { deps } = harness(
 			[
 				{
 					lhsSrc: src("logo.png", { isBinary: true }),
@@ -130,9 +152,11 @@ describe("loadPullDiff", () => {
 					hunks: [],
 					hasSyntacticChanges: false
 				},
+				// the payload carries each side's size, so an oversize file is noted
+				// without ever paying a request the blob endpoint would refuse
 				{
-					lhsSrc: src("gone.ts"),
-					rhsSrc: src("gone.ts"),
+					lhsSrc: src("huge.ts"),
+					rhsSrc: src("huge.ts", { size: (1 << 20) + 1 }),
 					hunks: [],
 					hasSyntacticChanges: false
 				}
@@ -140,30 +164,66 @@ describe("loadPullDiff", () => {
 			{}
 		);
 
-		const diff = await loadPullDiff(ctx, git, params, "unified");
+		const diff = await loadDiff(deps, diffSpec);
 
 		expect(diff.files.map((file) => file.note)).toEqual([
 			"This is a binary file and will not be displayed.",
 			"Submodule pointer, not shown.",
-			// both blob fetches 404
-			"Contents could not be loaded."
+			"This file is too large to display."
 		]);
-		expect(diff.files.every((file) => file.oldFile === undefined)).toBe(true);
+		expect(diff.files.every((file) => file.sides === undefined)).toBe(true);
+	});
+
+	it("marks an interdiff's left side as arriving inline", async () => {
+		const { deps, calls } = harness([], {});
+
+		const diff = await loadDiff(deps, interdiffSpec);
+
+		expect(diff.contents).toEqual({ inlineOld: true, newRef: "v2head" });
+		expect(blobCalls(calls)).toHaveLength(0);
 	});
 });
 
-describe("loadPullInterdiff", () => {
-	const interdiffParams = {
-		baseRepo: "did:plc:repo" as never,
-		baseCommit1: "v1base",
-		baseCommit2: "v1head",
-		headRepo: "did:plc:repo" as never,
-		headCommit1: "v2base",
-		headCommit2: "v2head"
-	};
+describe("fetchSides", () => {
+	it("reads both sides of a plain diff, and only the ones that exist", async () => {
+		const { deps, calls } = harness(
+			[
+				{
+					lhsSrc: src("a.ts"),
+					rhsSrc: src("a.ts"),
+					hunks: [{ novelLhs: [0], novelRhs: [0], lines: [{ lhs: 0, rhs: 0 }] }],
+					hasSyntacticChanges: false
+				},
+				{
+					lhsSrc: absent("new.ts"),
+					rhsSrc: src("new.ts"),
+					hunks: [{ novelLhs: [], novelRhs: [0], lines: [{ rhs: 0 }] }],
+					hasSyntacticChanges: false
+				}
+			],
+			{ "base:a.ts": "one\n", "head:a.ts": "two\nthree\n", "head:new.ts": "hello\n" }
+		);
+
+		const diff = await loadDiff(deps, diffSpec);
+		const changed = await fetchSides(deps, diff.contents, diff.files[0]);
+		const added = await fetchSides(deps, diff.contents, diff.files[1]);
+
+		expect(changed).toEqual({
+			oldFile: { name: "a.ts", contents: "one\n" },
+			newFile: { name: "a.ts", contents: "two\nthree\n" }
+		});
+		// a file with no left side gets an empty left side, not a failed fetch
+		expect(added).toEqual({
+			oldFile: { name: "new.ts", contents: "" },
+			newFile: { name: "new.ts", contents: "hello\n" }
+		});
+		// two for the changed file, one for the added file's right side: the absent
+		// side is never fetched, it would 404
+		expect(blobCalls(calls)).toHaveLength(3);
+	});
 
-	it("takes the left side inline and fetches only the right", async () => {
-		const { ctx, git, calls } = harness(
+	it("takes an interdiff's left side inline and fetches only the right", async () => {
+		const { deps, calls } = harness(
 			[
 				{
 					lhsSrc: src("a.ts", { content: "one\n" }),
@@ -178,31 +238,106 @@ describe("loadPullInterdiff", () => {
 					rhsSrc: src("b.ts"),
 					hunks: [],
 					hasSyntacticChanges: false
-				},
-				// an added file has no left side to inline in the first place
-				{
-					lhsSrc: absent("c.ts"),
-					rhsSrc: src("c.ts"),
-					hunks: [{ novelLhs: [], novelRhs: [0], lines: [{ rhs: 0 }] }],
-					hasSyntacticChanges: false
 				}
 			],
-			{ "v2head:a.ts": "two\n", "v2head:b.ts": "two\n", "v2head:c.ts": "new\n" }
+			{ "v2head:a.ts": "two\n", "v2head:b.ts": "two\n" }
 		);
 
-		const diff = await loadPullInterdiff(ctx, git, interdiffParams, "unified");
+		const diff = await loadDiff(deps, interdiffSpec);
 
-		expect(diff.files[0]).toMatchObject({
+		expect(await fetchSides(deps, diff.contents, diff.files[0])).toEqual({
 			oldFile: { name: "a.ts", contents: "one\n" },
 			newFile: { name: "a.ts", contents: "two\n" }
 		});
-		expect(diff.files[1].note).toBe("Contents could not be loaded.");
-		expect(diff.files[2]).toMatchObject({
-			kind: "new",
-			oldFile: { contents: "" },
-			newFile: { name: "c.ts", contents: "new\n" }
+		expect(await fetchSides(deps, diff.contents, diff.files[1])).toEqual({
+			note: "Contents could not be loaded."
 		});
 		// one blob per file, the right side only
-		expect(calls.filter((path) => path.endsWith("repo.blob"))).toHaveLength(3);
+		expect(blobCalls(calls)).toHaveLength(2);
+	});
+
+	it("notes a side the blob endpoint cannot serve", async () => {
+		const { deps } = harness(
+			[
+				{
+					lhsSrc: src("a.ts"),
+					rhsSrc: src("a.ts"),
+					hunks: [],
+					hasSyntacticChanges: false
+				}
+			],
+			{}
+		);
+
+		const diff = await loadDiff(deps, diffSpec);
+
+		expect(await fetchSides(deps, diff.contents, diff.files[0])).toEqual({
+			note: "Contents could not be loaded."
+		});
+	});
+
+	it("hands back a noted file's note rather than fetching it", async () => {
+		const { deps, calls } = harness(
+			[
+				{
+					lhsSrc: src("logo.png", { isBinary: true }),
+					rhsSrc: src("logo.png", { isBinary: true }),
+					hunks: [],
+					hasSyntacticChanges: false
+				}
+			],
+			{}
+		);
+
+		const diff = await loadDiff(deps, diffSpec);
+
+		expect(await fetchSides(deps, diff.contents, diff.files[0])).toEqual({
+			note: "This is a binary file and will not be displayed."
+		});
+		expect(blobCalls(calls)).toHaveLength(0);
+	});
+});
+
+describe("resolveChange", () => {
+	const bases = {
+		oldVersion: { base: "v1base", head: "v1head" },
+		version: { base: "v2base", head: "v2head" }
+	};
+	const older = [{ hash: "aaa", parent: "aaaparent", changeId: "kmzwvxqo" }] as never[];
+	const newer = [
+		{ hash: "bbb", parent: "bbbparent", changeId: "kmzwvxqo" },
+		{ hash: "ccc", parent: "cccparent", changeId: "nvtsyrpq" }
+	] as never[];
+
+	it("interdiffs the two commits carrying the change", () => {
+		expect(resolveChange("kmzwvxqo", older, newer, bases)).toEqual({
+			kind: "interdiff",
+			oldVersion: { base: "aaaparent", head: "aaa" },
+			version: { base: "bbbparent", head: "bbb" }
+		});
+	});
+
+	it("plain-diffs a change that only exists in the newer version", () => {
+		expect(resolveChange("nvtsyrpq", older, newer, bases)).toEqual({
+			kind: "diff",
+			version: { base: "cccparent", head: "ccc" }
+		});
+	});
+
+	it("reports a change the newer version does not have", () => {
+		expect(resolveChange("zzzzzzzz", older, newer, bases)).toEqual({ kind: "missing" });
+		// a repo without jj change ids can never match
+		expect(resolveChange("kmzwvxqo", older, [{ hash: "bbb" }] as never[], bases)).toEqual({
+			kind: "missing"
+		});
+	});
+
+	it("falls back to the version base for a root commit", () => {
+		const rootless = [{ hash: "aaa", changeId: "kmzwvxqo" }] as never[];
+		expect(resolveChange("kmzwvxqo", rootless, newer, bases)).toEqual({
+			kind: "interdiff",
+			oldVersion: { base: "v1base", head: "aaa" },
+			version: { base: "bbbparent", head: "bbb" }
+		});
 	});
 });
diff --git a/web/src/lib/api/pullDiff.ts b/web/src/lib/api/pullDiff.ts
index cb38b00ad..391f4d613 100644
--- a/web/src/lib/api/pullDiff.ts
+++ b/web/src/lib/api/pullDiff.ts
@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { MAX_INLINE_SIZE } from "./blob";
 import { blob } from "./gitclient";
 import {
@@ -7,166 +6,270 @@ import {
 	diffSideExists,
 	getDiff,
 	getInterdiff,
+	listLog,
 	type MirrorFileDiff,
 	type MirrorFileKind
 } from "./gitmirror";
-import { pierreDiffOptions, type DiffStyle } from "$lib/components/repo/pierre";
 import type { FileContents } from "@pierre/diffs";
+import type * as ShTangledGitDefs from "./lexicons/types/sh/tangled/git/defs";
+import type { Did } from "@atcute/lexicons/syntax";
 import type { BobbinContext } from "./client";
 import type { GitTarget } from "./gitclient";
 import type { DiffStat } from "./diff";
-import type * as GetDiff from "./lexicons/types/sh/tangled/git/temp2/getDiff";
-import type * as GetInterdiff from "./lexicons/types/sh/tangled/git/temp2/getInterdiff";
+import type { Revspec } from "./pullRoute";
+import type { CommitSummary } from "./repo";
 
-const FILE_LIMIT = 25;
+type DiffSrc = ShTangledGitDefs.DiffSrc;
+
+// a sanity ceiling, not a render budget: contents are fetched per card on demand,
+// so this only stops a pathological diff from queueing unbounded work
+const FILE_LIMIT = 300;
+
+// pierre renders roughly one row per line pair, plus a little chrome per hunk. only
+// used to reserve height under a pending card, so an estimate is enough
+const HUNK_CHROME_LINES = 2;
+
+// what the page asks for: one version's diff, or the interdiff between two of
+// them. `repo` is the source repo -- gitmirror unions both dids' object dirs
+// into one scratch repo, so a fork's head and its base share one did here
+export interface DiffSpec {
+	kind: "diff";
+	repo: Did;
+	version: Revspec;
+}
+
+export interface InterdiffSpec {
+	kind: "interdiff";
+	repo: Did;
+	oldVersion: Revspec;
+	version: Revspec;
+	// narrows the interdiff to the one commit carrying this change id
+	changeId?: string;
+}
+
+export type PullDiffSpec = DiffSpec | InterdiffSpec;
+
+export interface PullDiffDeps {
+	ctx: BobbinContext;
+	// where the blob text comes from; the diff payload carries line numbers only
+	git: GitTarget;
+}
 
 export interface PullDiffFile {
-	// stable across sides, used for anchors and the prerender map
+	// stable across sides, used for anchors
 	key: string;
 	name: string;
 	oldName?: string;
 	kind: MirrorFileKind;
 	stat: { insertions: number; deletions: number };
-	// set when there is nothing to render: binary, submodule, or over the cap
+	// rough rendered height, so a card can reserve space before its text lands
+	lines: number;
+	// set when there is nothing to render: binary, submodule, too large, or past
+	// the ceiling. a file with a note has no `sides` to fetch
 	note?: string;
-	oldFile?: FileContents;
-	newFile?: FileContents;
+	sides?: { lhs: DiffSrc; rhs: DiffSrc };
 }
 
+// where the two sides' text comes from. an interdiff's lhs is a tree gitmirror
+// rebased in memory for that one request, reachable by no ref, so its text can
+// only arrive inlined on the payload
+export type ContentsSource =
+	{ inlineOld?: false; oldRef: string; newRef: string } | { inlineOld: true; newRef: string };
+
 export interface PullDiff {
 	files: PullDiffFile[];
 	stat: DiffStat;
-	// how many files were listed but not fetched
+	// how many files were listed but left unrendered by the ceiling
 	truncated: number;
-	// server-prerendered shadow dom per file key, only for the initial ssr
-	prerendered?: Record<string, string>;
+	contents: ContentsSource;
 }
 
-// the diff endpoint answers metadata only — `diffSrc` is path/oid/size/flags and
-// a hunk is aligned line numbers — so the text comes from the blob endpoint and
+// one file's two sides, ready for pierre to diff
+export interface FilePair {
+	oldFile: FileContents;
+	newFile: FileContents;
+}
+
+export type FileContentsResult = FilePair | { note: string };
+
+export const loadDiff = (deps: PullDiffDeps, spec: PullDiffSpec): Promise<PullDiff> => {
+	if (spec.kind === "diff") return plainDiff(deps, spec.repo, spec.version);
+	if (!spec.changeId) return interdiff(deps, spec.repo, spec.oldVersion, spec.version);
+	return oneChange(deps, spec);
+};
+
+const plainDiff = async (deps: PullDiffDeps, repo: Did, version: Revspec): Promise<PullDiff> => {
+	const { diffs } = await getDiff(deps.ctx, {
+		baseRepo: repo,
+		baseCommit: version.base,
+		headRepo: repo,
+		headCommit: version.head
+	});
+	// the left side is read at `base`, while gitmirror diffs from
+	// merge_base(base, head). identical when base is the merge base, which is
+	// what a pull version stores
+	return buildDiff(diffs, { oldRef: version.base, newRef: version.head });
+};
+
+// an interdiff's right side is the new version's head tree, so it reads like any
+// other diff -- its left side comes inlined, see `ContentsSource`
+const interdiff = async (
+	deps: PullDiffDeps,
+	repo: Did,
+	oldVersion: Revspec,
+	version: Revspec
+): Promise<PullDiff> => {
+	const { diffs } = await getInterdiff(deps.ctx, {
+		baseRepo: repo,
+		baseCommit1: oldVersion.base,
+		baseCommit2: oldVersion.head,
+		headRepo: repo,
+		headCommit1: version.base,
+		headCommit2: version.head
+	});
+	return buildDiff(diffs, { inlineOld: true, newRef: version.head });
+};
+
+// a change id names the same logical commit in both versions, so narrowing to it
+// means interdiffing that one commit's span on each side
+const oneChange = async (deps: PullDiffDeps, spec: InterdiffSpec): Promise<PullDiff> => {
+	const [oldCommits, newCommits] = await Promise.all([
+		listLog(deps.ctx, spec.repo, spec.oldVersion),
+		listLog(deps.ctx, spec.repo, spec.version)
+	]);
+
+	const target = resolveChange(spec.changeId ?? "", oldCommits, newCommits, spec);
+	switch (target.kind) {
+		case "missing":
+			throw new Error("Can't find a commit with that change-id in this version.");
+		case "diff":
+			return plainDiff(deps, spec.repo, target.version);
+		case "interdiff":
+			return interdiff(deps, spec.repo, target.oldVersion, target.version);
+	}
+};
+
+export type ChangeTarget =
+	// the change is missing in the newer version, so there is nothing to interdiff
+	| { kind: "missing" }
+	// the change is new in the newer version, so we just diff since its parent
+	| { kind: "diff"; version: Revspec }
+	| { kind: "interdiff"; oldVersion: Revspec; version: Revspec };
+
+// a root commit has no parent to diff against, so it falls back to the base of
+// the version it belongs to
+const single = (commit: CommitSummary, fallbackBase: string): Revspec => ({
+	base: commit.parent ?? fallbackBase,
+	head: commit.hash
+});
+
+export const resolveChange = (
+	changeId: string,
+	oldCommits: readonly CommitSummary[],
+	newCommits: readonly CommitSummary[],
+	bases: { oldVersion: Revspec; version: Revspec }
+): ChangeTarget => {
+	const find = (commits: readonly CommitSummary[]) =>
+		commits.find((commit) => commit.changeId === changeId);
+
+	const to = find(newCommits);
+	if (!to) return { kind: "missing" };
+
+	const from = find(oldCommits);
+	if (!from) return { kind: "diff", version: single(to, bases.version.base) };
+
+	return {
+		kind: "interdiff",
+		oldVersion: single(from, bases.oldVersion.base),
+		version: single(to, bases.version.base)
+	};
+};
+
+// the diff endpoint answers metadata only -- `diffSrc` is path/oid/size/flags and
+// a hunk is aligned line numbers -- so the text comes from the blob endpoint and
 // pierre diffs the two sides itself
+const buildDiff = (diffs: MirrorFileDiff[], contents: ContentsSource): PullDiff => {
+	const stat: DiffStat = { insertions: 0, deletions: 0, files_changed: diffs.length };
+	const files = diffs.map((file, index): PullDiffFile => {
+		const fileStat = diffFileStat(file);
+		stat.insertions += fileStat.insertions;
+		stat.deletions += fileStat.deletions;
+
+		const kind = diffFileKind(file);
+		const name = file.rhsSrc.path || file.lhsSrc.path;
+		const base: PullDiffFile = {
+			key: `${file.lhsSrc.path}→${file.rhsSrc.path}`,
+			name,
+			oldName: kind === "renamed" ? file.lhsSrc.path : undefined,
+			kind,
+			stat: fileStat,
+			lines: renderedLines(file)
+		};
+
+		if (file.lhsSrc.isSubmodule || file.rhsSrc.isSubmodule) {
+			return { ...base, note: "Submodule pointer, not shown." };
+		}
+		if (file.lhsSrc.isBinary || file.rhsSrc.isBinary) {
+			return { ...base, note: "This is a binary file and will not be displayed." };
+		}
+		// the payload carries each side's size, so a file the blob endpoint would
+		// refuse never costs a request
+		if (tooLarge(file.lhsSrc) || tooLarge(file.rhsSrc)) {
+			return { ...base, note: "This file is too large to display." };
+		}
+		if (index >= FILE_LIMIT) {
+			return { ...base, note: "Not rendered: too many files in this diff." };
+		}
+
+		return { ...base, sides: { lhs: file.lhsSrc, rhs: file.rhsSrc } };
+	});
+
+	return { files, stat, truncated: Math.max(diffs.length - FILE_LIMIT, 0), contents };
+};
+
+const tooLarge = (src: DiffSrc): boolean => src.size > MAX_INLINE_SIZE;
+
+const renderedLines = (file: MirrorFileDiff): number =>
+	file.hunks.reduce((total, hunk) => total + hunk.lines.length + HUNK_CHROME_LINES, 0);
+
+// one side's text: inlined when gitmirror already sent it, otherwise a blob read.
+// `null` is a side that could not be read, which is not the same as an empty side
 const sideContents = async (
 	git: GitTarget,
-	ref: string,
-	src: MirrorFileDiff["lhsSrc"]
+	ref: string | undefined,
+	src: DiffSrc
 ): Promise<string | null> => {
 	// a side that doesn't exist at this ref is an empty side, not a failed fetch
 	if (!diffSideExists(src)) return "";
+	if (src.content !== undefined) return src.content;
+	// the rebased tree an interdiff diffs against is reachable by no ref, so a
+	// missing inline side there can never be recovered
+	if (ref === undefined) return null;
 	const output = await blob(git, { ref, path: src.path }, MAX_INLINE_SIZE).catch(() => null);
 	if (!output || output.encoding !== "utf-8") return null;
 	return output.content ?? "";
 };
 
-// both sides of one file, `null` for a side whose text could not be read
-type Sides = (file: MirrorFileDiff) => Promise<[string | null, string | null]>;
+// phase two: one file's text, fetched when its card asks for it
+export const fetchSides = async (
+	deps: PullDiffDeps,
+	contents: ContentsSource,
+	file: PullDiffFile
+): Promise<FileContentsResult> => {
+	const sides = file.sides;
+	if (!sides) return { note: file.note ?? "Contents could not be loaded." };
 
-const buildDiff = async (
-	diffs: MirrorFileDiff[],
-	style: DiffStyle,
-	sides: Sides
-): Promise<PullDiff> => {
-	const stat: DiffStat = { insertions: 0, deletions: 0, files_changed: diffs.length };
-	const files = await Promise.all(
-		diffs.map(async (file, index): Promise<PullDiffFile> => {
-			const fileStat = diffFileStat(file);
-			stat.insertions += fileStat.insertions;
-			stat.deletions += fileStat.deletions;
-
-			const kind = diffFileKind(file);
-			const name = file.rhsSrc.path || file.lhsSrc.path;
-			const base: PullDiffFile = {
-				key: `${file.lhsSrc.path}→${file.rhsSrc.path}`,
-				name,
-				oldName: kind === "renamed" ? file.lhsSrc.path : undefined,
-				kind,
-				stat: fileStat
-			};
-
-			if (file.lhsSrc.isSubmodule || file.rhsSrc.isSubmodule) {
-				return { ...base, note: "Submodule pointer, not shown." };
-			}
-			if (file.lhsSrc.isBinary || file.rhsSrc.isBinary) {
-				return { ...base, note: "This is a binary file and will not be displayed." };
-			}
-			if (index >= FILE_LIMIT) {
-				return { ...base, note: "Not rendered: too many files in this diff." };
-			}
-
-			const [oldContents, newContents] = await sides(file);
-			if (oldContents === null || newContents === null) {
-				return { ...base, note: "Contents could not be loaded." };
-			}
-
-			return {
-				...base,
-				// pierre infers the language from the name, same as the blob page
-				oldFile: { name: file.lhsSrc.path || name, contents: oldContents },
-				newFile: { name, contents: newContents }
-			};
-		})
-	);
+	const [oldContents, newContents] = await Promise.all([
+		sideContents(deps.git, contents.inlineOld ? undefined : contents.oldRef, sides.lhs),
+		sideContents(deps.git, contents.newRef, sides.rhs)
+	]);
+	if (oldContents === null || newContents === null) {
+		return { note: "Contents could not be loaded." };
+	}
 
 	return {
-		files,
-		stat,
-		truncated: Math.max(diffs.length - FILE_LIMIT, 0),
-		prerendered: await prerender(files, style)
+		// pierre infers the language from the name, same as the blob page
+		oldFile: { name: sides.lhs.path || file.name, contents: oldContents },
+		newFile: { name: file.name, contents: newContents }
 	};
 };
-
-export const loadPullDiff = async (
-	ctx: BobbinContext,
-	git: GitTarget,
-	params: GetDiff.$params,
-	style: DiffStyle
-): Promise<PullDiff> => {
-	const { diffs } = await getDiff(ctx, params);
-	return buildDiff(diffs, style, (file) =>
-		Promise.all([
-			// the left side is read at baseCommit, while gitmirror diffs from
-			// merge_base(base, head). identical when base is the merge base, which
-			// is what a pull version stores
-			sideContents(git, params.baseCommit, file.lhsSrc),
-			sideContents(git, params.headCommit, file.rhsSrc)
-		])
-	);
-};
-
-// an interdiff's right side is version2's head tree, so it reads like any other
-// diff — but its left side is a tree gitmirror rebased in memory for this one
-// request, reachable by no ref, so that text can only arrive inlined
-export const loadPullInterdiff = async (
-	ctx: BobbinContext,
-	git: GitTarget,
-	params: GetInterdiff.$params,
-	style: DiffStyle
-): Promise<PullDiff> => {
-	const { diffs } = await getInterdiff(ctx, params);
-	return buildDiff(diffs, style, async (file) => [
-		diffSideExists(file.lhsSrc) ? (file.lhsSrc.content ?? null) : "",
-		await sideContents(git, params.headCommit2, file.rhsSrc)
-	]);
-};
-
-// the first paint ships highlighted, like the commit page does
-const prerender = async (
-	files: PullDiffFile[],
-	style: DiffStyle
-): Promise<Record<string, string> | undefined> => {
-	if (browser) return undefined;
-	const { preloadMultiFileDiff } = await import("@pierre/diffs/ssr");
-	const options = pierreDiffOptions(style);
-	const entries = await Promise.all(
-		files
-			.filter((file) => file.oldFile && file.newFile)
-			.map(async (file) => {
-				const { prerenderedHTML } = await preloadMultiFileDiff({
-					oldFile: file.oldFile as FileContents,
-					newFile: file.newFile as FileContents,
-					options
-				});
-				return [file.key, prerenderedHTML] as const;
-			})
-	);
-	return Object.fromEntries(entries);
-};
diff --git a/web/src/lib/api/pullPage.ts b/web/src/lib/api/pullPage.ts
deleted file mode 100644
index d011280b3..000000000
--- a/web/src/lib/api/pullPage.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { listCommits, toMirrorCommitSummary } from "./gitmirror";
-import { loadPullDiff, loadPullInterdiff, type PullDiff } from "./pullDiff";
-import {
-	resolveChange,
-	type PullDiffView,
-	type PullInterdiffView,
-	type Revspec
-} from "./pullRoute";
-import type { Did } from "@atcute/lexicons/syntax";
-import type { BobbinContext } from "./client";
-import type { GitTarget } from "./gitclient";
-import type { CommitSummary } from "./repo";
-import type { DiffStyle } from "$lib/components/repo/pierre";
-
-const COMMIT_LIMIT = 100;
-
-export interface PullPageDeps {
-	ctx: BobbinContext;
-	git: GitTarget;
-	// todo: fork-based pulls read their head side from the source repo
-	repo: Did;
-	diffStyle: DiffStyle;
-}
-
-// what either mode hands the page
-export interface PullPageDiff {
-	commits: CommitSummary[];
-	commitsError?: string;
-	diff?: PullDiff;
-	diffError?: string;
-}
-
-const listLog = async (deps: PullPageDeps, range: Revspec): Promise<CommitSummary[]> => {
-	const page = await listCommits(deps.ctx, {
-		repo: deps.repo,
-		ranges: [`${range.base}..${range.head}`],
-		limit: COMMIT_LIMIT
-	});
-	return page.commits.map(toMirrorCommitSummary);
-};
-
-const message = (cause: unknown) => (cause instanceof Error ? cause.message : String(cause));
-
-const diffOf = (deps: PullPageDeps, spec: Revspec) =>
-	loadPullDiff(
-		deps.ctx,
-		deps.git,
-		{
-			baseRepo: deps.repo,
-			baseCommit: spec.base,
-			headRepo: deps.repo,
-			headCommit: spec.head
-		},
-		deps.diffStyle
-	);
-
-// both dids feed one scratch repo, so the pair is the same as a diff's
-const interdiffOf = (deps: PullPageDeps, a: Revspec, b: Revspec) =>
-	loadPullInterdiff(
-		deps.ctx,
-		deps.git,
-		{
-			baseRepo: deps.repo,
-			baseCommit1: a.base,
-			baseCommit2: a.head,
-			headRepo: deps.repo,
-			headCommit1: b.base,
-			headCommit2: b.head
-		},
-		deps.diffStyle
-	);
-
-// `version` is the whole round being viewed: the commit list always covers it,
-// whatever range the diff itself was narrowed to
-export const prepareDiff = async (
-	deps: PullPageDeps,
-	view: PullDiffView,
-	version: Revspec
-): Promise<PullPageDiff> => {
-	const result: PullPageDiff = { commits: [] };
-
-	// the two failures are independent — a dead log still leaves a readable diff
-	await Promise.all([
-		listLog(deps, version).then(
-			(commits) => (result.commits = commits),
-			(cause) => (result.commitsError = message(cause))
-		),
-		diffOf(deps, view).then(
-			(diff) => (result.diff = diff),
-			(cause) => (result.diffError = message(cause))
-		)
-	]);
-
-	return result;
-};
-
-export const prepareInterdiff = async (
-	deps: PullPageDeps,
-	view: PullInterdiffView
-): Promise<PullPageDiff> => {
-	const result: PullPageDiff = { commits: [] };
-
-	let priorCommits: CommitSummary[] = [];
-	try {
-		[result.commits, priorCommits] = await Promise.all([
-			listLog(deps, view.to),
-			view.changeId ? listLog(deps, view.from) : []
-		]);
-	} catch (cause) {
-		result.commitsError = message(cause);
-	}
-
-	try {
-		if (!view.changeId) {
-			result.diff = await interdiffOf(deps, view.from, view.to);
-		} else if (result.commitsError) {
-			result.diffError = result.commitsError;
-		} else {
-			const target = resolveChange(view.changeId, priorCommits, result.commits, {
-				from: view.from.base,
-				to: view.to.base
-			});
-			if (target.kind === "missing") {
-				result.diffError = "Can't find commit with given change-id.";
-			} else if (target.kind === "diff") {
-				result.diff = await diffOf(deps, target.spec);
-			} else {
-				result.diff = await interdiffOf(deps, target.from, target.to);
-			}
-		}
-	} catch (cause) {
-		result.diffError = message(cause);
-	}
-
-	return result;
-};
diff --git a/web/src/lib/api/pullRoute.test.ts b/web/src/lib/api/pullRoute.test.ts
index bf6e9a077..e10850ffe 100644
--- a/web/src/lib/api/pullRoute.test.ts
+++ b/web/src/lib/api/pullRoute.test.ts
@@ -1,13 +1,9 @@
 import { describe, expect, it } from "vitest";
 import {
-	activeCommitId,
-	activeVersion,
 	isRedirect,
 	parseDiffRoute,
 	parseInterdiffRoute,
 	parseRange,
-	resolveChange,
-	seeAll,
 	type PullView
 } from "./pullRoute";
 
@@ -44,36 +40,17 @@ describe("parseRange", () => {
 
 describe("parseDiffRoute", () => {
 	it("resolves latest and numbers to the version's own ends", () => {
-		expect(view("latest")).toEqual({
-			mode: "diff",
-			version: 1,
-			base: "b1",
-			head: "h1",
-			isDiffBase: true,
-			isDiffHead: true
-		});
+		expect(view("latest")).toEqual({ mode: "diff", version: 1, base: "b1", head: "h1" });
 		expect(view("0")).toMatchObject({ version: 0, base: "b0", head: "h0" });
 	});
 
 	it("takes an explicit range, and the base/head magic words", () => {
-		expect(view("1", "c1..c2")).toMatchObject({
-			base: "c1",
-			head: "c2",
-			isDiffBase: false,
-			isDiffHead: false
-		});
+		expect(view("1", "c1..c2")).toMatchObject({ base: "c1", head: "c2" });
 		// a bare rev is a head, and the words fall back to the version's ends
-		expect(view("1", "c2")).toMatchObject({ base: "b1", head: "c2", isDiffBase: true });
+		expect(view("1", "c2")).toMatchObject({ base: "b1", head: "c2" });
 		expect(view("1", "base..head")).toMatchObject({ base: "b1", head: "h1" });
 	});
 
-	it("marks see-all only when both sides defaulted", () => {
-		expect(seeAll(view("1"))).toBe(true);
-		expect(seeAll(view("1", "base..head"))).toBe(true);
-		expect(seeAll(view("1", "c1..c2"))).toBe(false);
-		expect(seeAll(view("1", "..c2"))).toBe(false);
-	});
-
 	it("redirects a bad version to latest and a bad range to the version", () => {
 		expect(parseDiffRoute(versions, "9")).toEqual({ redirect: "latest" });
 		expect(parseDiffRoute(versions, "foo")).toEqual({ redirect: "latest" });
@@ -86,8 +63,8 @@ describe("parseInterdiffRoute", () => {
 	it("parses both versions, resolves their ends, and takes the change filter", () => {
 		expect(view("0..1")).toEqual({
 			mode: "interdiff",
-			version1: 0,
-			version2: 1,
+			oldVersion: 0,
+			version: 1,
 			from: { base: "b0", head: "h0" },
 			to: { base: "b1", head: "h1" },
 			changeId: ""
@@ -101,51 +78,4 @@ describe("parseInterdiffRoute", () => {
 		expect(parseInterdiffRoute(versions, "foo..1")).toEqual({ redirect: "latest" });
 		expect(parseInterdiffRoute(versions, "..1")).toEqual({ redirect: "latest" });
 	});
-
-	it("reports the newer version as active, and see-all without a filter", () => {
-		expect(activeVersion(view("0..1"))).toBe(1);
-		expect(activeCommitId(view("0..1", "kmzwvxqo"))).toBe("kmzwvxqo");
-		expect(seeAll(view("0..1"))).toBe(true);
-		expect(seeAll(view("0..1", "kmzwvxqo"))).toBe(false);
-	});
-});
-
-describe("resolveChange", () => {
-	const bases = { from: "v1base", to: "v2base" };
-	const older = [{ hash: "aaa", parent: "aaaparent", changeId: "kmzwvxqo" }];
-	const newer = [
-		{ hash: "bbb", parent: "bbbparent", changeId: "kmzwvxqo" },
-		{ hash: "ccc", parent: "cccparent", changeId: "nvtsyrpq" }
-	];
-
-	it("interdiffs the two commits carrying the change", () => {
-		expect(resolveChange("kmzwvxqo", older, newer, bases)).toEqual({
-			kind: "interdiff",
-			from: { base: "aaaparent", head: "aaa" },
-			to: { base: "bbbparent", head: "bbb" }
-		});
-	});
-
-	it("plain-diffs a change that only exists in the newer version", () => {
-		expect(resolveChange("nvtsyrpq", older, newer, bases)).toEqual({
-			kind: "diff",
-			spec: { base: "cccparent", head: "ccc" }
-		});
-	});
-
-	it("reports a change the newer version does not have", () => {
-		expect(resolveChange("zzzzzzzz", older, newer, bases)).toEqual({ kind: "missing" });
-		// a repo without jj change ids can never match
-		expect(resolveChange("kmzwvxqo", older, [{ hash: "bbb" }], bases)).toEqual({ kind: "missing" });
-	});
-
-	it("falls back to the version base for a root commit", () => {
-		expect(
-			resolveChange("kmzwvxqo", [{ hash: "aaa", changeId: "kmzwvxqo" }], newer, bases)
-		).toEqual({
-			kind: "interdiff",
-			from: { base: "v1base", head: "aaa" },
-			to: { base: "bbbparent", head: "bbb" }
-		});
-	});
 });
diff --git a/web/src/lib/api/pullRoute.ts b/web/src/lib/api/pullRoute.ts
index 4d306c11e..3d5770414 100644
--- a/web/src/lib/api/pullRoute.ts
+++ b/web/src/lib/api/pullRoute.ts
@@ -30,19 +30,14 @@ export interface PullDiffView {
 	version: number;
 	base: string;
 	head: string;
-	// true when that side was defaulted, which is what makes the commit card's
-	// "See all changes" row the active one
-	isDiffBase: boolean;
-	isDiffHead: boolean;
 }
 
 export interface PullInterdiffView {
 	mode: "interdiff";
-	version1: number;
-	version2: number;
-	// the two versions' own ends, resolved here so nothing downstream re-indexes
-	from: Revspec;
-	to: Revspec;
+	oldVersion: number;
+	version: number;
+	from: Revspec; // oldVersion {base, head}
+	to: Revspec; // version {base, head}
 	// "" means all changes
 	changeId: string;
 }
@@ -72,17 +67,14 @@ export const parseInterdiffRoute = (
 	if (!range) return { redirect: "latest" };
 	const version1 = index(range.base, versions.length);
 	const version2 = index(range.head, versions.length);
-	// the appview indexes its versions raw here and panics on a bad number
 	if (version1 === null || version2 === null) return { redirect: "latest" };
 	const changeId = rangeParam === "all" ? "" : (rangeParam ?? "");
 	return {
 		mode: "interdiff",
-		version1,
-		version2,
-		// copied field by field: a version carries its comments too, and `view` is
-		// serialized to the page
-		from: { base: versions[version1].base, head: versions[version1].head },
-		to: { base: versions[version2].base, head: versions[version2].head },
+		oldVersion: version1,
+		version: version2,
+		from: versions[version1],
+		to: versions[version2],
 		changeId
 	};
 };
@@ -100,65 +92,12 @@ export const parseDiffRoute = (
 	const spec = parseRange(rangeParam ?? "");
 	if (!spec) return { redirect: "version" };
 
-	// `base` and `head` are the appview's magic words for the version's own ends
 	const isDiffBase = spec.base === "" || spec.base === "base";
 	const isDiffHead = spec.head === "" || spec.head === "head";
 	return {
 		mode: "diff",
 		version,
 		base: isDiffBase ? versions[version].base : spec.base,
-		head: isDiffHead ? versions[version].head : spec.head,
-		isDiffBase,
-		isDiffHead
+		head: isDiffHead ? versions[version].head : spec.head
 	};
 };
-
-// the version whose commits are listed, and whose card the rail highlights
-export const activeVersion = (view: PullView): number =>
-	view.mode === "diff" ? view.version : view.version2;
-
-// the commit row to mark, compared on short hashes like the appview does
-export const activeCommitId = (view: PullView): string =>
-	view.mode === "diff" ? view.head : view.changeId;
-
-export const seeAll = (view: PullView): boolean =>
-	view.mode === "diff" ? view.isDiffBase && view.isDiffHead : view.changeId === "";
-
-// only the fields a change-id lookup reads, so this module keeps no deps
-interface ChangeCommit {
-	hash: string;
-	parent?: string;
-	changeId?: string;
-}
-
-export type ChangeTarget =
-	| { kind: "missing" }
-	// the change is new in the second version, so there is nothing to interdiff
-	| { kind: "diff"; spec: Revspec }
-	| { kind: "interdiff"; from: Revspec; to: Revspec };
-
-// `/<v1>..<v2>/<change-id>` narrows an interdiff to the one commit carrying that
-// jj change id on each side, exactly as `appview/pulls/single.go` does
-export const resolveChange = (
-	changeId: string,
-	fromCommits: readonly ChangeCommit[],
-	toCommits: readonly ChangeCommit[],
-	bases: { from: string; to: string }
-): ChangeTarget => {
-	const find = (commits: readonly ChangeCommit[]) =>
-		commits.find((commit) => commit.changeId === changeId);
-	const to = find(toCommits);
-	// the row was picked from the second version's log, so this is a typed url
-	if (!to) return { kind: "missing" };
-
-	// the appview takes the first parent, which is the zero hash on a root commit
-	// and would be rejected; the version's own base stands in for that
-	const spec = (commit: ChangeCommit, base: string): Revspec => ({
-		base: commit.parent ?? base,
-		head: commit.hash
-	});
-	const from = find(fromCommits);
-	return from
-		? { kind: "interdiff", from: spec(from, bases.from), to: spec(to, bases.to) }
-		: { kind: "diff", spec: spec(to, bases.to) };
-};
diff --git a/web/src/lib/api/repo.ts b/web/src/lib/api/repo.ts
index 6856f7276..57f34a8c7 100644
--- a/web/src/lib/api/repo.ts
+++ b/web/src/lib/api/repo.ts
@@ -137,6 +137,13 @@ export const resolveForkRepoLabels = async (
 	return labels;
 };
 
+// org.tangled.review.patch record
+export interface PullSubmission {
+	head: string;
+	base: string;
+	createdAt: string;
+}
+
 export interface CommitSummary {
 	hash: string;
 	shortHash: string;
@@ -153,6 +160,8 @@ export interface CommitSummary {
 	changeId?: string;
 	// first parent, only filled in where a caller needs to link a commit range
 	parent?: string;
+	// pinned comments referencing this commit
+	commentCount?: number;
 }
 
 export const didFromSignature = (email: string): string | undefined =>
diff --git a/web/src/lib/components/comment/comments.test.ts b/web/src/lib/components/comment/comments.test.ts
new file mode 100644
index 000000000..5b7301339
--- /dev/null
+++ b/web/src/lib/components/comment/comments.test.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it } from "vitest";
+import {
+	countCommentsByCommit,
+	filterCommentsByCommit,
+	groupCommentsByVersion,
+	type CommentView
+} from "./comments";
+import type { CommitSummary } from "$lib/api/repo";
+
+const comment = (rkey: string, createdAt: string): CommentView => ({
+	uri: `at://did:plc:alice/sh.tangled.feed.comment/${rkey}`,
+	rkey,
+	authorDid: "did:plc:alice",
+	authorHandle: "alice.test",
+	createdAt,
+	body: rkey,
+	bodyHtml: null
+});
+
+const versions = [{ createdAt: "2026-01-01T00:00:00Z" }, { createdAt: "2026-01-03T00:00:00Z" }];
+
+const layout = (comments: CommentView[]) =>
+	groupCommentsByVersion(comments, versions).map((group) => [
+		group.version,
+		group.comments.map((c) => c.rkey)
+	]);
+
+describe("groupCommentsByVersion", () => {
+	it("files a comment under the newest version at or before it", () => {
+		// on the boundary belongs to that version, not the one before
+		expect(
+			layout([
+				comment("boundary", "2026-01-01T00:00:00Z"),
+				comment("during-v0", "2026-01-02T00:00:00Z"),
+				comment("after-v1", "2026-01-04T00:00:00Z")
+			])
+		).toEqual([
+			[0, ["boundary", "during-v0"]],
+			[1, ["after-v1"]]
+		]);
+	});
+
+	it("keeps a version with no comments, so the timeline stays complete", () => {
+		expect(layout([comment("only", "2026-01-02T00:00:00Z")])).toEqual([
+			[0, ["only"]],
+			[1, []]
+		]);
+	});
+
+	it("puts anything older than v0 in a headerless leading group", () => {
+		expect(layout([comment("early", "2025-12-31T00:00:00Z")])).toEqual([
+			[undefined, ["early"]],
+			[0, []],
+			[1, []]
+		]);
+	});
+
+	it("orders comments itself rather than trusting the caller", () => {
+		expect(
+			layout([
+				comment("late", "2026-01-04T00:00:00Z"),
+				comment("early", "2026-01-02T00:00:00Z")
+			])
+		).toEqual([
+			[0, ["early"]],
+			[1, ["late"]]
+		]);
+	});
+
+	it("has nothing to group without versions", () => {
+		expect(groupCommentsByVersion([comment("a", "2026-01-02T00:00:00Z")], [])).toEqual([
+			{ version: undefined, comments: [expect.objectContaining({ rkey: "a" })] }
+		]);
+	});
+});
+
+const pinned = (rkey: string, oid: string): CommentView => ({
+	...comment(rkey, "2026-01-02T00:00:00Z"),
+	embed: {
+		$type: "sh.tangled.embed.commit",
+		repo: "did:plc:alice",
+		commit: { $type: "sh.tangled.git.oid", oid }
+	}
+});
+
+describe("countCommentsByCommit", () => {
+	it("sums the comments pinned to one commit and skips the unpinned ones", () => {
+		const counts = countCommentsByCommit([
+			pinned("a", "cafe1234"),
+			pinned("b", "cafe1234"),
+			pinned("c", "beef5678"),
+			comment("loose", "2026-01-02T00:00:00Z")
+		]);
+		expect([...counts]).toEqual([
+			["cafe1234", 2],
+			["beef5678", 1]
+		]);
+	});
+
+	it("leaves an unpinned commit out rather than reporting 0", () => {
+		const counts = countCommentsByCommit([pinned("a", "cafe1234")]);
+		expect(counts.has("beef5678")).toBe(false);
+	});
+});
+
+const commit = (hash: string): CommitSummary => ({
+	hash,
+	shortHash: hash.slice(0, 8),
+	subject: hash,
+	body: "",
+	authorName: "alice",
+	authorEmail: "alice@test",
+	when: "2026-01-02T00:00:00Z"
+});
+
+describe("filterCommentsByCommit", () => {
+	const commits = [commit("cafe1234"), commit("beef5678")];
+	const rkeys = (comments: CommentView[]) => comments.map((c) => c.rkey);
+
+	it("keeps an unpinned comment and drops a pin the filter rejects", () => {
+		expect(
+			rkeys(
+				filterCommentsByCommit(
+					[
+						comment("loose", "2026-01-02T00:00:00Z"),
+						pinned("in", "cafe1234"),
+						pinned("out", "beef5678")
+					],
+					commits,
+					(c) => c.hash === "cafe1234"
+				)
+			)
+		).toEqual(["loose", "in"]);
+	});
+
+	it("drops a pin that names no known commit", () => {
+		// an older version's commit, or one a force-push dropped: never in range
+		expect(
+			rkeys(filterCommentsByCommit([pinned("gone", "d00d9999")], commits, () => true))
+		).toEqual([]);
+	});
+
+	it("filters nothing without a filter", () => {
+		const comments = [pinned("gone", "d00d9999"), comment("loose", "2026-01-02T00:00:00Z")];
+		expect(filterCommentsByCommit(comments, commits)).toBe(comments);
+	});
+});
diff --git a/web/src/lib/components/comment/comments.ts b/web/src/lib/components/comment/comments.ts
index 1eebfa0f2..525f3069d 100644
--- a/web/src/lib/components/comment/comments.ts
+++ b/web/src/lib/components/comment/comments.ts
@@ -1,3 +1,5 @@
+import type { CommentRecord } from "$lib/api/comment";
+import type { CommitSummary } from "$lib/api/repo";
 import type { ReactionGroup } from "$lib/components/reaction/reactions";
 
 export interface CommentView {
@@ -11,6 +13,8 @@ export interface CommentView {
 	editedAt?: string;
 	body: string;
 	bodyHtml: string | null;
+	// carried so an edit rewrites the record without dropping what it pinned
+	embed?: CommentRecord["embed"];
 	reactions?: ReactionGroup[];
 	deleted?: boolean;
 }
@@ -70,3 +74,64 @@ export function buildCommentThreads(inputs: ThreadInput[]): CommentThread[] {
 	for (const thread of list) thread.replies.sort(byCreatedAt);
 	return list;
 }
+
+export interface CommentGroup {
+	/** version this group follows; undefined for the comments that predate v0 */
+	version?: number;
+	comments: CommentView[];
+}
+
+/**
+ * A comment belongs to the newest version created at or before it. There is no
+ * "commented on version N" field on the record, and there will not be one --
+ * createdAt on both sides is the only ordering there is.
+ *
+ * `versions` must be in chronological order, as `pull.versions` is.
+ */
+export function groupCommentsByVersion(
+	comments: CommentView[],
+	versions: { createdAt: string }[]
+): CommentGroup[] {
+	// slot 0 holds anything older than v0 and renders without a header
+	const groups: CommentGroup[] = [
+		{ comments: [] },
+		...versions.map((_, version) => ({ version, comments: [] }))
+	];
+	// parsed rather than string-compared: a boundary must not turn on whether the
+	// two sides happen to share an offset or the same fractional precision
+	const at = (createdAt: string) => Date.parse(createdAt);
+	// both sides ascend, so one walk places every comment -- slot never goes back
+	let slot = 0;
+	for (const comment of [...comments].sort((a, b) => at(a.createdAt) - at(b.createdAt))) {
+		while (slot < versions.length && at(versions[slot].createdAt) <= at(comment.createdAt))
+			slot++;
+		groups[slot].comments.push(comment);
+	}
+	// v0 lands with the pull itself, so slot 0 is empty in practice -- drop it then
+	return groups.filter((group) => group.version !== undefined || group.comments.length);
+}
+
+export function countCommentsByCommit(comments: CommentView[]): Map<string, number> {
+	const counts = new Map<string, number>();
+	for (const { embed } of comments) {
+		if (!embed) continue;
+		const oid = embed.commit.oid;
+		counts.set(oid, (counts.get(oid) ?? 0) + 1);
+	}
+	return counts;
+}
+
+export function filterCommentsByCommit(
+	comments: CommentView[],
+	commits: CommitSummary[],
+	filter?: (commit: CommitSummary) => boolean
+): CommentView[] {
+	if (!filter) return comments;
+	return comments.filter((comment) => {
+		// full oids on both sides, so equality is enough -- no prefix matching
+		const oid = comment.embed?.commit.oid;
+		if (!oid) return true;
+		const commit = commits.find((c) => c.hash === oid);
+		return !!commit && filter(commit);
+	});
+}
diff --git a/web/src/lib/components/repo/pulls/PullActions.stories.svelte b/web/src/lib/components/repo/pulls/PullActions.stories.svelte
deleted file mode 100644
index 07b8cc00c..000000000
--- a/web/src/lib/components/repo/pulls/PullActions.stories.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import PullActions from "./PullActions.svelte";
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullActions",
-		component: PullActions,
-		tags: ["autodocs"],
-		args: {
-			roundIdx: 1,
-			latest: true,
-			subjectUri: "at://did:plc:bob/sh.tangled.pull/123",
-			markup: { repo: "tangled.org/core", ref: "master" }
-		}
-	});
-</script>
-
-<Story name="Latest" />
-<Story name="Older" args={{ roundIdx: 0, latest: false }} />
diff --git a/web/src/lib/components/repo/pulls/PullActions.svelte b/web/src/lib/components/repo/pulls/PullActions.svelte
index 21f46876f..b3e22e570 100644
--- a/web/src/lib/components/repo/pulls/PullActions.svelte
+++ b/web/src/lib/components/repo/pulls/PullActions.svelte
@@ -1,293 +1,91 @@
 <script module lang="ts">
-	export interface PullActionsState {
-		canPush?: boolean;
-		isAuthor?: boolean;
-		mergeCheck?: { error?: string; conflicts?: { filename?: string; reason?: string }[] };
-		upToDate?: boolean;
-		branchDelete?: { repo: string; branch: string };
-		isForkBased?: boolean;
-		hasPipeline?: boolean;
-		spindle?: string;
-		changedWorkflows?: string[];
-		pullId?: string;
-		targetBranch?: string;
-	}
+	export type MergeStyle = "rebase" | "manual";
+
+	const MERGE_STYLES: {
+		style: MergeStyle;
+		label: string;
+		buttonLabel: string;
+	}[] = [
+		{ style: "rebase", label: "Rebase", buttonLabel: "Merge (rebase)" },
+		{ style: "manual", label: "Manually mark as merged", buttonLabel: "Merge (manual)" }
+	];
 </script>
 
 <script lang="ts">
-	import Ban from "$icon/ban";
-	import CirclePlay from "$icon/circle-play";
-	import FileWarning from "$icon/file-warning";
-	import GitBranch from "$icon/git-branch";
+	import Circle from "$icon/circle";
 	import GitMerge from "$icon/git-merge";
-	import MessageSquarePlus from "$icon/message-square-plus";
-	import RefreshCcwDot from "$icon/refresh-ccw-dot";
-	import Reply from "$icon/reply";
-	import RotateCcw from "$icon/rotate-ccw";
-	import ShieldCheck from "$icon/shield-check";
-	import TriangleAlert from "$icon/triangle-alert";
-	import X from "$icon/x";
-	import { createAction } from "$lib/action.svelte";
-	import { putPullStatus } from "$lib/api/pull";
-	import { getAuth } from "$lib/auth.svelte";
-	import CommentEditor from "$lib/components/comment/CommentEditor.svelte";
+	import GitPullRequestClosed from "$icon/git-pull-request-closed";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import SplitButton from "$lib/components/ui/SplitButton.svelte";
 	import type { PullState } from "$lib/api/records";
-	import type { ThreadInput } from "$lib/components/comment/comments";
-	import type { MarkupContext } from "$lib/markup";
-	import type { PullStatePillVariants } from "./PullStatePill.svelte";
 
 	interface Props {
-		roundIdx: number;
-		// merge, resubmit, close and reopen only act on the newest version
-		latest: boolean;
-		state: PullStatePillVariants["state"];
-		markup: MarkupContext;
-		actions?: PullActionsState;
-		// the pull the comment hangs off; the record needs both to strongRef it
-		subjectUri: string;
-		subjectCid?: string;
-		onstatechange?: (state: PullState) => void;
-		onsubmitted?: (round: number, submitted: ThreadInput) => void;
+		pullState: PullState;
+		canChangeState?: boolean;
+		/** covers the manual merge too, which is a state change the repo side owns */
+		canMerge?: boolean;
+		/** the merge check found conflicts, so the git-side merges cannot run */
+		conflicted?: boolean;
+		onChangeState?: (state: PullState) => void;
+		onMerge?: (style: MergeStyle) => void;
+		loading?: boolean;
+		error?: string;
 	}
 
 	let {
-		roundIdx,
-		latest,
-		state: pullState,
-		markup,
-		actions,
-		subjectUri,
-		subjectCid,
-		onstatechange,
-		onsubmitted
+		pullState,
+		canChangeState = false,
+		canMerge = false,
+		conflicted = false,
+		onChangeState,
+		onMerge,
+		loading = false,
+		error
 	}: Props = $props();
 
-	const auth = getAuth();
-
-	let composing = $state(false);
-
-	// close and reopen are a single append-only status record; the caller flips the displayed
-	// state optimistically because bobbin will not serve the write back immediately
-	const transition = createAction(async (next: PullState) => {
-		const agent = auth.agent;
-		if (!agent) throw new Error("You must be signed in.");
-		await putPullStatus(agent, subjectUri, next);
-		onstatechange?.(next);
-	});
+	let mergeChoice = $state(0);
 
-	const busy = $derived(transition.loading);
-
-	const isOpen = $derived(pullState === "open");
-	const isClosed = $derived(pullState === "closed");
-	const isConflicted = $derived(
-		Boolean(actions?.mergeCheck?.error) || (actions?.mergeCheck?.conflicts?.length ?? 0) > 0
-	);
-	const canModify = $derived(actions?.isAuthor === true || actions?.canPush === true);
-	const showRunCi = $derived(
-		actions?.canPush === true &&
-			isOpen &&
-			latest &&
-			actions?.isForkBased === true &&
-			actions?.hasPipeline !== true &&
-			(actions?.spindle ?? "") !== ""
+	const options = $derived(
+		MERGE_STYLES.map((option) => ({
+			icon: GitMerge,
+			label: option.label,
+			buttonLabel: option.buttonLabel,
+			onclick: () => onMerge?.(option.style)
+		}))
 	);
-	const workflowsChanged = $derived((actions?.changedWorkflows?.length ?? 0) > 0);
+	const armed = $derived(MERGE_STYLES[Math.min(mergeChoice, MERGE_STYLES.length - 1)]);
 </script>
 
-{#if auth.currentUser}
-	<div id="action-card-{roundIdx}" class="relative flex flex-col gap-2 p-2">
-		{#if latest && actions?.upToDate === false}
-			<div
-				class="relative rounded-sm border border-border-default bg-background-warning-subtle px-6 py-2 shadow-xs"
+<div class="flex gap-1.5">
+	{#if pullState === "open"}
+		{#if canChangeState}
+			<Button
+				icon={GitPullRequestClosed}
+				disabled={loading}
+				onclick={() => onChangeState?.("closed")}
 			>
-				<div class="flex items-center gap-2 text-foreground-warning">
-					<TriangleAlert class="size-4" aria-hidden="true" />
-					<span class="font-medium"
-						>This branch has been updated, consider resubmitting</span
-					>
-				</div>
-			</div>
+				Close
+			</Button>
 		{/if}
-
-		{#if composing}
-			<CommentEditor
-				{subjectUri}
-				{subjectCid}
-				pullRoundIdx={roundIdx}
-				authorDid={auth.currentUser.did}
-				authorHandle={auth.currentUser.handle}
-				{markup}
-				rows={8}
-				placeholder="Add to the discussion..."
-				submitLabel="Reply"
-				submitIcon={Reply}
-				autofocus
-				onsubmitted={(submitted) => {
-					composing = false;
-					onsubmitted?.(roundIdx, submitted);
-				}}
-				oncancel={() => (composing = false)}
+		{#if canMerge}
+			<SplitButton
+				class="flex-1"
+				variant="primary"
+				bind:selected={mergeChoice}
+				{options}
+				{loading}
+				disabled={armed.style !== "manual" && conflicted}
 			/>
-		{:else}
-			<div id="actions-{roundIdx}" class="relative flex flex-wrap gap-2">
-				<Button
-					type="button"
-					size="small"
-					variant="ghost"
-					icon={MessageSquarePlus}
-					title="Toggle comment form"
-					onclick={() => (composing = true)}
-				>
-					<span>Comment</span>
-				</Button>
-
-				{#if actions?.branchDelete}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={GitBranch}
-						class="text-foreground-danger hover:text-foreground-danger-strong"
-						disabled
-					>
-						Delete branch
-					</Button>
-				{/if}
-
-				{#if showRunCi}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={CirclePlay}
-						popovertarget="run-ci-{actions?.pullId ?? roundIdx}"
-						popovertargetaction="toggle"
-						class="shrink-0"
-					>
-						Run CI
-					</Button>
-				{/if}
-
-				{#if actions?.canPush && isOpen && latest}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={GitMerge}
-						disabled={isConflicted}
-						title="Merge pull request"
-					>
-						Merge
-					</Button>
-				{/if}
-
-				{#if actions?.isAuthor && isOpen && latest}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={RotateCcw}
-						class="disabled:cursor-not-allowed disabled:opacity-50"
-						disabled={actions?.upToDate !== false}
-						title={actions?.upToDate !== false
-							? "Update this branch to resubmit this pull request"
-							: "Resubmit this pull request"}
-					>
-						Resubmit
-					</Button>
-				{/if}
-
-				{#if canModify && isOpen && latest}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={Ban}
-						disabled={busy}
-						onclick={() => !busy && transition.run("closed")}
-					>
-						{transition.args?.[0] === "closed" ? "Closing..." : "Close"}
-					</Button>
-				{/if}
-
-				{#if canModify && isClosed && latest}
-					<Button
-						type="button"
-						size="small"
-						variant="ghost"
-						icon={RefreshCcwDot}
-						disabled={busy}
-						onclick={() => !busy && transition.run("open")}
-					>
-						{transition.args?.[0] === "open" ? "Reopening..." : "Reopen"}
-					</Button>
-				{/if}
-			</div>
-
-			{#if transition.error}
-				<div id="pull-action-error"><ErrorAlert label={transition.error} /></div>
-			{/if}
 		{/if}
-
-		<!-- the merge check itself lives in the round header's `#mergecheck-banner`,
-		     the same place the appview swaps it into -->
-
-		{#if showRunCi}
-			<!-- the appview's runCiModal, a native popover -->
-			<div
-				id="run-ci-{actions?.pullId ?? roundIdx}"
-				popover="auto"
-				class="w-full overflow-visible rounded-sm border border-border-default bg-background-default p-4 text-foreground-default shadow-regular backdrop:bg-alpha-dark-50 md:w-96"
-			>
-				<form onsubmit={(e) => e.preventDefault()} class="flex flex-col gap-2">
-					<span class="p-0 typography-paragraph-large font-medium">Run CI</span>
-
-					<div class="flex items-center gap-2 text-foreground-warning">
-						<TriangleAlert class="size-4" aria-hidden="true" />
-						<span class="font-medium">
-							{workflowsChanged
-								? "Workflow files changed"
-								: "Workflow needs approval"}
-						</span>
-					</div>
-
-					{#if workflowsChanged}
-						<ul class="space-y-1 overflow-x-auto pl-6">
-							{#each actions?.changedWorkflows ?? [] as file (file)}
-								<li class="flex items-center whitespace-nowrap">
-									<FileWarning
-										class="mr-1.5 size-4 shrink-0 text-foreground-warning"
-										aria-hidden="true"
-									/>
-									<span class="typography-monospace-small">{file}</span>
-								</li>
-							{/each}
-						</ul>
-						<p class="typography-paragraph-small text-foreground-subtle">
-							Workflow files changed in this round. Are you sure you want to run CI?
-						</p>
-					{:else}
-						<p class="typography-paragraph-small text-foreground-subtle">
-							This fork-based pull request needs approval to run CI. Are you sure?
-						</p>
-					{/if}
-
-					<div class="flex gap-2 pt-2">
-						<Button
-							type="button"
-							icon={X}
-							class="w-1/2 text-foreground-danger hover:text-foreground-danger-strong"
-							popovertarget="run-ci-{actions?.pullId ?? roundIdx}"
-							popovertargetaction="hide"
-						>
-							Cancel
-						</Button>
-						<Button type="submit" icon={ShieldCheck} class="w-1/2">Approve</Button>
-					</div>
-				</form>
-			</div>
+	{:else}
+		{#if pullState === "closed" && canChangeState}
+			<Button icon={Circle} disabled={loading} onclick={() => onChangeState?.("open")}>
+				Reopen
+			</Button>
 		{/if}
-	</div>
-{/if}
+		<!-- TODO: wire branch deletion -->
+		<Button class="flex-1" icon={Circle}>Delete Branch</Button>
+	{/if}
+</div>
+<ErrorAlert label={error} />
diff --git a/web/src/lib/components/repo/pulls/PullComment.stories.svelte b/web/src/lib/components/repo/pulls/PullComment.stories.svelte
deleted file mode 100644
index bf4ece003..000000000
--- a/web/src/lib/components/repo/pulls/PullComment.stories.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { sampleComments, sampleMarkup } from "$lib/components/comment/sampleComments";
-	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
-	import PullComment from "./PullComment.svelte";
-	import type { ComponentProps } from "svelte";
-
-	type Args = ComponentProps<typeof PullComment>;
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullComment",
-		component: PullComment,
-		tags: ["autodocs"],
-		args: {
-			comment: sampleComments.byjp,
-			subjectUri: "at://did:plc:bob/sh.tangled.pull/123",
-			markup: sampleMarkup
-		}
-	});
-</script>
-
-<!-- the rail indents its comment gutter, so the component's own -ml-4 has room -->
-{#snippet comment(args: Args)}
-	<div class="w-104 max-w-full pl-10">
-		<MockAuthProvider>
-			<PullComment {...args} />
-		</MockAuthProvider>
-	</div>
-{/snippet}
-
-<Story name="Default">
-	{#snippet template(args)}{@render comment(args)}{/snippet}
-</Story>
-
-<!-- authored by the mock viewer: the pencil and trash appear on hover -->
-<Story name="Own comment" args={{ comment: sampleComments.mine }}>
-	{#snippet template(args)}{@render comment(args)}{/snippet}
-</Story>
-
-<Story
-	name="Edited"
-	args={{ comment: { ...sampleComments.cam, editedAt: "2024-10-04T09:00:00Z" } }}
->
-	{#snippet template(args)}{@render comment(args)}{/snippet}
-</Story>
-
-<Story name="Deleted" args={{ comment: { ...sampleComments.moth, deleted: true } }}>
-	{#snippet template(args)}{@render comment(args)}{/snippet}
-</Story>
diff --git a/web/src/lib/components/repo/pulls/PullComment.svelte b/web/src/lib/components/repo/pulls/PullComment.svelte
deleted file mode 100644
index fd696c8ab..000000000
--- a/web/src/lib/components/repo/pulls/PullComment.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts">
-	import { resolve } from "$app/paths";
-	import Pencil from "$icon/pencil";
-	import Trash2 from "$icon/trash-2";
-	import { createAction } from "$lib/action.svelte";
-	import { deleteComment } from "$lib/api/comment";
-	import { getAuth } from "$lib/auth.svelte";
-	import CommentEditor from "$lib/components/comment/CommentEditor.svelte";
-	import ReactionPicker from "$lib/components/reaction/ReactionPicker.svelte";
-	import Reactions from "$lib/components/reaction/Reactions.svelte";
-	import {
-		upsertViewerReaction,
-		withoutViewerReaction,
-		type ReactionKind
-	} from "$lib/components/reaction/reactions";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import type { CommentView, ThreadInput } from "$lib/components/comment/comments";
-	import type { MarkupContext } from "$lib/markup";
-	import type { Did } from "@atcute/lexicons/syntax";
-
-	// the appview's `fragments/comment/pullComment`: flat, no card, no replies.
-	// pull comments never thread — `submissionComments` just ranges over the round's
-	// comments — so this is deliberately not `CommentCard`, which is the issue UI
-	interface Props {
-		comment: CommentView;
-		// the pull the comment hangs off, which an edited record still points at
-		subjectUri: string;
-		subjectCid?: string;
-		markup: MarkupContext;
-		onedited?: (edited: ThreadInput) => void;
-		ondeleted?: (uri: string) => void;
-	}
-
-	let { comment, subjectUri, subjectCid, markup, onedited, ondeleted }: Props = $props();
-
-	const auth = getAuth();
-	const currentUser = $derived(auth?.currentUser ?? null);
-	const isAuthor = $derived(auth?.hasAccount(comment.authorDid) ?? false);
-
-	let editing = $state(false);
-	let reactions = $derived(comment.reactions ?? []);
-
-	// kinds the viewer reacted with, mapped to their record's rkey so the header
-	// picker can toggle one back off
-	const reacted = $derived(
-		new Map(
-			reactions
-				.filter((g) => g.isReacted && g.viewerRkey)
-				.map((g) => [g.kind, g.viewerRkey!] as [ReactionKind, string])
-		)
-	);
-
-	const onreacted = (kind: ReactionKind, rkey: string) => {
-		if (!currentUser) return;
-		reactions = upsertViewerReaction(reactions, kind, currentUser.handle, rkey);
-	};
-
-	const onunreacted = (kind: ReactionKind) => {
-		if (!currentUser) return;
-		reactions = reactions
-			.map((g) => (g.kind === kind ? withoutViewerReaction(g, currentUser.handle) : g))
-			.filter((g) => g.count > 0);
-	};
-
-	const remove = createAction(async () => {
-		if (!auth) return;
-		const agent = await auth.agentFor(comment.authorDid as Did);
-		await deleteComment(agent, comment.rkey);
-		ondeleted?.(comment.uri);
-	});
-
-	const handleDelete = () => {
-		if (!auth?.currentDid || remove.loading) return;
-		if (!confirm("Are you sure you want to delete your comment?")) return;
-		void remove.run();
-	};
-
-	const profileHref = (handle: string) => resolve(`/${handle}` as "/");
-</script>
-
-<div class="group/comment mx-auto -ml-4 flex w-full gap-2 py-4">
-	<div class="relative h-fit shrink-0">
-		<a href={profileHref(comment.authorHandle)} class="no-underline">
-			<Avatar
-				handle={comment.authorHandle}
-				did={comment.authorDid}
-				size="full"
-				class="size-8"
-			/>
-		</a>
-	</div>
-	<div class="min-w-0 flex-1">
-		<div
-			class="flex flex-wrap items-center gap-2 typography-paragraph-small text-foreground-subtle"
-		>
-			<a href={profileHref(comment.authorHandle)} class="no-underline hover:underline">
-				{comment.authorHandle}
-			</a>
-			<span class="select-none before:content-['·']"></span>
-			<!-- the timestamp is its own permalink target, which the rail's hash
-			     reveal in PullDiscussion looks for -->
-			<a
-				id="comment-{comment.rkey}"
-				href="#comment-{comment.rkey}"
-				class="no-underline hover:underline"
-			>
-				{#if comment.editedAt && !comment.deleted}
-					Edited <TimeAgo value={comment.editedAt} />
-				{:else}
-					<TimeAgo value={comment.createdAt} />
-				{/if}
-			</a>
-			{#if !comment.deleted}
-				<div
-					class="ml-auto flex items-center gap-4 opacity-0 group-hover/comment:opacity-100"
-				>
-					{#if currentUser}
-						<ReactionPicker
-							subjectUri={comment.uri}
-							{reacted}
-							{onreacted}
-							{onunreacted}
-						/>
-					{/if}
-					{#if isAuthor}
-						<button
-							type="button"
-							aria-label="Edit comment"
-							class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
-							onclick={() => (editing = true)}
-						>
-							<Pencil class="size-4" aria-hidden="true" />
-						</button>
-						<button
-							type="button"
-							aria-label="Delete comment"
-							disabled={remove.loading}
-							class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
-							onclick={handleDelete}
-						>
-							<Trash2 class="size-4" aria-hidden="true" />
-						</button>
-					{/if}
-				</div>
-			{/if}
-		</div>
-
-		<div class="comment-body">
-			{#if comment.deleted}
-				<div class="typography-paragraph-small text-foreground-subtle italic">
-					[deleted by author]
-				</div>
-			{:else if editing}
-				<CommentEditor
-					{subjectUri}
-					{subjectCid}
-					authorDid={comment.authorDid}
-					authorHandle={comment.authorHandle}
-					rkey={comment.rkey}
-					createdAt={comment.createdAt}
-					body={comment.body}
-					{markup}
-					rows={4}
-					placeholder="Edit your comment. Markdown is supported."
-					submitLabel="Save"
-					submitIcon={Pencil}
-					autofocus
-					onsubmitted={(edited) => {
-						editing = false;
-						onedited?.(edited);
-					}}
-					oncancel={() => (editing = false)}
-				/>
-			{:else}
-				{#if comment.bodyHtml}
-					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-					<article class="markup mb-1">{@html comment.bodyHtml}</article>
-				{:else}
-					<article class="mb-1 whitespace-pre-wrap text-foreground-default">
-						{comment.body}
-					</article>
-				{/if}
-				<Reactions
-					{reactions}
-					subjectUri={comment.uri}
-					onchange={(next) => (reactions = next)}
-				/>
-			{/if}
-			{#if remove.error}
-				<ErrorAlert label={remove.error} />
-			{/if}
-		</div>
-	</div>
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
deleted file mode 100644
index 87bfbc011..000000000
--- a/web/src/lib/components/repo/pulls/PullCommitList.stories.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import PullCommitList from "./PullCommitList.svelte";
-	import type { ResolvedPathname } from "$app/types";
-
-	const href = (path: string) => path as ResolvedPathname;
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullCommitList",
-		component: PullCommitList,
-		tags: ["autodocs"],
-		args: {
-			hrefFor: (commit) => href(`/tangled.org/core/pulls/at%3A%2F%2Fpull/1/${commit.shortHash}`),
-			seeAllHref: href("/tangled.org/core/pulls/at%3A%2F%2Fpull/1"),
-			seeAll: true,
-			activeCommitId: "",
-			commits: [
-				{
-					hash: "9a925efef6a0e6dfcd2d4317b4a1eee8752928b8",
-					shortHash: "9a925efe",
-					parent: "01117fddd3502c57bc20a65a75a66a4900d5d67d",
-					subject: "pulls: log the range between base and head",
-					body: "The lexicon walks back from a single ref, so the range is cut\nclient side.",
-					authorName: "alice",
-					authorEmail: "alice@example.com",
-					when: "2025-09-22T10:43:35Z",
-					changeId: "kmzwvxqouwxnvzsnvtwyprxlpuoymqrt"
-				},
-				{
-					hash: "01117fddd3502c57bc20a65a75a66a4900d5d67d",
-					shortHash: "01117fdd",
-					subject: "pulls: version cards",
-					body: "",
-					authorName: "alice",
-					authorEmail: "alice@example.com",
-					when: "2025-09-22T10:42:35Z"
-				}
-			]
-		}
-	});
-</script>
-
-<Story name="SeeAll" />
-<Story name="CommitSelected" args={{ seeAll: false, activeCommitId: "9a925efef6a0e6dfcd2d43" }} />
-<Story name="Empty" args={{ commits: [] }} />
diff --git a/web/src/lib/components/repo/pulls/PullCommitList.svelte b/web/src/lib/components/repo/pulls/PullCommitList.svelte
deleted file mode 100644
index c8c17da9d..000000000
--- a/web/src/lib/components/repo/pulls/PullCommitList.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-	import ArrowRight from "$icon/arrow-right";
-	import Ellipsis from "$icon/ellipsis";
-	import type { ResolvedPathname } from "$app/types";
-	import type { CommitSummary } from "$lib/components/repo/types";
-
-	interface Props {
-		commits: CommitSummary[];
-		// narrows the diff to one commit (or, in an interdiff, one change)
-		hrefFor: (commit: CommitSummary) => ResolvedPathname;
-		seeAllHref: ResolvedPathname;
-		// true when the whole version is on screen, which marks the first row
-		seeAll: boolean;
-		// the commit or change the diff is currently narrowed to
-		activeCommitId: string;
-	}
-
-	let { commits, hrefFor, seeAllHref, seeAll, activeCommitId }: Props = $props();
-
-	// the appview compares (and displays) hashes and change ids at 8 chars
-	const short = (id: string) => id.slice(0, 8);
-	const isActive = (commit: CommitSummary) =>
-		!seeAll &&
-		activeCommitId !== "" &&
-		(short(activeCommitId) === short(commit.hash) ||
-			(commit.changeId !== undefined && activeCommitId === commit.changeId));
-
-	const chip = "rounded-sm bg-background-inset px-1 py-0.5 typography-monospace-small";
-
-	let expanded = $state<Record<string, boolean>>({});
-</script>
-
-<div
-	class="grid grid-cols-1 divide-y divide-border-default overflow-clip rounded-sm border border-border-default"
->
-	<div class="px-2 typography-paragraph-small {seeAll ? 'bg-background-inset' : ''}">
-		<div class="relative">
-			{#if seeAll}
-				<ArrowRight class="absolute top-2.5 left-0 size-4 shrink-0" aria-hidden="true" />
-			{/if}
-			<div class="ml-6 py-2">
-				<a href={seeAllHref} class="no-underline hover:underline">See all changes</a>
-			</div>
-		</div>
-	</div>
-
-	{#each commits as commit (commit.hash)}
-		{@const active = isActive(commit)}
-		<div class="px-2 typography-paragraph-small {active ? 'bg-background-inset' : ''}">
-			<div class="relative">
-				{#if active}
-					<ArrowRight class="absolute top-2.5 left-0 size-4 shrink-0" aria-hidden="true" />
-				{/if}
-				<div class="ml-6 flex flex-wrap items-center gap-1 py-2">
-					<code class="{chip} text-foreground-muted">{commit.shortHash}</code>
-					{#if commit.changeId}
-						<code class="{chip} text-foreground-muted" title="jj change id: {commit.changeId}">
-							{short(commit.changeId)}
-						</code>
-					{/if}
-					<a href={hrefFor(commit)} class="min-w-0 no-underline hover:underline">
-						{commit.subject}
-					</a>
-					{#if commit.body}
-						<button
-							type="button"
-							class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
-							aria-expanded={expanded[commit.hash] === true}
-							aria-label="Toggle commit message"
-							onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
-						>
-							<Ellipsis class="size-3" aria-hidden="true" />
-						</button>
-					{/if}
-				</div>
-			</div>
-			{#if commit.body && expanded[commit.hash]}
-				<pre
-					class="mt-1 mb-2 ml-6 overflow-x-auto typography-monospace-small text-foreground-muted">{commit.body}</pre>
-			{/if}
-		</div>
-	{/each}
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListDiff.svelte b/web/src/lib/components/repo/pulls/PullCommitListDiff.svelte
new file mode 100644
index 000000000..85c18592a
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListDiff.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { CommitSummary } from "$lib/components/repo/types";
+
+	import type { CommitStatuses } from "$lib/api/commitStatuses";
+	import RangeSelector, {
+		type Range,
+		type RowActions
+	} from "$lib/components/ui/RangeSelector.svelte";
+	import Link from "$lib/components/ui/Link.svelte";
+	import PullCommitRow from "./PullCommitRow.svelte";
+
+	interface Props {
+		commits: CommitSummary[];
+		pipelineStatuses?: Promise<CommitStatuses>;
+		commitRange: Range;
+		oncommitCommits: (range: Range) => void;
+	}
+
+	let { commits, pipelineStatuses, commitRange, oncommitCommits }: Props = $props();
+
+	const items = $derived<(CommitSummary | "base")[]>([...commits, "base"]);
+</script>
+
+{#snippet row(i: number, item: CommitSummary | "base", actions: RowActions)}
+	{#if item === "base"}
+		<div
+			role="none"
+			onpointerenter={actions.onpointerenter}
+			onpointerleave={actions.onpointerleave}
+			class="flex h-10 flex-1 items-center px-3"
+		>
+			<Link onclick={actions.onclick}>Base</Link>
+		</div>
+	{:else}
+		<PullCommitRow
+			commit={item}
+			{pipelineStatuses}
+			highlight={commitRange.start == i}
+			{...actions}
+		/>
+	{/if}
+{/snippet}
+
+<RangeSelector
+	{items}
+	{row}
+	minLength={2}
+	muteFullSelection
+	bind:range={() => commitRange, (next) => oncommitCommits(next)}
+/>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
new file mode 100644
index 000000000..9001d4fe8
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Layers from "$icon/layers";
+	import Circle from "$icon/circle";
+	import type { CommitSummary } from "$lib/components/repo/types";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import PullVersionList from "./PullVersionList.svelte";
+	import { type Range } from "$lib/components/ui/RangeSelector.svelte";
+	import type { PullSubmission } from "$lib/api";
+
+	interface Props {
+		versions: PullSubmission[];
+		commits: CommitSummary[];
+		versionRange: Range;
+		oncommitVersions: (range: Range) => void;
+		actions?: Snippet;
+	}
+
+	let { versions, commits, versionRange, oncommitVersions, actions }: Props = $props();
+
+	const isInterdiff = $derived(versionRange.start != versionRange.end);
+</script>
+
+<div class="flex justify-between">
+	<div class="flex items-center gap-2 px-3 py-1">
+		<Layers class="size-4" />
+		<span>Commits</span>
+		<Tag color="gray" size="regular">{commits.length}</Tag>
+		{#if isInterdiff}
+			<Tag icon={Circle} color="highlight" size="regular">Interdiff</Tag>
+		{/if}
+	</div>
+	<div class="flex gap-2">
+		{#if actions}
+			{@render actions()}
+			<div role="separator" class="stretch border-r border-border-default"></div>
+		{/if}
+		<PullVersionList {versions} range={versionRange} oncommit={oncommitVersions} />
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
new file mode 100644
index 000000000..ff716c955
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { type Range } from "$lib/components/ui/RangeSelector.svelte";
+	import GraphCell, { type Band } from "$lib/components/ui/GraphCell.svelte";
+	import type { CommitStatuses } from "$lib/api/commitStatuses";
+	import type { CommitSummary } from "../types";
+	import PullCommitRow from "./PullCommitRow.svelte";
+	import Link from "$lib/components/ui/Link.svelte";
+
+	interface Props {
+		commits: CommitSummary[];
+		pipelineStatuses?: Promise<CommitStatuses>;
+		// "" is the whole interdiff, otherwise the one change it is narrowed to
+		changeId?: string;
+		onselect: (changeId: string) => void;
+	}
+
+	let { commits, pipelineStatuses, changeId = "", onselect }: Props = $props();
+
+	// where row `i` sits inside a range, so the row can style its own ends
+	function band(i: number, { start, end }: Range): Band {
+		if (i < start || i > end) return "none";
+		if (start === end) return "only";
+		if (i === start) return "first";
+		if (i === end) return "last";
+		return "middle";
+	}
+
+	const listRange = $derived({ start: 0, end: commits.length - 1 });
+
+	// a repo without jj change ids has no stable identity to narrow to, so those
+	// rows stay inert -- the url slot only carries a change id
+	const selected = $derived(
+		changeId ? commits.findIndex((commit) => commit.changeId === changeId) : -1
+	);
+
+	const muted = $derived(selected === -1);
+
+	let palette = $derived(
+		muted
+			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-subtle)"
+			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)"
+	);
+</script>
+
+{#snippet selectAllRow()}
+	{@const isSelected = selected < 0}
+	<div
+		class="relative flex min-h-10 rounded-sm outline-border-default {isSelected
+			? 'bg-background-inset outline'
+			: 'hover:bg-background-subtle'}"
+	>
+		<button
+			class="relative size-10 cursor-pointer"
+			aria-label="Show all changes"
+			onclick={() => onselect("")}
+		>
+			<GraphCell class="h-13" band="only" direction="horizontal" fill tail />
+			<GraphCell
+				band={isSelected ? "only" : "none"}
+				direction="horizontal"
+				fill
+				tail
+				style="--graph-line: var(--range-accent)"
+				class="absolute top-0 left-0 z-10"
+			/>
+		</button>
+		<div class="flex h-10 flex-1 items-center px-3">
+			<Link onclick={() => onselect("")}>All changes</Link>
+		</div>
+	</div>
+{/snippet}
+
+<div style={palette}>
+	{@render selectAllRow()}
+	<div class="my-2.5 border-b border-border-default"></div>
+	{#each commits as commit, i (i)}
+		{@const isSelected = selected === i}
+		{@const focusable = commit.changeId !== undefined}
+		{@const focus = focusable ? () => onselect(commit.changeId ?? "") : undefined}
+		<div
+			class="relative flex min-h-10 rounded-sm outline-border-default {isSelected
+				? 'bg-background-inset outline'
+				: focusable
+					? 'hover:bg-background-subtle'
+					: ''}"
+		>
+			<button
+				class="relative size-10 {focusable ? 'cursor-pointer' : 'cursor-default'}"
+				disabled={!focusable}
+				aria-label="Show changes in {commit.shortHash}"
+				onclick={focus}
+			>
+				<GraphCell band={band(i, listRange)} tail />
+				<GraphCell
+					band={isSelected || selected < 0 ? "only" : "none"}
+					direction="horizontal"
+					fill={isSelected}
+					tail
+					style="--graph-line: var(--range-accent)"
+					class="absolute top-0 left-0 z-10 h-13"
+				/>
+			</button>
+			<PullCommitRow
+				{commit}
+				{pipelineStatuses}
+				highlight={isSelected || (i == 0 && selected < 0)}
+				onclick={focus}
+			/>
+		</div>
+	{/each}
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitRow.svelte b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
new file mode 100644
index 000000000..e36af1c89
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitRow.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import Ellipsis from "$icon/ellipsis";
+	import MessageSquare from "$icon/message-square";
+	import type { CommitStatuses } from "$lib/api/commitStatuses";
+	import Link from "$lib/components/ui/Link.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import PipelineWorkflows from "../pipelines/PipelineWorkflows.svelte";
+	import type { CommitSummary } from "../types";
+
+	interface Props {
+		commit: CommitSummary;
+		pipelineStatuses?: Promise<CommitStatuses>;
+		highlight?: boolean;
+		onclick?: () => void;
+		onpointerenter?: () => void;
+		onpointerleave?: () => void;
+	}
+
+	let {
+		commit,
+		pipelineStatuses,
+		highlight = false,
+		onclick,
+		onpointerenter,
+		onpointerleave
+	}: Props = $props();
+
+	let expanded = $state(false);
+
+	const short = (id: string) => id.slice(0, 8);
+</script>
+
+<div class="flex min-h-10 flex-1 px-3">
+	<div class="min-h-10 flex-1">
+		<div class="flex items-center gap-1">
+			<div class="flex w-39 gap-2">
+				<Tag
+					class="py-1 typography-monospace-small"
+					color={highlight ? "highlight" : "default"}
+				>
+					{commit.shortHash}
+				</Tag>
+				{#if commit.changeId}
+					<Tag class="py-1 typography-monospace-small">{short(commit.changeId)}</Tag>
+				{/if}
+			</div>
+			<div role="none" {onpointerenter} {onpointerleave} class="flex h-10 items-center">
+				<Link {onclick}>{commit.subject}</Link>
+			</div>
+			{#if commit.body}
+				<button
+					type="button"
+					class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
+					aria-expanded={expanded}
+					aria-label="Toggle commit body"
+					onclick={() => (expanded = !expanded)}
+				>
+					<Ellipsis class="size-3" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+
+		{#if commit.body && expanded}
+			<pre
+				class="mb-2 rounded bg-background-subtle px-2 py-1 typography-monospace-regular whitespace-pre-wrap">{commit.body}</pre>
+		{/if}
+	</div>
+	<div class="flex h-10 items-center gap-2">
+		{#if pipelineStatuses}
+			{#await pipelineStatuses then statuses}
+				{#if statuses[commit.hash]}
+					<PipelineWorkflows
+						ownerHandle="tangled.org"
+						repoName="core"
+						size="mini"
+						variant="symbol"
+						pipeline={statuses[commit.hash]}
+					/>
+				{/if}
+			{/await}
+			<span class="after:text-foreground-muted after:content-['·']"></span>
+		{/if}
+		{#if commit.commentCount !== undefined}
+			<div class="flex items-center gap-2 px-1 text-foreground-muted">
+				<span>{commit.commentCount}</span>
+				<MessageSquare class="size-4" />
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
new file mode 100644
index 000000000..aef98f8a1
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import PanelLeftClose from "$icon/panel-left-close";
+	import ListTree from "$icon/list-tree";
+	import LoaderCircle from "$icon/loader-circle";
+	import SquareSplitHorizontal from "$icon/square-split-horizontal";
+	import SquareSplitVertical from "$icon/square-split-vertical";
+	import FoldVertical from "$icon/fold-vertical";
+	import UnfoldVertical from "$icon/unfold-vertical";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
+	import PullDiffFileList from "./PullDiffFileList.svelte";
+	import PullFileTree from "./PullFileTree.svelte";
+	import type { DiffStyle } from "$lib/components/repo/pierre";
+	import type { PullDiff, PullDiffDeps } from "$lib/api/pullDiff";
+
+	interface Props {
+		deps: PullDiffDeps;
+		// absent while loading and on an error
+		diff?: PullDiff;
+		error?: string;
+		loading?: boolean;
+	}
+
+	let { deps, diff, error, loading = false }: Props = $props();
+
+	let treeOpen = $state(true);
+	let allOpen = $state(true);
+	let diffStyle = $state<DiffStyle>("unified");
+</script>
+
+<div class="flex gap-4 rounded-sm border border-border-default bg-background-default px-4 pb-4">
+	<!-- file tree -->
+	{#if treeOpen}
+		<aside
+			class="sticky top-17 flex max-h-[calc(100vh-5.25rem)] flex-col self-start"
+			style="width: 17rem;"
+		>
+			<div class="sticky top-17 bg-background-default py-4">
+				<Button icon={PanelLeftClose} onclick={() => (treeOpen = false)} />
+			</div>
+			<div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small">
+				{#if diff}
+					<PullFileTree files={diff.files} />
+				{:else if loading}
+					<span class="text-foreground-subtle">
+						<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
+						loading...
+					</span>
+				{/if}
+			</div>
+		</aside>
+	{/if}
+	<!-- diffs -->
+	<div class="min-w-0 flex-1">
+		<div
+			class="sticky top-17 z-20 flex items-center justify-between bg-background-default py-4"
+		>
+			<div class="flex items-center gap-3">
+				{#if !treeOpen}
+					<Button icon={ListTree} onclick={() => (treeOpen = true)} />
+				{/if}
+				{#if diff}
+					<DiffStatPill stat={diff.stat} />
+					<span class="text-foreground-muted">
+						{diff.files.length} changed {diff.files.length === 1 ? "file" : "files"}
+						{#if diff.truncated > 0}
+							&middot; {diff.truncated} not rendered
+						{/if}
+					</span>
+				{/if}
+			</div>
+			<div class="flex gap-2">
+				<Button
+					icon={allOpen ? FoldVertical : UnfoldVertical}
+					title={allOpen ? "Collapse all" : "Expand all"}
+					onclick={() => (allOpen = !allOpen)}
+				/>
+				<ButtonGroup>
+					<Button
+						icon={SquareSplitVertical}
+						title="Unified diff"
+						onclick={() => (diffStyle = "unified")}
+						{...segmentProps(diffStyle !== "split")}
+					>
+						Unified
+					</Button>
+					<Button
+						icon={SquareSplitHorizontal}
+						title="Split diff"
+						onclick={() => (diffStyle = "split")}
+						{...segmentProps(diffStyle === "split")}
+					>
+						Split
+					</Button>
+				</ButtonGroup>
+			</div>
+		</div>
+
+		{#if error}
+			<div
+				class="flex min-h-32 items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-4 typography-paragraph-regular text-foreground-danger"
+			>
+				<span>{error}</span>
+			</div>
+		{:else if diff && diff.files.length > 0}
+			<!-- a new diff gets a fresh fill pool by teardown, so a version switch
+			     cannot show the previous version's text under a repeated file path -->
+			{#key diff}
+				<PullDiffFileList {deps} {diff} {diffStyle} {allOpen} />
+			{/key}
+		{:else if diff}
+			<div
+				class="flex min-h-32 items-center justify-center rounded-sm border border-border-default bg-background-info-subtle p-4 typography-paragraph-regular text-foreground-info"
+			>
+				<span>No change between two revisions.</span>
+			</div>
+		{:else}
+			<div class="flex min-h-32 items-center justify-center text-foreground-subtle">
+				<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
new file mode 100644
index 000000000..42d57ffd6
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { FileDiff } from "@pierre/diffs";
+	import ChevronDown from "$icon/chevron-down";
+	import ChevronRight from "$icon/chevron-right";
+	import LoaderCircle from "$icon/loader-circle";
+	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
+	import {
+		clearPierreRender,
+		pierreDiffOptions,
+		type DiffStyle
+	} from "$lib/components/repo/pierre";
+	import type { Action } from "svelte/action";
+	import type { FileContentsResult, PullDiffFile } from "$lib/api/pullDiff";
+
+	interface Props {
+		file: PullDiffFile;
+		// absent until this card's text has been fetched
+		contents?: FileContentsResult;
+		diffStyle?: DiffStyle;
+		open?: boolean;
+		// registers this card with the list's shared IntersectionObserver
+		observe: Action<HTMLElement>;
+	}
+
+	let { file, contents, diffStyle = "unified", open = true, observe }: Props = $props();
+
+	// the diff endpoint hands us metadata only, so unlike the commit page we give
+	// pierre both file contents and let it diff them — which is also what makes
+	// hunk expansion work
+	const pair = $derived(contents && "oldFile" in contents ? contents : undefined);
+	const note = $derived(
+		file.note ?? (contents && "note" in contents ? contents.note : undefined)
+	);
+
+	let host: HTMLElement | undefined = $state();
+	let mounted: FileDiff | undefined;
+	// the style at hydrate time, so the options effect skips right after a mount
+	let mountedStyle: DiffStyle | undefined;
+
+	$effect(() => {
+		const element = host;
+		const files = pair;
+		if (!element || !files) return;
+		// the diff arrives on the client, so there is never ssr output to keep: a
+		// reload lands here with the previous render, drop it
+		clearPierreRender(element);
+		const instance = new FileDiff(pierreDiffOptions(untrack(() => diffStyle)), undefined, true);
+		instance.hydrate({
+			oldFile: files.oldFile,
+			newFile: files.newFile,
+			fileContainer: element
+		});
+		mounted = instance;
+		mountedStyle = untrack(() => diffStyle);
+		return () => {
+			instance.cleanUp();
+			mounted = undefined;
+		};
+	});
+
+	// a remount would lose expanded hunks, so a style change re-renders in place
+	$effect(() => {
+		const style = diffStyle;
+		const instance = mounted;
+		const files = pair;
+		if (!instance || !files || style === mountedStyle) return;
+		mountedStyle = style;
+		instance.setOptions(pierreDiffOptions(style));
+		instance.render({ oldFile: files.oldFile, newFile: files.newFile, forceRender: true });
+	});
+</script>
+
+<div use:observe data-diff-key={file.key} class="overflow-clip rounded-sm drop-shadow-xs">
+	<details id="file-{file.name}" {open} class="group w-full">
+		<!-- sticks below the diff toolbar, which is itself sticky at top-17 -->
+		<summary class="sticky top-34.5 z-10 cursor-pointer list-none bg-background-default">
+			<div
+				class="flex justify-between rounded-sm border border-border-default bg-background-default group-open:rounded-b-none"
+			>
+				<div class="flex items-center gap-2 p-2 typography-paragraph-small">
+					<ChevronRight
+						class="inline size-4 shrink-0 group-open:hidden"
+						aria-hidden="true"
+					/>
+					<ChevronDown
+						class="hidden size-4 shrink-0 group-open:inline"
+						aria-hidden="true"
+					/>
+					<DiffStatPill stat={{ ...file.stat, files_changed: 1 }} />
+					<span>{file.name}</span>
+				</div>
+				<!-- the appview's `Reviewed` checkbox goes here, with the localStorage
+				     review state that drives it -->
+				<div class="flex items-center gap-2 px-2"></div>
+			</div>
+		</summary>
+
+		<div class="overflow-clip rounded-b-sm border-x border-b border-border-default">
+			{#if note}
+				<div class="p-4 text-center typography-paragraph-small text-foreground-placeholder">
+					{note}
+				</div>
+			{:else if pair}
+				<diffs-container class="diffs-container" bind:this={host}></diffs-container>
+			{:else}
+				<!-- reserves roughly the height the text will take, so the page does not
+				     jump as cards below the fold fill in. capped, a 5000-line file
+				     should not reserve a screen-mile -->
+				<div
+					style="min-height: min({file.lines}lh, 40rem)"
+					class="flex items-start justify-center p-4 text-foreground-subtle"
+				>
+					<LoaderCircle class="size-4 animate-spin" aria-hidden="true" />
+				</div>
+			{/if}
+		</div>
+	</details>
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileList.svelte b/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
new file mode 100644
index 000000000..6324a58a6
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiffFileList.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { SvelteSet } from "svelte/reactivity";
+	import PullDiffFileCard from "./PullDiffFileCard.svelte";
+	import {
+		fetchSides,
+		type FileContentsResult,
+		type PullDiff,
+		type PullDiffDeps,
+		type PullDiffFile
+	} from "$lib/api/pullDiff";
+	import type { Action } from "svelte/action";
+	import type { DiffStyle } from "$lib/components/repo/pierre";
+
+	interface Props {
+		deps: PullDiffDeps;
+		diff: PullDiff;
+		diffStyle?: DiffStyle;
+		allOpen?: boolean;
+	}
+
+	let { deps, diff, diffStyle = "unified", allOpen = true }: Props = $props();
+
+	// the payload carries no line text, so each card's two sides are fetched on
+	// demand as it nears the viewport, a few at a time. the caller wraps this
+	// component in `{#key diff}`, so a new diff gets a fresh pool by teardown --
+	// `blob()` takes no abort signal, and results of a torn-down pool go nowhere
+	const CONCURRENCY = 6;
+	// far enough ahead that a card is usually filled by the time it is scrolled to
+	const LOOKAHEAD = "1500px 0px";
+
+	const byKey = $derived(new Map(diff.files.map((file) => [file.key, file])));
+
+	let entries = $state<Record<string, FileContentsResult>>({});
+	let running = 0;
+	const queue: PullDiffFile[] = [];
+	// nothing renders from this, it only keeps a repeated intersection from
+	// queueing the same file twice
+	const started = new SvelteSet<string>();
+
+	const pump = () => {
+		while (running < CONCURRENCY && queue.length > 0) void fill(queue.shift() as PullDiffFile);
+	};
+
+	const fill = async (file: PullDiffFile) => {
+		running++;
+		entries[file.key] = await fetchSides(deps, diff.contents, file).catch(() => ({
+			note: "Contents could not be loaded."
+		}));
+		running--;
+		pump();
+	};
+
+	const want = (key: string) => {
+		if (started.has(key)) return;
+		started.add(key);
+		const file = byKey.get(key);
+		// a binary, submodule, oversize or over-the-ceiling file carries its note
+		// already, there is nothing to fetch for it
+		if (file?.sides) {
+			queue.push(file);
+			pump();
+		}
+	};
+
+	// one observer for the whole list -- a card each would be hundreds of them.
+	// built on first use, so it cannot race the cards' actions and never runs on
+	// the server, where actions do not run at all
+	let io: IntersectionObserver | undefined;
+	const observer = () =>
+		(io ??= new IntersectionObserver(
+			(records) => {
+				for (const record of records) {
+					if (!record.isIntersecting) continue;
+					// only the action observes, so every target is one of our cards
+					const key = (record.target as HTMLElement).dataset.diffKey;
+					if (key) want(key);
+				}
+			},
+			{ rootMargin: LOOKAHEAD }
+		));
+
+	const observe: Action<HTMLElement> = (node) => {
+		const active = observer();
+		active.observe(node);
+		return { destroy: () => active.unobserve(node) };
+	};
+
+	$effect(() => () => {
+		io?.disconnect();
+		io = undefined;
+	});
+</script>
+
+<div class="space-y-4">
+	{#each diff.files as file (file.key)}
+		<PullDiffFileCard
+			{file}
+			contents={entries[file.key]}
+			{diffStyle}
+			open={allOpen}
+			{observe}
+		/>
+	{/each}
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiffFiles.svelte b/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
deleted file mode 100644
index 731431589..000000000
--- a/web/src/lib/components/repo/pulls/PullDiffFiles.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-	import { untrack } from "svelte";
-	import { FileDiff } from "@pierre/diffs";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronRight from "$icon/chevron-right";
-	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
-	import {
-		clearPierreRender,
-		pierreDiffOptions,
-		type DiffStyle
-	} from "$lib/components/repo/pierre";
-	import type { PullDiffFile } from "$lib/api/pullDiff";
-
-	interface Props {
-		files: PullDiffFile[];
-		diffStyle?: DiffStyle;
-		// server-prerendered shadow dom per file key, only for the initial ssr
-		prerendered?: Record<string, string>;
-		// every card follows the toolbar's expand/collapse
-		allOpen?: boolean;
-	}
-
-	let { files, diffStyle = "unified", prerendered = {}, allOpen = true }: Props = $props();
-
-	// the diff endpoint hands us metadata only, so unlike the commit page we give
-	// pierre both file contents and let it diff them — which is also what makes
-	// hunk expansion work
-	let rendered = $derived(files.filter((file) => file.oldFile && file.newFile));
-
-	let container: HTMLElement | undefined = $state();
-	let mounted: { instance: FileDiff; file: PullDiffFile }[] = [];
-	// the style at hydrate time, so the options effect skips right after a mount
-	let mountedStyle: DiffStyle | undefined;
-
-	const mountAll = (source: PullDiffFile[]) => {
-		const host = container;
-		if (!host) return;
-		for (const { instance } of mounted) instance.cleanUp();
-
-		// one host per renderable file, in document order
-		const hosts = host.querySelectorAll<HTMLElement>("diffs-container");
-		mounted = source.map((file, index) => {
-			const element = hosts[index];
-			const html = prerendered[file.key];
-			// the html prop never reaches the client, pierre marks its ssr output
-			// with data-dehydrated. a style toggle lands here with the previous
-			// style's render: drop it, keep pierre's own style nodes
-			if (html === undefined && element.shadowRoot?.querySelector("[data-dehydrated]") == null)
-				clearPierreRender(element);
-			const instance = new FileDiff(pierreDiffOptions(untrack(() => diffStyle)), undefined, true);
-			instance.hydrate({
-				oldFile: file.oldFile,
-				newFile: file.newFile,
-				fileContainer: element,
-				prerenderedHTML: html
-			});
-			return { instance, file };
-		});
-		mountedStyle = untrack(() => diffStyle);
-	};
-
-	$effect(() => {
-		mountAll(rendered);
-		return () => {
-			for (const { instance } of mounted) instance.cleanUp();
-			mounted = [];
-		};
-	});
-
-	// a remount would lose expanded hunks, so a style change re-renders in place
-	$effect(() => {
-		const style = diffStyle;
-		if (style === mountedStyle) return;
-		mountedStyle = style;
-		for (const { instance, file } of mounted) {
-			instance.setOptions(pierreDiffOptions(style));
-			instance.render({ oldFile: file.oldFile, newFile: file.newFile, forceRender: true });
-		}
-	});
-</script>
-
-<div bind:this={container} class="space-y-4">
-	{#each files as file (file.key)}
-		<div class="overflow-clip rounded-sm drop-shadow-xs">
-			<details id="file-{file.name}" open={allOpen} class="group w-full">
-				<summary class="sticky top-12 z-10 cursor-pointer list-none bg-background-canvas">
-					<div
-						class="flex justify-between rounded-sm border border-border-default bg-background-default group-open:rounded-b-none"
-					>
-						<div class="flex items-center gap-2 p-2 typography-paragraph-small">
-							<ChevronRight class="inline size-4 shrink-0 group-open:hidden" aria-hidden="true" />
-							<ChevronDown class="hidden size-4 shrink-0 group-open:inline" aria-hidden="true" />
-							<DiffStatPill stat={{ ...file.stat, files_changed: 1 }} />
-							<span>{file.name}</span>
-						</div>
-						<!-- the appview's `Reviewed` checkbox goes here, with the localStorage
-						     review state that drives it -->
-						<div class="flex items-center gap-2 px-2"></div>
-					</div>
-				</summary>
-
-				<div class="overflow-clip rounded-b-sm border-x border-b border-border-default">
-					{#if file.note}
-						<div class="p-4 text-center typography-paragraph-small text-foreground-placeholder">
-							{file.note}
-						</div>
-					{:else}
-						<diffs-container class="diffs-container">
-							{#if prerendered[file.key]}
-								<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
-								<template shadowrootmode="open">{@html prerendered[file.key]}</template>
-							{/if}
-						</diffs-container>
-					{/if}
-				</div>
-			</details>
-		</div>
-	{/each}
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiffPanel.stories.svelte b/web/src/lib/components/repo/pulls/PullDiffPanel.stories.svelte
deleted file mode 100644
index bd8246bfc..000000000
--- a/web/src/lib/components/repo/pulls/PullDiffPanel.stories.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import PullDiffPanel from "./PullDiffPanel.svelte";
-	import type { ResolvedPathname } from "$app/types";
-
-	const href = (path: string) => path as ResolvedPathname;
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullDiffPanel",
-		component: PullDiffPanel,
-		tags: ["autodocs"],
-		args: {
-			isInterdiff: false,
-			version: 1,
-			baseLabel: "base",
-			headLabel: "head",
-			diffHref: href("/tangled.org/core/pulls/at%3A%2F%2Fpull/1"),
-			interdiffHref: href("/tangled.org/core/pulls/at%3A%2F%2Fpull/0..1"),
-			canInterdiff: true,
-			diff: {
-				files: [
-					{
-						key: "src/main.rs→src/main.rs",
-						name: "src/main.rs",
-						kind: "changed" as const,
-						stat: { insertions: 12, deletions: 3 },
-						note: "Contents could not be loaded."
-					}
-				],
-				stat: { insertions: 12, deletions: 3, files_changed: 1 },
-				truncated: 0
-			}
-		}
-	});
-</script>
-
-<Story name="Diff" />
-<Story name="CommitRange" args={{ baseLabel: "01117fdd", headLabel: "9a925efe" }} />
-<Story
-	name="Interdiff"
-	args={{
-		isInterdiff: true,
-		version1: 0,
-		version2: 1,
-		baseLabel: undefined,
-		headLabel: undefined
-	}}
-/>
-<Story name="FirstVersion" args={{ version: 0, canInterdiff: false }} />
-<Story name="Loading" args={{ diff: undefined }} />
diff --git a/web/src/lib/components/repo/pulls/PullDiffPanel.svelte b/web/src/lib/components/repo/pulls/PullDiffPanel.svelte
deleted file mode 100644
index 5fd8576e2..000000000
--- a/web/src/lib/components/repo/pulls/PullDiffPanel.svelte
+++ /dev/null
@@ -1,272 +0,0 @@
-<script lang="ts">
-	import ArrowRight from "$icon/arrow-right";
-	import ChevronsLeftRightEllipsis from "$icon/chevrons-left-right-ellipsis";
-	import Diff from "$icon/diff";
-	import FoldVertical from "$icon/fold-vertical";
-	import LoaderCircle from "$icon/loader-circle";
-	import MessageSquareMore from "$icon/message-square-more";
-	import PanelLeftClose from "$icon/panel-left-close";
-	import PanelLeftOpen from "$icon/panel-left-open";
-	import SquareSplitHorizontal from "$icon/square-split-horizontal";
-	import SquareSplitVertical from "$icon/square-split-vertical";
-	import UnfoldVertical from "$icon/unfold-vertical";
-	import { resizable } from "$lib/actions/resizable";
-	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
-	import PullDiffFiles from "./PullDiffFiles.svelte";
-	import PullFileTree from "./PullFileTree.svelte";
-	import type { ResolvedPathname } from "$app/types";
-	import type { DiffStyle } from "$lib/components/repo/pierre";
-	import type { PullDiff } from "$lib/api/pullDiff";
-
-	interface Props {
-		// absent while loading, on an error, or in interdiff mode
-		diff?: PullDiff;
-		diffError?: string;
-		diffStyle?: DiffStyle;
-		isInterdiff: boolean;
-		// `v1`, or the two ends of an interdiff
-		version: number;
-		version1?: number;
-		version2?: number;
-		// a diff shows base → head, an interdiff shows which change it is filtered to
-		baseLabel?: string;
-		headLabel?: string;
-		changeLabel?: string;
-		diffHref: ResolvedPathname;
-		interdiffHref: ResolvedPathname;
-		// version 0 has nothing before it to compare against
-		canInterdiff: boolean;
-		// the rail is a sibling of this panel, so the page owns its open state
-		discussionOpen?: boolean;
-		onToggleDiscussion?: () => void;
-	}
-
-	let {
-		diff,
-		diffError,
-		diffStyle = "unified",
-		isInterdiff,
-		version,
-		version1,
-		version2,
-		baseLabel,
-		headLabel,
-		changeLabel,
-		diffHref,
-		interdiffHref,
-		canInterdiff,
-		discussionOpen = true,
-		onToggleDiscussion
-	}: Props = $props();
-
-	let filesOpen = $state(true);
-	let allOpen = $state(true);
-	let filesPanel = $state<HTMLElement>();
-
-	// `inline-block box-content min-h-[1lh]` keeps a chip from collapsing when its
-	// text is empty
-	const chip =
-		"inline-block box-content min-h-[1lh] border border-border-default px-1 py-0.5 typography-monospace-small text-foreground-default";
-</script>
-
-<!--
-	skipped from the appview: the per-file `Reviewed` state, the active-file
-	scroll highlight, and the line-quote button (pierre renders into a shadow dom
-	with no per-line anchors to hang it off)
--->
-<div class="group/diff-layout min-h-[50vh]">
-	<header
-		class="sticky top-0 z-20 flex flex-col bg-background-canvas px-1 md:flex-row md:justify-between"
-	>
-		<div class="flex h-12 items-center gap-2">
-			<div class="hidden md:block">
-				<Button
-					type="button"
-					size="small"
-					variant="ghost"
-					icon={filesOpen ? PanelLeftClose : PanelLeftOpen}
-					title="Toggle filetree panel"
-					onclick={() => (filesOpen = !filesOpen)}
-				/>
-			</div>
-
-			{#if diff}
-				<DiffStatPill stat={diff.stat} />
-			{:else}
-				<div class="flex items-center typography-monospace-regular font-mono">
-					<span
-						class="rounded-l-sm bg-background-success-subtle p-1 text-foreground-success select-none"
-					>
-						+<LoaderCircle class="inline-flex size-3 animate-spin" aria-hidden="true" />
-					</span>
-					<span
-						class="rounded-r-sm bg-background-danger-subtle p-1 text-foreground-danger select-none"
-					>
-						-<LoaderCircle class="inline-flex size-3 animate-spin" aria-hidden="true" />
-					</span>
-				</div>
-			{/if}
-
-			<span class="typography-paragraph-small">
-				{isInterdiff ? "Interdiff" : "Diff"}
-				<span
-					class="ml-1 typography-paragraph-mini after:ml-1 after:text-foreground-disabled after:content-['|']"
-				>
-					{#if isInterdiff}
-						<code class={chip}>v{version1}</code>
-						<ArrowRight class="inline-flex size-3" aria-hidden="true" />
-						<code class={chip}>v{version2}</code>
-					{:else}
-						<code class={chip}>v{version}</code>
-					{/if}
-				</span>
-				<a
-					href="#commits"
-					class="inline-flex min-h-8 items-center justify-center gap-1.5 rounded-sm px-2 py-1 typography-paragraph-mini text-foreground-default no-underline hover:bg-background-inset hover:no-underline"
-				>
-					{#if baseLabel !== undefined && headLabel !== undefined}
-						<code class={chip}>{baseLabel}</code>
-						<ArrowRight class="inline-flex size-3" aria-hidden="true" />
-						<code class={chip}>{headLabel}</code>
-					{:else if changeLabel}
-						<code class={chip}>{changeLabel}</code>
-					{:else}
-						<span class="px-1">All changes</span>
-					{/if}
-				</a>
-			</span>
-		</div>
-
-		<div class="flex h-12 items-center gap-2">
-			<Button
-				type="button"
-				size="small"
-				icon={allOpen ? FoldVertical : UnfoldVertical}
-				title="Expand/Collapse diffs"
-				class="font-normal normal-case"
-				onclick={() => (allOpen = !allOpen)}
-			>
-				<span class="hidden md:inline">{allOpen ? "Collapse all" : "Expand all"}</span>
-			</Button>
-
-			<div class="grow md:hidden"></div>
-
-			<ButtonGroup>
-				<Button
-					href={"?diff=unified" as "/"}
-					data-sveltekit-replacestate
-					data-sveltekit-noscroll
-					size="small"
-					icon={SquareSplitVertical}
-					title="Unified diff"
-					{...segmentProps(diffStyle !== "split")}
-				>
-					Unified
-				</Button>
-				<Button
-					href={"?diff=split" as "/"}
-					data-sveltekit-replacestate
-					data-sveltekit-noscroll
-					size="small"
-					icon={SquareSplitHorizontal}
-					title="Split diff"
-					{...segmentProps(diffStyle === "split")}
-				>
-					Split
-				</Button>
-			</ButtonGroup>
-
-			<ButtonGroup>
-				<Button size="small" icon={Diff} href={diffHref} {...segmentProps(!isInterdiff)}>Diff</Button>
-				{#if canInterdiff}
-					<Button size="small" href={interdiffHref} {...segmentProps(isInterdiff)}>
-						<ChevronsLeftRightEllipsis class="size-4 shrink-0 rotate-90" aria-hidden="true" />
-						Interdiff
-					</Button>
-				{:else}
-					<Button type="button" size="small" {...segmentProps(isInterdiff)} disabled>
-						<ChevronsLeftRightEllipsis class="size-4 shrink-0 rotate-90" aria-hidden="true" />
-						Interdiff
-					</Button>
-				{/if}
-			</ButtonGroup>
-
-			{#if !discussionOpen}
-				<Button
-					type="button"
-					size="small"
-					variant="ghost"
-					icon={MessageSquareMore}
-					title="Toggle discussion panel"
-					class="hidden lg:inline-flex"
-					onclick={onToggleDiscussion}
-				/>
-			{/if}
-		</div>
-	</header>
-
-	<div class="flex">
-		<aside
-			bind:this={filesPanel}
-			class="w-1/5 max-w-[40%] {filesOpen ? 'hidden md:block' : 'hidden'}"
-		>
-			<div
-				class="sticky top-12 rounded-sm border border-border-default bg-background-default shadow-xs"
-			>
-				<div class="max-h-[calc(100vh-3rem-0.5rem)] overflow-y-auto pb-2">
-					<section class="w-full px-6 py-2 typography-paragraph-small">
-						<div class="mb-8">
-							{#if diff}
-								<PullFileTree files={diff.files} />
-							{:else}
-								<span class="text-foreground-subtle">
-									<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
-									loading...
-								</span>
-							{/if}
-						</div>
-					</section>
-				</div>
-			</div>
-		</aside>
-
-		{#if filesOpen}
-			<div
-				class="group sticky top-12 hidden max-h-screen w-4 shrink-0 cursor-col-resize flex-col items-center justify-center md:flex"
-				role="separator"
-				aria-orientation="vertical"
-				aria-label="Resize file tree"
-				use:resizable={{ target: () => filesPanel, direction: "before" }}
-			>
-				<div
-					class="h-16 w-1 rounded-full bg-border-strong transition-all group-hover:h-24 group-hover:bg-foreground-subtle group-[.resizing]:h-24"
-				></div>
-			</div>
-		{/if}
-
-		<div class="min-w-0 flex-1">
-			{#if diffError}
-				<div
-					class="flex min-h-32 w-full items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-4 typography-paragraph-regular text-foreground-danger"
-				>
-					<span>{diffError}</span>
-				</div>
-			{:else if diff && diff.files.length > 0}
-				<PullDiffFiles files={diff.files} prerendered={diff.prerendered} {diffStyle} {allOpen} />
-			{:else if diff}
-				<div
-					class="flex min-h-32 w-full items-center justify-center rounded-sm border border-border-default bg-background-info-subtle p-4 typography-paragraph-regular text-foreground-info"
-				>
-					<span>No change between two revisions.</span>
-				</div>
-			{:else}
-				<span class="text-foreground-subtle">
-					<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
-					loading...
-				</span>
-			{/if}
-		</div>
-	</div>
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte
deleted file mode 100644
index f52a8c099..000000000
--- a/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { sampleComments } from "$lib/components/comment/sampleComments";
-	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
-	import PullDiscussion from "./PullDiscussion.svelte";
-	import type { ResolvedPathname } from "$app/types";
-	import type { ComponentProps } from "svelte";
-
-	type Args = ComponentProps<typeof PullDiscussion>;
-
-	const href = (path: string) => path as ResolvedPathname;
-
-	// the same two versions the pull page's loader fixtures describe
-	const versions = [
-		{
-			base: "01117fdd",
-			head: "f3c356fc",
-			createdAt: "2026-07-28T10:12:00Z",
-			comments: [sampleComments.byjp, sampleComments.cam, sampleComments.samuel]
-		},
-		{
-			base: "01117fdd",
-			head: "9a925efe",
-			createdAt: "2026-08-04T16:40:00Z",
-			comments: [sampleComments.knowtheory, sampleComments.mine]
-		}
-	];
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullDiscussion",
-		component: PullDiscussion,
-		tags: ["autodocs"],
-		argTypes: {
-			state: {
-				control: { type: "inline-radio" },
-				options: ["open", "merged", "closed"]
-			}
-		},
-		args: {
-			state: "open" as const,
-			versions,
-			authorHandle: "bob.pds.tngl.boltless.dev",
-			authorDid: "did:plc:bob",
-			subjectUri: "at://did:plc:bob/sh.tangled.pull/123",
-			activeVersion: 1,
-			versionHref: (v: number) => href(`/tangled.org/core/pulls/at%3A%2F%2Fpull/${v}`),
-			markup: { repo: "tangled.org/core", ref: "master" }
-		}
-	});
-</script>
-
-<!-- the rail is `sticky` inside a 25vw column on the real page; the wrapper stands
-     in for that so the round cards don't stretch to the docs page's full width -->
-{#snippet rail(args: Args)}
-	<div class="w-md max-w-full">
-		<MockAuthProvider>
-			<PullDiscussion {...args} />
-		</MockAuthProvider>
-	</div>
-{/snippet}
-
-<Story name="Open">
-	{#snippet template(args)}{@render rail(args)}{/snippet}
-</Story>
-
-<Story name="Merged" args={{ state: "merged" }}>
-	{#snippet template(args)}{@render rail(args)}{/snippet}
-</Story>
-
-<Story name="Closed" args={{ state: "closed" }}>
-	{#snippet template(args)}{@render rail(args)}{/snippet}
-</Story>
-
-<!-- viewing the older round: its Diff button disappears, the newest keeps its own -->
-<Story name="Older round active" args={{ activeVersion: 0 }}>
-	{#snippet template(args)}{@render rail(args)}{/snippet}
-</Story>
-
-<!-- logged out: the action strip disappears entirely, same as the appview's
-     `action-card-N` going `hidden` without a LoggedInUser -->
-<Story name="Logged out">
-	{#snippet template(args)}
-		<div class="w-md max-w-full"><PullDiscussion {...args} /></div>
-	{/snippet}
-</Story>
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
index 4a74297d4..94507e078 100644
--- a/web/src/lib/components/repo/pulls/PullDiscussion.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
@@ -1,437 +1,95 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import { resolve } from "$app/paths";
-	import Check from "$icon/check";
-	import ChevronDown from "$icon/chevron-down";
-	import ChevronUp from "$icon/chevron-up";
-	import CircleChevronUp from "$icon/circle-chevron-up";
-	import CirclePlus from "$icon/circle-plus";
-	import Diff from "$icon/diff";
-	import FileWarning from "$icon/file-warning";
-	import LoaderCircle from "$icon/loader-circle";
-	import MessageSquare from "$icon/message-square";
-	import TriangleAlert from "$icon/triangle-alert";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import {
+		filterCommentsByCommit,
+		groupCommentsByVersion,
+		type CommentView
+	} from "$lib/components/comment/comments";
+	import ArrowRight from "$icon/arrow-right";
+	import type { CommitSummary } from "$lib/components/repo/types";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import PullActions, { type PullActionsState } from "./PullActions.svelte";
-	import PullComment from "./PullComment.svelte";
-	import PullStatePill, { type PullStatePillVariants } from "./PullStatePill.svelte";
-	import type { PullState } from "$lib/api/records";
-	import type { ResolvedPathname } from "$app/types";
-	import type { CommentView, ThreadInput } from "$lib/components/comment/comments";
 	import type { MarkupContext } from "$lib/markup";
-	import { formatCount } from "$lib/format";
+	import PullReviewComment from "./PullReviewComment.svelte";
+	import type { CommitStatuses } from "$lib/api/commitStatuses";
+	import PipelineWorkflows from "../pipelines/PipelineWorkflows.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 
 	interface PullVersion {
 		base: string;
 		head: string;
-		createdAt?: string;
-		comments?: CommentView[];
+		createdAt: string;
 	}
 
 	interface Props {
-		state: PullStatePillVariants["state"];
-		versions: PullVersion[];
-		authorHandle: string;
-		authorDid: string;
-		subjectUri: string;
-		subjectCid?: string;
-		activeVersion: number;
-		versionHref: (version: number) => ResolvedPathname;
 		markup: MarkupContext;
-		actions?: PullActionsState;
-		onstatechange?: (state: PullState) => void;
-		onsubmitted?: (round: number, submitted: ThreadInput) => void;
-		onedited?: (edited: ThreadInput) => void;
-		ondeleted?: (uri: string) => void;
-		open?: boolean;
-		onclose?: () => void;
+		currentVersion: number;
+		versions: PullVersion[];
+		comments: CommentView[];
+		// the commits a comment's pin can name, so a filter sees the commit and not the oid
+		commits: CommitSummary[];
+		pipelineStatuses?: Promise<CommitStatuses>;
+		filter?: (commit: CommitSummary) => boolean;
+		onUpdateComment: (edited: CommentView) => Promise<void>;
 	}
 
 	let {
-		state: pullState,
-		versions,
-		authorHandle,
-		authorDid,
-		subjectUri,
-		subjectCid,
-		activeVersion,
-		versionHref,
 		markup,
-		actions,
-		onstatechange,
-		onsubmitted,
-		onedited,
-		ondeleted,
-		open = $bindable(true),
-		onclose
+		currentVersion,
+		versions,
+		comments,
+		commits,
+		pipelineStatuses,
+		filter,
+		onUpdateComment
 	}: Props = $props();
 
-	const accents = {
-		open: "*:border-border-success",
-		// TODO: merged state color
-		merged: "*:border-background-info-emphasis",
-		closed: "*:border-border-strong"
-	};
-	const accent = $derived(accents[pullState ?? "open"]);
-
-	const latest = $derived(versions.length - 1);
-	const comments = $derived(versions.reduce((total, v) => total + (v.comments?.length ?? 0), 0));
-	const plural = (n: number, noun: string) => `${formatCount(n)} ${noun}${n === 1 ? "" : "s"}`;
-	const profileHref = (handle: string) => resolve(`/${handle}` as "/");
-
-	const isConflicted = $derived((actions?.mergeCheck?.conflicts?.length ?? 0) > 0);
-	const needsWorkflowApproval = $derived(
-		pullState === "open" &&
-			actions?.isForkBased === true &&
-			actions?.hasPipeline !== true &&
-			(actions?.spindle ?? "") !== ""
-	);
-	const changedWorkflows = $derived(actions?.changedWorkflows ?? []);
-
-	let desktop = $state(true);
-	onMount(() => {
-		const query = window.matchMedia("(min-width: 1024px)");
-		const sync = () => {
-			desktop = query.matches;
-			open = query.matches;
-		};
-		sync();
-		query.addEventListener("change", sync);
-		return () => query.removeEventListener("change", sync);
-	});
+	const visible = $derived(filterCommentsByCommit(comments, commits, filter));
+	const groups = $derived(groupCommentsByVersion(visible, versions));
 </script>
 
-<details
-	id="bottom-sheet"
-	bind:open
-	ontoggle={(e) => {
-		// the appview's desktop guard: the summary can't collapse the rail
-		if (desktop && !e.currentTarget.open) open = true;
-	}}
-	class="group/history flex flex-col {accent}"
->
-	<summary
-		class="relative z-20 flex list-none items-center justify-between rounded-t-2xl border-x-4 border-t-4 py-2 pr-4 pl-3 group-open/history:bg-transparent lg:pointer-events-none lg:h-12 lg:border-0 lg:bg-transparent lg:px-1"
-	>
-		<div class="flex items-center gap-2">
-			<span class="lg:hidden"><PullStatePill state={pullState} /></span>
-			<h2 class="typography-heading-4">History</h2>
-		</div>
-		<div class="flex items-center gap-2 typography-paragraph-small">
-			<span>{plural(versions.length, "version")}</span>
-			<span class="select-none before:content-['·']"></span>
-			<span>{plural(comments, "comment")}</span>
-			<span class="pointer-events-auto hidden lg:inline-flex">
-				<Button
-					type="button"
-					size="small"
-					variant="ghost"
-					icon={MessageSquare}
-					title="Toggle discussion panel"
-					onclick={onclose}
-				/>
-			</span>
-			<span class="lg:hidden">
-				{#if open}
-					<ChevronDown class="inline size-4" aria-hidden="true" />
-				{:else}
-					<ChevronUp class="inline size-4" aria-hidden="true" />
-				{/if}
-			</span>
-		</div>
-	</summary>
-
-	<div
-		class="max-h-[calc(100vh-3rem-0.5rem)] space-y-4 overflow-y-auto border-x-4 px-1 pb-32 lg:border-0 lg:px-0"
-	>
-		{#each versions as version, index (index)}
-			{@const active = index === activeVersion}
-			{@const versionComments = version.comments ?? []}
-			<div
-				id="version-{index}"
-				class="w-full overflow-clip rounded-sm bg-background-subtle shadow-xs"
-			>
-				<header class="sticky top-0 z-20 bg-background-canvas">
-					<div
-						class="flex gap-2 rounded-t-sm border-x border-t border-border-default pt-2 pr-2 pb-4 pl-4 lg:pl-6 {active
-							? 'bg-background-info-subtle'
-							: 'bg-background-default'}"
-					>
-						<div class="shrink-0 pt-2">
-							<a href={profileHref(authorHandle)} class="no-underline">
-								<Avatar
-									handle={authorHandle}
-									did={authorDid}
-									size="full"
-									class="size-8"
-								/>
-							</a>
-						</div>
-						<div class="flex min-w-0 flex-1 flex-col gap-1">
-							<div class="mb-1 flex items-center justify-between gap-2">
-								<span
-									class="inline-flex items-center gap-2 pt-2 typography-paragraph-small {active
-										? 'text-foreground-muted'
-										: 'text-foreground-subtle'}"
-								>
-									<a
-										href={profileHref(authorHandle)}
-										class="no-underline hover:underline"
-									>
-										{authorHandle}
-									</a>
-									submitted
-									<span
-										class="rounded-sm border px-2 py-0.5 typography-monospace-small {active
-											? 'border-border-focus bg-background-info-subtle text-foreground-info'
-											: 'border-border-default bg-background-inset text-foreground-default'}"
-									>
-										#{index}
-									</span>
-									<span class="select-none before:content-['·']"></span>
-									<a
-										href={versionHref(index)}
-										class="no-underline hover:underline"
-									>
-										{#if version.createdAt}
-											<TimeAgo value={version.createdAt} />
-										{/if}
-									</a>
-								</span>
-								<Button
-									size="small"
-									variant="ghost"
-									icon={Diff}
-									href={versionHref(index)}>Diff</Button
-								>
-							</div>
-
-							<!--
-								the appview swaps the merge check into this banner out of band
-								once `/<version>/_/actions` answers
-							-->
-							{#if index === latest}
-								<div id="mergecheck-banner" class="flex flex-col gap-2">
-									{#if needsWorkflowApproval}
-										{#if changedWorkflows.length > 0}
-											<details class="group/ci">
-												<summary
-													class="flex cursor-pointer list-none items-center gap-2"
-												>
-													<TriangleAlert
-														class="size-4 text-foreground-warning"
-														aria-hidden="true"
-													/>
-													<span
-														class="font-medium text-foreground-warning"
-													>
-														Workflow files changed
-													</span>
-													<div
-														class="typography-paragraph-small text-foreground-subtle"
-													>
-														<span class="inline group-open/ci:hidden"
-															>Expand</span
-														>
-														<span class="hidden group-open/ci:inline"
-															>Collapse</span
-														>
-													</div>
-												</summary>
-												<ul class="mt-2 space-y-1 overflow-x-auto">
-													{#each changedWorkflows as file (file)}
-														<li
-															class="flex items-center whitespace-nowrap"
-														>
-															<FileWarning
-																class="mr-1.5 inline-flex size-4 shrink-0 text-foreground-warning"
-																aria-hidden="true"
-															/>
-															<span class="font-mono">{file}</span>
-														</li>
-													{/each}
-												</ul>
-											</details>
-										{:else}
-											<div
-												class="flex items-center gap-2 text-foreground-warning"
-											>
-												<TriangleAlert class="size-4" aria-hidden="true" />
-												<span class="font-medium"
-													>Workflow needs approval</span
-												>
-											</div>
-										{/if}
-									{/if}
-
-									{#if pullState === "open"}
-										{#if !actions?.mergeCheck}
-											<div
-												class="flex items-center gap-2 typography-paragraph-small text-foreground-subtle"
-											>
-												<LoaderCircle
-													class="size-4 animate-spin"
-													aria-hidden="true"
-												/>
-												<span>Checking mergeability…</span>
-											</div>
-										{:else if actions.mergeCheck.error}
-											<div
-												class="flex items-center gap-2 text-foreground-danger"
-											>
-												<TriangleAlert class="size-4" aria-hidden="true" />
-												<span class="font-medium"
-													>{actions.mergeCheck.error}</span
-												>
-											</div>
-										{:else if isConflicted}
-											<details class="group/conflict">
-												<summary
-													class="flex cursor-pointer list-none items-center justify-between"
-												>
-													<div
-														class="flex items-center gap-2 text-foreground-danger"
-													>
-														<TriangleAlert
-															class="size-4"
-															aria-hidden="true"
-														/>
-														<span class="font-medium"
-															>Merge conflicts detected</span
-														>
-														<div
-															class="typography-paragraph-small text-foreground-subtle"
-														>
-															<span
-																class="inline group-open/conflict:hidden"
-																>Expand</span
-															>
-															<span
-																class="hidden group-open/conflict:inline"
-																>Collapse</span
-															>
-														</div>
-													</div>
-												</summary>
-												<ul class="mt-2 space-y-1 overflow-x-auto">
-													{#each actions.mergeCheck.conflicts ?? [] as conflict (conflict.filename ?? conflict.reason)}
-														<li
-															class="flex items-center whitespace-nowrap"
-														>
-															<FileWarning
-																class="mr-1.5 inline-flex size-4 shrink-0 text-foreground-danger"
-																aria-hidden="true"
-															/>
-															{#if conflict.filename}
-																<span class="font-mono"
-																	>{conflict.filename}</span
-																>
-															{:else}
-																<span>{conflict.reason}</span>
-															{/if}
-														</li>
-													{/each}
-												</ul>
-											</details>
-										{:else}
-											<div
-												class="flex items-center gap-2 text-foreground-success"
-											>
-												<Check class="size-4" aria-hidden="true" />
-												<span class="font-medium"
-													>No conflicts, ready to merge</span
-												>
-											</div>
-										{/if}
-									{/if}
-								</div>
+<div class="space-y-4 px-4 pt-4 pb-80">
+	{#if !visible.length}
+		<p class="p-2 text-foreground-subtle">No comments yet.</p>
+	{:else}
+		{#each groups as group (group.version ?? "pre")}
+			{#if group.version && group.version > 0}
+				<Separator variant="line" />
+			{/if}
+			<div class="space-y-2">
+				{#if group.version !== undefined}
+					{@const isActive = group.version === currentVersion}
+					{@const version = versions[group.version]}
+					<div class="flex h-6 items-center justify-between">
+						<div class="flex items-center gap-2">
+							{#if isActive}
+								<ArrowRight class="size-3.5" />
 							{/if}
+							<span class:text-foreground-muted={!isActive}>v{group.version}</span>
+							<TimeAgo class="text-foreground-subtle" value={version.createdAt} />
 						</div>
-					</div>
-				</header>
-
-				<details
-					open={active || versionComments.length === 0}
-					class="group/comments group/collapse relative rounded-b-sm border-x border-b border-border-default pl-8 lg:pl-10"
-				>
-					<summary class="cursor-pointer list-none">
-						<div
-							class="collapse-trigger absolute inset-y-0 left-2 hidden w-12 items-center justify-center transition-colors group-open/comments:flex lg:w-16"
-							aria-hidden="true"
-						>
-							<div
-								class="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-border-default transition-colors group-has-[.collapse-trigger:hover]/collapse:bg-border-strong"
-							></div>
-						</div>
-						{#if versionComments.length > 0}
-							<div
-								class="group/summary relative block py-4 group-open/comments:hidden"
-							>
-								<div
-									class="absolute inset-y-0 -left-8 flex w-16 items-center justify-center transition-colors"
-									aria-hidden="true"
-								>
-									<div
-										class="absolute inset-y-0 left-1/2 h-1/3 w-0.5 -translate-x-1/2 bg-border-default transition-colors group-hover/summary:bg-border-strong"
-									></div>
-								</div>
-								<span
-									class="relative -ml-2 flex items-center gap-2 typography-paragraph-small text-foreground-subtle transition-colors group-hover/summary:text-foreground-muted"
-								>
-									<CirclePlus class="size-4" aria-hidden="true" />
-									Expand {plural(versionComments.length, "comment")}
-								</span>
-							</div>
+						{#if pipelineStatuses}
+							{#await pipelineStatuses then statuses}
+								{#if statuses[version.head]}
+									<PipelineWorkflows
+										ownerHandle="tangled.org"
+										repoName="core"
+										size="mini"
+										variant="symbol"
+										pipeline={statuses[version.head]}
+									/>
+								{/if}
+							{/await}
 						{/if}
-					</summary>
-
-					<!-- todo: the loader buckets no comments by version yet, these are fixtures -->
-					<div id="pull-comments-{index}">
-						{#each versionComments as comment (comment.uri)}
-							<PullComment
-								{comment}
-								{subjectUri}
-								{subjectCid}
-								{markup}
-								{onedited}
-								{ondeleted}
-							/>
-						{/each}
 					</div>
-
-					{#if versionComments.length > 0}
-						<button
-							type="button"
-							class="collapse-trigger relative mt-4 -ml-2 flex cursor-pointer items-center gap-2 pb-4 typography-paragraph-small text-foreground-subtle transition-colors group-has-[.collapse-trigger:hover]/collapse:text-foreground-muted"
-							onclick={(e) => {
-								const details = e.currentTarget.closest("details");
-								if (details) details.open = false;
-							}}
-						>
-							<span class="bg-background-subtle">
-								<CircleChevronUp class="size-4" aria-hidden="true" />
-							</span>
-							Collapse {plural(versionComments.length, "comment")}
-						</button>
-					{/if}
-
-					<div class="relative -ml-8 rounded-b-sm bg-background-subtle lg:-ml-10">
-						<PullActions
-							roundIdx={index}
-							latest={index === latest}
-							state={pullState}
-							{markup}
-							{actions}
-							{subjectUri}
-							{subjectCid}
-							{onstatechange}
-							{onsubmitted}
-						/>
-					</div>
-				</details>
+				{/if}
+				{#each group.comments as comment (comment.uri)}
+					<PullReviewComment
+						{comment}
+						{markup}
+						onedit={onUpdateComment}
+						active={group.version === currentVersion}
+					/>
+				{/each}
 			</div>
 		{/each}
-	</div>
-</details>
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullInfoBar.stories.svelte b/web/src/lib/components/repo/pulls/PullInfoBar.stories.svelte
deleted file mode 100644
index d6f158ac8..000000000
--- a/web/src/lib/components/repo/pulls/PullInfoBar.stories.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import PullInfoBar from "./PullInfoBar.svelte";
-
-	const { Story } = defineMeta({
-		title: "Repo/Pulls/PullInfoBar",
-		component: PullInfoBar,
-		tags: ["autodocs"],
-		argTypes: {
-			state: {
-				control: { type: "inline-radio" },
-				options: ["open", "merged", "closed"]
-			},
-			authorHandle: { control: "text" },
-			authorDid: { control: "text" },
-			createdAt: { control: "text" },
-			targetBranch: { control: "text" },
-			sourceBranch: { control: "text" },
-			sourceRepo: { control: "text" }
-		},
-		args: {
-			state: "open",
-			authorHandle: "joshka.net",
-			authorDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
-			createdAt: "2025-06-01T10:30:00Z",
-			ownerHandle: "tangled.org",
-			repoName: "core",
-			targetBranch: "master"
-		}
-	});
-</script>
-
-<Story name="Open" />
-<Story name="BranchSource" args={{ sourceBranch: "ref-based-pr" }} />
-<Story name="ForkSource" args={{ sourceBranch: "ref-based-pr", sourceRepo: "joshka.net/core" }} />
-<Story name="Merged" args={{ state: "merged" }} />
diff --git a/web/src/lib/components/repo/pulls/PullInfoBar.svelte b/web/src/lib/components/repo/pulls/PullInfoBar.svelte
deleted file mode 100644
index 481809647..000000000
--- a/web/src/lib/components/repo/pulls/PullInfoBar.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { resolve } from "$app/paths";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
-	import User from "$lib/components/ui/User.svelte";
-	import PullStatePill, { type PullStatePillVariants } from "./PullStatePill.svelte";
-
-	interface Props {
-		state: PullStatePillVariants["state"];
-		authorHandle: string;
-		authorDid: string;
-		// absent on the mock loader for now, the separator hides with it
-		createdAt?: string;
-		ownerHandle: string;
-		repoName: string;
-		targetBranch: string;
-		// missing on patch-based pulls, which have no branch to point at
-		sourceBranch?: string;
-		// set only when the source branch lives in a fork, as `owner/repo` or a did
-		sourceRepo?: string;
-		actions?: Snippet;
-	}
-
-	let {
-		state,
-		authorHandle,
-		authorDid,
-		createdAt,
-		ownerHandle,
-		repoName,
-		targetBranch,
-		sourceBranch,
-		sourceRepo,
-		actions
-	}: Props = $props();
-
-	const treeHref = (repo: string, ref: string) =>
-		resolve(`/${repo}/tree/${encodeURIComponent(ref)}` as "/");
-	const target = $derived(`${ownerHandle}/${repoName}`);
-	const chip =
-		"inline-flex items-center gap-0.5 rounded-sm bg-background-inset px-2 typography-monospace-small";
-</script>
-
-<div
-	class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-muted"
->
-	<PullStatePill {state} />
-
-	<span class="ml-1 flex items-center gap-1">
-		opened by
-		<User size="small" handle={authorHandle} did={authorDid} link />
-	</span>
-
-	{#if createdAt}
-		<span class="before:mr-1 before:content-['·']">
-			<TimeAgo value={createdAt} />
-		</span>
-	{/if}
-
-	<span class="flex items-center gap-1 before:mr-1 before:content-['·']">
-		targeting
-		<span class={chip}>
-			<a href={treeHref(target, targetBranch)} class="no-underline hover:underline"
-				>{targetBranch}</a
-			>
-		</span>
-	</span>
-
-	{#if sourceBranch}
-		<span class="flex items-center gap-1">
-			from
-			<span class={chip}>
-				{#if sourceRepo}
-					<a href={resolve(`/${sourceRepo}` as "/")} class="no-underline hover:underline">fork</a>:
-				{/if}
-				<a href={treeHref(sourceRepo ?? target, sourceBranch)} class="no-underline hover:underline"
-					>{sourceBranch}</a
-				>
-			</span>
-		</span>
-	{/if}
-
-	{#if actions}
-		<div class="ml-auto flex items-center gap-2">
-			{@render actions()}
-		</div>
-	{/if}
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullMetaPanel.svelte b/web/src/lib/components/repo/pulls/PullMetaPanel.svelte
deleted file mode 100644
index bda019d4c..000000000
--- a/web/src/lib/components/repo/pulls/PullMetaPanel.svelte
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="ts">
-	import { resolve } from "$app/paths";
-	import ArrowUpRight from "$icon/arrow-up-right";
-	import Ban from "$icon/ban";
-	import Bell from "$icon/bell";
-	import BellOff from "$icon/bell-off";
-	import Check from "$icon/check";
-	import CircleDot from "$icon/circle-dot";
-	import Copy from "$icon/copy";
-	import GitMerge from "$icon/git-merge";
-	import GitPullRequest from "$icon/git-pull-request";
-	import GitPullRequestClosed from "$icon/git-pull-request-closed";
-	import Avatar from "$lib/components/ui/Avatar.svelte";
-
-	export interface Backlink {
-		kind: "issues" | "pulls";
-		state: "open" | "closed" | "merged";
-		repo: string;
-		subjectId: string;
-		title: string;
-	}
-
-	interface Props {
-		// the pull's at-uri, the only block that always has something to show
-		uri: string;
-		repoFullName: string;
-		// each block hides itself until its data exists
-		participants?: { did: string; handle: string }[];
-		subscribed?: boolean;
-		canSubscribe?: boolean;
-		backlinks?: Backlink[];
-	}
-
-	let {
-		uri,
-		repoFullName,
-		participants,
-		subscribed = false,
-		canSubscribe = false,
-		backlinks
-	}: Props = $props();
-
-	const shown = $derived((participants ?? []).slice(0, 5));
-	const overflow = $derived(Math.max((participants?.length ?? 0) - 5, 0));
-	// the appview stacks the five avatars back to front
-	const zIndex = ["z-50", "z-40", "z-30", "z-20", "z-10"];
-
-	const backlinkIcon = (link: Backlink) =>
-		link.state === "closed"
-			? {
-					icon: link.kind === "issues" ? Ban : GitPullRequestClosed,
-					tone: "text-foreground-subtle"
-				}
-			: link.kind === "issues"
-				? { icon: CircleDot, tone: "text-foreground-success" }
-				: link.state === "merged"
-					? { icon: GitMerge, tone: "text-foreground-info" }
-					: { icon: GitPullRequest, tone: "text-foreground-success" };
-
-	let copied = $state(false);
-	const copy = async () => {
-		await navigator.clipboard.writeText(uri);
-		copied = true;
-		setTimeout(() => (copied = false), 1000);
-	};
-
-	// todo: none of this is loaded yet — participants, the subscription state and
-	//       backlinks each need their own bobbin query
-</script>
-
-{#if participants && participants.length > 0}
-	<div class="px-2 md:px-0">
-		<div class="flex items-center py-1 typography-paragraph-small">
-			<span class="font-bold text-foreground-subtle capitalize">Participants</span>
-			<span class="ml-1 rounded-sm bg-background-inset px-1">{participants.length}</span>
-		</div>
-		<div class="inline-flex items-center -space-x-3">
-			{#each shown as person, index (person.did)}
-				<a href={resolve(`/${person.handle}` as "/")} class="{zIndex[index]} no-underline">
-					<Avatar handle={person.handle} did={person.did} size="full" class="size-8" />
-				</a>
-			{/each}
-			{#if overflow > 0}
-				<span class="pl-4 typography-paragraph-small">+{overflow}</span>
-			{/if}
-		</div>
-	</div>
-{/if}
-
-{#if canSubscribe}
-	<div id="pull-subscribe-btn">
-		<button
-			type="button"
-			class="group flex cursor-pointer items-center gap-1.5 typography-paragraph-small transition-colors {subscribed
-				? 'text-foreground-muted hover:text-foreground-default'
-				: 'text-foreground-subtle hover:text-foreground-muted'}"
-		>
-			{#if subscribed}
-				<Bell class="size-4" aria-hidden="true" />
-				<span>Subscribed</span>
-			{:else}
-				<BellOff class="size-4" aria-hidden="true" />
-				<span>Subscribe</span>
-			{/if}
-		</button>
-	</div>
-{/if}
-
-{#if backlinks && backlinks.length > 0}
-	<div class="px-2 md:px-0">
-		<div>
-			<span class="py-1 typography-paragraph-small font-bold text-foreground-subtle">
-				Referenced by
-			</span>
-		</div>
-		<ul>
-			{#each backlinks as link (`${link.repo}/${link.kind}/${link.subjectId}`)}
-				{@const badge = backlinkIcon(link)}
-				<li>
-					<div class="flex flex-col">
-						<div class="flex items-center gap-2">
-							<span class={badge.tone}>
-								<badge.icon class="size-3" aria-hidden="true" />
-							</span>
-							<a
-								href={resolve(
-									`/${link.repo}/${link.kind}/${link.subjectId}` as "/"
-								)}
-								class="line-clamp-1 typography-paragraph-small no-underline hover:underline"
-							>
-								<span class="text-foreground-subtle">#{link.subjectId}</span>
-								{link.title}
-							</a>
-						</div>
-						{#if link.repo !== repoFullName}
-							<div>
-								<span>
-									on <a
-										href={resolve(`/${link.repo}` as "/")}
-										class="no-underline hover:underline"
-									>
-										{link.repo}
-									</a>
-								</span>
-							</div>
-						{/if}
-					</div>
-				</li>
-			{/each}
-		</ul>
-	</div>
-{/if}
-
-<div id="at-uri-panel" class="px-2 md:px-0">
-	<div class="flex items-center justify-between gap-2">
-		<span class="py-1 typography-paragraph-small font-bold text-foreground-subtle capitalize">
-			AT URI
-		</span>
-		<div class="flex items-center gap-2">
-			<button
-				type="button"
-				class="cursor-pointer text-foreground-subtle hover:text-foreground-muted"
-				title="Copy to clipboard"
-				aria-label="Copy to clipboard"
-				onclick={copy}
-			>
-				{#if copied}
-					<Check class="size-4" aria-hidden="true" />
-				{:else}
-					<Copy class="size-4" aria-hidden="true" />
-				{/if}
-			</button>
-			<a
-				href="https://pdsls.dev/{uri}"
-				class="text-foreground-subtle hover:text-foreground-muted"
-				title="View in PDSls"
-				aria-label="View in PDSls"
-			>
-				<ArrowUpRight class="size-4" aria-hidden="true" />
-			</a>
-		</div>
-	</div>
-	<span
-		class="block max-w-full cursor-pointer overflow-x-auto typography-monospace-small font-mono whitespace-nowrap select-all"
-		title={uri}
-		data-aturi={uri}
-	>
-		{uri}
-	</span>
-</div>
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
new file mode 100644
index 000000000..81239fac7
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.stories.svelte
@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ReviewComment from "./PullReviewComment.svelte";
+	import { sampleComments } from "$lib/components/comment/sampleComments";
+
+	const { byjp, samuel } = sampleComments;
+
+	const { Story } = defineMeta({
+		title: "Pull/ReviewComment",
+		component: ReviewComment,
+		tags: ["autodocs"],
+		args: {
+			comment: byjp,
+			active: false
+		}
+	});
+</script>
+
+<Story name="Comment">
+	{#snippet template(args)}
+		<div class="w-75 bg-background-default p-4">
+			<ReviewComment {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Active Comment" args={{ comment: samuel, active: true }}>
+	{#snippet template(args)}
+		<div class="w-75 bg-background-default p-4">
+			<ReviewComment {...args} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
new file mode 100644
index 000000000..9b11271d7
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import Pencil from "$icon/pencil";
+	import type { CommentView } from "$lib/components/comment/comments";
+	import type { ReactionGroup } from "$lib/components/reaction/reactions";
+	import Reactions from "$lib/components/reaction/Reactions.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import User from "$lib/components/ui/User.svelte";
+	import type { MarkupContext } from "$lib/markup";
+	import { renderMarkdown } from "$lib/markup/markdown";
+	import PullReviewCommentEditor from "./PullReviewCommentEditor.svelte";
+
+	interface Props {
+		comment: CommentView;
+		active?: boolean;
+		reactions?: ReactionGroup[];
+		markup: MarkupContext;
+		onedit: (edited: CommentView) => Promise<void>;
+		onreactionschange?: (next: ReactionGroup[]) => void;
+	}
+
+	let editing = $state(false);
+
+	let {
+		comment,
+		active = false,
+		reactions = [],
+		markup,
+		onedit,
+		onreactionschange
+	}: Props = $props();
+
+	async function submit(body: string) {
+		const newComment = { ...comment, body };
+		await onedit(newComment);
+		comment = newComment;
+		comment.bodyHtml = renderMarkdown(body, markup);
+		editing = false;
+	}
+</script>
+
+<div
+	class="flex flex-col gap-2 rounded border-border-default p-2 {active
+		? 'border text-foreground-default'
+		: 'text-foreground-muted'}"
+>
+	<header class="flex h-8 items-center justify-between">
+		<!-- User pins its own `text-foreground-default`, so the dimmed state has to say so -->
+		<User
+			did={comment.authorDid}
+			handle={comment.authorHandle}
+			link
+			class={active ? undefined : "text-foreground-muted"}
+		/>
+		<div class="flex items-center gap-2">
+			<a
+				id="comment-{comment.rkey}"
+				href="#comment-{comment.rkey}"
+				class="no-underline hover:underline {active
+					? 'text-foreground-muted'
+					: 'text-foreground-subtle'}"
+			>
+				{#if comment.editedAt && !comment.deleted}
+					Edited <TimeAgo value={comment.editedAt} />
+				{:else}
+					<TimeAgo value={comment.createdAt} />
+				{/if}
+			</a>
+			{#if !comment.deleted}
+				<button
+					type="button"
+					aria-label="Edit comment"
+					class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
+					onclick={() => (editing = true)}
+				>
+					<Pencil class="size-4" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+	</header>
+	<div>
+		{#if comment.embed}
+			<Tag class="py-1 typography-monospace-small">{comment.embed.commit.oid.slice(0, 8)}</Tag
+			>
+		{/if}
+		{#if editing}
+			<PullReviewCommentEditor
+				body={comment.body}
+				{markup}
+				rows={4}
+				submitLabel="Save"
+				submitIcon={Pencil}
+				onsubmit={submit}
+				oncancel={() => (editing = false)}
+			/>
+		{:else}
+			{#if comment.bodyHtml}
+				<article class="markup mt-1 {active ? '' : 'text-foreground-muted'}">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+					{@html comment.bodyHtml}
+				</article>
+			{:else if comment.body}
+				<article class="mt-1 whitespace-pre-wrap">
+					{comment.body}
+				</article>
+			{/if}
+		{/if}
+		<Reactions {reactions} subjectUri={comment.uri} onchange={onreactionschange} />
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
new file mode 100644
index 000000000..b2cb16a0a
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentEditor.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { untrack, type Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import X from "$icon/x";
+	import { createAction } from "$lib/action.svelte";
+	import { type MarkupContext } from "$lib/markup";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+
+	interface Props {
+		body?: string;
+		markup: MarkupContext;
+		rows?: number;
+		placeholder?: string;
+		submitLabel: string;
+		submitIcon: Component<SvelteHTMLElements["svg"]>;
+		onsubmit: (body: string) => Promise<void>;
+		oncancel?: () => void;
+	}
+
+	let {
+		body: initialBody = "",
+		markup,
+		rows = 6,
+		placeholder,
+		submitLabel,
+		submitIcon,
+		onsubmit,
+		oncancel
+	}: Props = $props();
+
+	let body = $state(untrack(() => initialBody));
+	let tab = $state<"write" | "preview">("write");
+
+	const publish = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		if (body.trim() === "") return;
+		await onsubmit(body);
+		body = "";
+	});
+	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
+</script>
+
+<form onsubmit={publish.run} class="flex flex-col gap-2">
+	<MarkdownEditor
+		name="body"
+		{rows}
+		{placeholder}
+		{markup}
+		transparent
+		bind:value={body}
+		bind:tab
+		disabled={publish.loading}
+	/>
+
+	<ErrorAlert label={publish.error} />
+	<div class="flex items-center gap-2">
+		<Button
+			type="submit"
+			variant="primary"
+			icon={publish.loading ? Spinner : submitIcon}
+			disabled={!canSubmit}
+		>
+			{submitLabel}
+		</Button>
+		{#if oncancel}
+			<Button
+				type="button"
+				variant="default"
+				icon={X}
+				disabled={publish.loading}
+				onclick={oncancel}
+			>
+				Cancel
+			</Button>
+		{/if}
+	</div>
+</form>
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
new file mode 100644
index 000000000..4f9b4e5dd
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.stories.svelte
@@ -0,0 +1,51 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PullReviewCommentForm from "./PullReviewCommentForm.svelte";
+
+	const { Story } = defineMeta({
+		title: "Pull/ReviewCommentForm",
+		component: PullReviewCommentForm,
+		tags: ["autodocs"],
+		args: {
+			currentCommit: "9a925efef6a0e6dfcd2d4317b4a1eee8752928b8",
+			onsubmit: () => {}
+		}
+	});
+</script>
+
+<script lang="ts">
+	let submitted = $state<string[]>([]);
+</script>
+
+<Story name="ReviewCommentForm">
+	{#snippet template(args)}
+		<div class="w-75 space-y-2 bg-background-default p-4">
+			<PullReviewCommentForm
+				{...args}
+				onsubmit={(body, commit) => {
+					submitted.push(commit ? `${body} @${commit.slice(0, 8)}` : body);
+				}}
+			/>
+			<output class="block space-y-1">
+				{#each submitted as body, i (i)}
+					<p>{body}</p>
+				{/each}
+			</output>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Failing">
+	{#snippet template(args)}
+		<div class="w-75 bg-background-default p-4">
+			<PullReviewCommentForm
+				{...args}
+				onsubmit={() => {
+					throw new Error("nope");
+				}}
+			/>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }} />
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
new file mode 100644
index 000000000..d709abee1
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import SendHorizontal from "$icon/send-horizontal";
+	import { createAction } from "$lib/action.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+
+	interface Props {
+		currentCommit: string;
+		pinToCommit?: boolean;
+		placeholder?: string;
+		disabled?: boolean;
+		onsubmit: (body: string, commit?: string) => void | Promise<void>;
+	}
+
+	let {
+		currentCommit,
+		pinToCommit = $bindable(false),
+		placeholder = "Write your comment here",
+		disabled = false,
+		onsubmit
+	}: Props = $props();
+
+	let draft = $state("");
+
+	const publish = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		const body = draft.trim();
+		if (!body) return;
+		await onsubmit(body, pinToCommit ? currentCommit : undefined);
+		// cleared only once the handler resolves, so a failed write doesn't eat what was typed
+		draft = "";
+	});
+
+	const short = (hash: string) => hash.slice(0, 8);
+</script>
+
+<form onsubmit={publish.run} class="space-y-2">
+	<Checkbox bind:checked={pinToCommit}>
+		<span>Pin comment to <Tag>{short(currentCommit)}</Tag></span>
+	</Checkbox>
+	<ButtonGroup class="w-full">
+		<Input
+			class="flex-1"
+			bind:value={draft}
+			{placeholder}
+			disabled={disabled || publish.loading}
+		/>
+		<Button
+			type="submit"
+			icon={publish.loading ? Spinner : SendHorizontal}
+			aria-label="Comment"
+			disabled={disabled || publish.loading || draft.trim() === ""}
+		/>
+	</ButtonGroup>
+	<ErrorAlert label={publish.error} />
+</form>
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
new file mode 100644
index 000000000..2d836e930
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullVersionList.stories.svelte
@@ -0,0 +1,70 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PullVersionList from "./PullVersionList.svelte";
+	import type { PullSubmission } from "$lib/api";
+
+	const versions: PullSubmission[] = [
+		{
+			head: "456789abcdef0123456789abcdef0123456789ab",
+			base: "fedcba9876543210fedcba9876543210fedcba98",
+			createdAt: "2026-07-27T12:00:00Z"
+		},
+		{
+			head: "89abcdef0123456789abcdef0123456789abcdef",
+			base: "fedcba9876543210fedcba9876543210fedcba98",
+			createdAt: "2026-07-27T18:40:00Z"
+		},
+		{
+			head: "0123456789abcdef0123456789abcdef01234567",
+			base: "cba9876543210fedcba9876543210fedcba98765",
+			createdAt: "2026-07-28T09:30:00Z"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullVersionList",
+		component: PullVersionList,
+		tags: ["autodocs"],
+		args: { versions, range: { start: 2, end: 2 } }
+	});
+</script>
+
+<script lang="ts">
+	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
+
+	// the story is the owner: it holds the viewed range and only moves it when `oncommit` asks.
+	// the trigger tracks the pending selection, so it changes before this does
+	let viewed = $state<Range>({ start: 2, end: 2 });
+	let commits = $state(0);
+
+	const show = ({ start, end }: Range) => (start === end ? `v${start}` : `v${start}..v${end}`);
+</script>
+
+<Story name="VersionSelector">
+	{#snippet template(args)}
+		<div class="flex items-start gap-4 bg-background-default p-4">
+			<PullVersionList
+				{...args}
+				range={viewed}
+				oncommit={(next) => {
+					viewed = next;
+					commits++;
+				}}
+			/>
+			<output class="typography-monospace-regular">
+				viewing {show(viewed)} · {commits} commit{commits === 1 ? "" : "s"}
+			</output>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- what a caller seeding from the URL looks like: opens already spanning every version.
+     no owner here, so Compare Versions snaps the label back -- that's the range being
+     declined, not a bug -->
+<Story name="Seeded" args={{ range: { start: 0, end: 2 } }} />
+
+<!-- one version, so the label can only ever read v0 -->
+<Story
+	name="SingleVersion"
+	args={{ versions: versions.slice(0, 1), range: { start: 0, end: 0 } }}
+/>
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.svelte b/web/src/lib/components/repo/pulls/PullVersionList.svelte
new file mode 100644
index 000000000..6b5308b75
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullVersionList.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import Button from "$lib/components/ui/Button.svelte";
+	import FileDiff from "$icon/file-diff";
+	import ChevronDown from "$icon/chevron-down";
+	import ArrowRight from "$icon/arrow-right";
+	import RotateCcw from "$icon/rotate-ccw";
+	import GitCompareArrows from "$icon/git-compare-arrows";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import RangeSelector, {
+		type Range,
+		type RowActions
+	} from "$lib/components/ui/RangeSelector.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import type { PullSubmission } from "$lib/api";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+
+	interface Props {
+		versions: PullSubmission[];
+		range: Range;
+		oncommit?: (range: Range) => void;
+	}
+
+	let { versions, range, oncommit }: Props = $props();
+
+	let pending = $state<Range | null>(null);
+
+	const selected = $derived(pending ?? range);
+	const isInterdiff = $derived(selected.start !== selected.end);
+
+	const reset = () => (pending = null);
+
+	const compare = () => {
+		const next = selected;
+		pending = null;
+		oncommit?.(next);
+	};
+
+	const menuId = $props.id();
+
+	const short = (id: string) => id.slice(0, 8);
+</script>
+
+{#snippet versionRow(index: number, version: PullSubmission, actions: RowActions)}
+	<button
+		class="flex h-10 w-full items-center justify-between pr-2 pl-3 hover:cursor-pointer"
+		{...actions}
+	>
+		<div class="flex items-center gap-1">
+			<span class="typography-monospace-regular">v{index}</span>
+			<Tag class="py-1 typography-monospace-small">{short(version.head)}</Tag>
+		</div>
+		<TimeAgo value={version.createdAt} class="text-foreground-muted" />
+	</button>
+{/snippet}
+
+<Dropdown id={menuId} variant="button" buttonVariant="default" align="right" menuClass="w-fit">
+	{#snippet trigger()}
+		<FileDiff class="size-4" />
+		{#if range.end !== range.start}
+			<span>v{range.start}</span>
+			<ArrowRight class="size-3" aria-hidden="true" />
+		{/if}
+		<span>v{range.end}</span>
+		<ChevronDown class="size-4" />
+	{/snippet}
+	<div class="w-72 bg-background-default p-2">
+		<RangeSelector
+			items={versions}
+			row={versionRow}
+			bind:range={() => selected, (next) => (pending = next)}
+		/>
+		<div class="flex h-4 items-center">
+			<div class="w-full border-t border-border-default"></div>
+		</div>
+		<div class="flex gap-2">
+			<Button icon={RotateCcw} onclick={reset}>Reset</Button>
+			<Button
+				class="flex-1"
+				icon={GitCompareArrows}
+				onclick={compare}
+				popovertarget={menuId}
+				popovertargetaction="hide"
+			>
+				{isInterdiff ? "Compare Versions" : "See Version"}
+			</Button>
+		</div>
+	</div>
+</Dropdown>
diff --git a/web/src/lib/components/repo/tickets/Ticket.stories.svelte b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
new file mode 100644
index 000000000..0a8662152
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/Ticket.stories.svelte
@@ -0,0 +1,81 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Bell from "$icon/bell";
+	import Button from "$lib/components/ui/Button.svelte";
+	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
+	import Ticket from "./Ticket.svelte";
+
+	const body = `Instead of gating users by repo collaborators, we can use git repo DID as delegated account.
+
+Knot will mint service-auth to access spindle as gitrepo's authority. This way, spindle doesn't have to sync the git repository collaborator ACL table at all, and all permission sets can be controlled from Knot.
+`;
+
+	const { Story } = defineMeta({
+		title: "Repo/Tickets/Ticket",
+		component: Ticket,
+		tags: ["autodocs"],
+		argTypes: {},
+		args: {
+			ticket: {
+				uri: "at://did:plc:repo/org.tangled.track.ticket/123",
+				cid: "bafyreibfko5xzzdptcimcaql4tmsaffgr6jhreyjz3tv6nlh34si6k4u7e",
+				rkey: "123",
+				title: "proposal: use gitrepo's identity when accessing spindle",
+				body: body,
+				bodyHtml: null,
+				state: "open",
+				author: {
+					did: "did:plc:alice",
+					handle: "boltless.me"
+				},
+				createdAt: "2025-06-01T10:30:00Z",
+				targetBranch: undefined
+			},
+			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" }
+		}
+	});
+</script>
+
+<script lang="ts">
+	// the parent owns the record: Ticket closes the form, the caller applies the edit.
+	// a real caller writes to the pds first; this one just keeps the patch locally.
+	let patch = $state<{ title: string; body: string } | undefined>();
+</script>
+
+<!-- no edit/delete handlers, so neither button is offered -->
+<Story name="Issue Open">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<Ticket {...args} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<Story name="Issue with Actions">
+	{#snippet template(args)}
+		<MockAuthProvider>
+			<Ticket
+				{...args}
+				ticket={{ ...args.ticket, ...patch }}
+				onedit={async (input) => {
+					patch = input;
+				}}
+				ondelete={async () => {
+					throw new Error("no-op");
+				}}
+			>
+				{#snippet extraActions()}
+					<Button icon={Bell}>Subscribe</Button>
+				{/snippet}
+			</Ticket>
+		</MockAuthProvider>
+	{/snippet}
+</Story>
+
+<Story name="Issue as Non-Author">
+	{#snippet template(args)}
+		<MockAuthProvider signedIn={false}>
+			<Ticket {...args} onedit={async () => undefined} ondelete={async () => undefined} />
+		</MockAuthProvider>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
new file mode 100644
index 000000000..21152cc44
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import Pencil from "$icon/pencil";
+	import Trash2 from "$icon/trash-2";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import TicketBody from "./TicketBody.svelte";
+	import TicketForm from "./TicketForm.svelte";
+	import TicketInfoBar from "./TicketInfoBar.svelte";
+	import { createAction } from "$lib/action.svelte";
+	import { getAuth } from "$lib/auth.svelte";
+	import type { MarkupContext } from "$lib/markup";
+	import type { Snippet } from "svelte";
+	import Reactions from "$lib/components/reaction/Reactions.svelte";
+
+	interface Props {
+		// ticketView
+		ticket: {
+			uri: string;
+			cid: string;
+			rkey: string;
+			title: string;
+			body: string;
+			bodyHtml: string | null;
+			state: "open" | "closed" | "merged";
+			author: {
+				// profileViewBasic
+				did: string;
+				handle?: string;
+			};
+			createdAt: string;
+			targetBranch?: string;
+		};
+		markup: MarkupContext;
+		onedit?: (input: { title: string; body: string; targetBranch?: string }) => Promise<void>;
+		ondelete?: () => Promise<void>;
+		// rendered after the built-in edit/delete pair, for actions that are not acl-gated
+		extraActions?: Snippet;
+		extraInfo?: Snippet;
+	}
+
+	let { ticket, markup, onedit, ondelete, extraActions, extraInfo }: Props = $props();
+
+	const auth = getAuth();
+	const isAuthor = $derived(auth.currentDid === ticket.author.did);
+
+	let editing = $state(false);
+
+	const remove = createAction(async () => {
+		if (!ondelete) return;
+		if (!confirm("Delete this? This cannot be undone.")) return;
+		await ondelete();
+	});
+</script>
+
+{#if editing && onedit}
+	<TicketForm
+		{markup}
+		mode="edit"
+		title={ticket.title}
+		body={ticket.body}
+		targetBranch={ticket.targetBranch}
+		onsubmit={async (input) => {
+			await onedit(input);
+			editing = false;
+		}}
+		oncancel={() => (editing = false)}
+	/>
+{:else}
+	<div class="space-y-5">
+		<header>
+			<div class="mb-2 flex flex-wrap items-center">
+				<h1 class="typography-paragraph-large">
+					<span class="font-medium">{ticket.title}</span>
+					<span class="text-foreground-muted">#{ticket.rkey}</span>
+				</h1>
+				<div class="ml-auto flex items-center gap-2">
+					{#if isAuthor && onedit}
+						<Button icon={Pencil} onclick={() => (editing = true)}>Edit</Button>
+					{/if}
+					{#if isAuthor && ondelete}
+						<Button
+							icon={remove.loading ? Spinner : Trash2}
+							disabled={remove.loading}
+							onclick={remove.run}
+						>
+							Delete
+						</Button>
+					{/if}
+					{#if extraActions}
+						<div class="flex items-center gap-2 border-l border-border-default pl-2">
+							{@render extraActions()}
+						</div>
+					{/if}
+				</div>
+			</div>
+			<TicketInfoBar
+				isPull={ticket.targetBranch !== undefined}
+				state={ticket.state}
+				authorHandle={ticket.author.handle}
+				authorDid={ticket.author.did}
+				createdAt={ticket.createdAt}
+				targetBranch={ticket.targetBranch}
+				{extraInfo}
+			/>
+		</header>
+		<div class="space-y-2">
+			<TicketBody body={ticket.body} bodyHtml={ticket.bodyHtml} />
+			<Reactions reactions={[]} subjectUri={ticket.uri} />
+		</div>
+		<ErrorAlert label={remove.error} />
+	</div>
+{/if}
diff --git a/web/src/lib/components/repo/tickets/TicketBody.svelte b/web/src/lib/components/repo/tickets/TicketBody.svelte
new file mode 100644
index 000000000..1d321bcb2
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketBody.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		// raw markdown source, used as a fallback when rendering was skipped
+		body: string;
+		// sanitised html from $lib/markup, or null if the body was empty/too large
+		bodyHtml: string | null;
+	}
+
+	let { body, bodyHtml }: Props = $props();
+</script>
+
+{#if bodyHtml}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+	<article class="markup">{@html bodyHtml}</article>
+{:else if body}
+	<article class="whitespace-pre-wrap text-foreground-default">{body}</article>
+{/if}
diff --git a/web/src/lib/components/repo/tickets/TicketForm.stories.svelte b/web/src/lib/components/repo/tickets/TicketForm.stories.svelte
new file mode 100644
index 000000000..a9a9e26d9
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketForm.stories.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor, within } from "storybook/test";
+	import TicketForm from "./TicketForm.svelte";
+
+	// no-ops; submitting is inert here (needs an authed agent context)
+	const noop = () => undefined;
+	const noopAsyncFail = async () => {
+		throw new Error("no-op");
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/Tickets/TicketForm",
+		component: TicketForm,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "inline-radio" },
+				options: ["create", "edit"]
+			}
+		},
+		args: {
+			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" },
+			mode: "create",
+			onsubmit: noopAsyncFail,
+			oncancel: noop
+		}
+	});
+</script>
+
+<Story name="Create" />
+<Story
+	name="Edit"
+	args={{
+		mode: "edit",
+		title: "Add a full trending repositories view",
+		body: "I'd like a `/trending` view that shows more than the five repositories in the sidebar."
+	}}
+/>
+
+<!-- fills the form and submits with ctrl+enter against a fake `onsubmit` that rejects, showing the error alert -->
+<Story
+	name="Failed submission"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.type(canvas.getByLabelText("Title"), "Something broke");
+		await userEvent.type(
+			canvas.getByPlaceholderText(/describe your ticket/i),
+			"details{Control>}{Enter}{/Control}"
+		);
+		await waitFor(() => expect(canvas.getByRole("alert")).toHaveTextContent(/no-op/i));
+	}}
+>
+	{#snippet template(args)}
+		<TicketForm {...args} />
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/tickets/TicketForm.svelte b/web/src/lib/components/repo/tickets/TicketForm.svelte
new file mode 100644
index 000000000..b9d1a7101
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketForm.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import CirclePlus from "$icon/circle-plus";
+	import Pencil from "$icon/pencil";
+	import X from "$icon/x";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import { type MarkupContext } from "$lib/markup";
+	import { createAction } from "$lib/action.svelte";
+
+	interface Props {
+		markup: MarkupContext;
+		mode?: "create" | "edit";
+		title?: string;
+		body?: string;
+		bodyPlaceholder?: string;
+		targetBranch?: string;
+		submitLabel?: string;
+		onsubmit: (input: { title: string; body: string; targetBranch?: string }) => Promise<void>;
+		oncancel: () => void;
+	}
+
+	let {
+		markup,
+		mode = "create",
+		title: initialTitle = "",
+		body: initialBody = "",
+		bodyPlaceholder = "Describe your ticket. Markdown is supported.",
+		targetBranch: initialTargetBranch,
+		submitLabel,
+		onsubmit,
+		oncancel
+	}: Props = $props();
+
+	let title = $state(untrack(() => initialTitle));
+	let body = $state(untrack(() => initialBody));
+	let targetBranch = $state(untrack(() => initialTargetBranch));
+	const submitText = $derived(submitLabel ?? (mode === "edit" ? "Save" : "Create ticket"));
+	const submitIcon = $derived(mode === "edit" ? Pencil : CirclePlus);
+
+	const save = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		if (title.trim() === "") return;
+		await onsubmit({ title, body });
+	});
+	const canSubmit = $derived(title.trim() !== "" && !save.loading);
+</script>
+
+<form onsubmit={save.run} class="flex flex-col gap-4">
+	<div class="flex flex-col gap-1.5">
+		<label>
+			<span class="typograph-paragraph-small text-foreground-default">Title</span>
+			<Input
+				id="ticket-title"
+				name="title"
+				required
+				bind:value={title}
+				disabled={save.loading}
+			/>
+		</label>
+	</div>
+
+	{#if targetBranch}
+		<div class="p-2 debug-border">todo: target branch selector</div>
+	{/if}
+
+	<div class="flex flex-col gap-1.5">
+		<span class="typography-paragraph-small text-foreground-default">Body</span>
+
+		<MarkdownEditor
+			id="ticket-body"
+			name="body"
+			rows={12}
+			placeholder={bodyPlaceholder}
+			{markup}
+			bind:value={body}
+			disabled={save.loading}
+		/>
+	</div>
+
+	<ErrorAlert label={save.error} />
+
+	<div class="flex items-center justify-end gap-2">
+		<Button type="button" variant="default" icon={X} disabled={save.loading} onclick={oncancel}>
+			Cancel
+		</Button>
+		<Button
+			type="submit"
+			variant="primary"
+			icon={save.loading ? Spinner : submitIcon}
+			disabled={!canSubmit}
+		>
+			{submitText}
+		</Button>
+	</div>
+</form>
diff --git a/web/src/lib/components/repo/tickets/TicketInfoBar.svelte b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
new file mode 100644
index 000000000..11b334a21
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketInfoBar.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import TicketStatePill from "./TicketStatePill.svelte";
+	import User from "$lib/components/ui/User.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Tag from "$lib/components/ui/Tag.svelte";
+
+	interface Props {
+		isPull?: boolean;
+		state: "open" | "closed" | "merged";
+		authorHandle?: string;
+		authorDid: string;
+		createdAt: string;
+		targetBranch?: string;
+		extraInfo?: Snippet;
+	}
+
+	let { isPull = false, state, authorHandle, authorDid, createdAt, targetBranch, extraInfo }: Props = $props();
+</script>
+
+<div
+	class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-muted"
+>
+	<TicketStatePill {isPull} {state} />
+
+	<span class="ml-1 flex items-center gap-1">
+		opened by
+		<User size="small" handle={authorHandle} did={authorDid} link />
+	</span>
+
+	<span class="before:mr-1 before:content-['·']">
+		<TimeAgo value={createdAt} />
+	</span>
+
+	{#if targetBranch}
+		<span class="ml-1">
+			targetting <Tag class="text-monospace-small">{targetBranch}</Tag>
+		</span>
+	{/if}
+
+	{#if extraInfo}
+		{@render extraInfo()}
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.stories.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.stories.svelte
new file mode 100644
index 000000000..3e3948cf5
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketStatePill.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import TicketStatePill from "./TicketStatePill.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Tickets/TicketStatePill",
+		component: TicketStatePill,
+		tags: ["autodocs"],
+		argTypes: {
+			state: {
+				control: { type: "inline-radio" },
+				options: ["open", "closed", "merged"]
+			}
+		},
+		args: {
+			isPull: false,
+			state: "open"
+		}
+	});
+</script>
+
+<Story name="Issue Open" />
+<Story name="Issue Closed" args={{ state: "closed" }} />
+<Story name="Issue Merged" args={{ state: "merged" }} />
+<Story name="PR Open" args={{ isPull: true, state: "open" }} />
+<Story name="PR Closed" args={{ isPull: true, state: "closed" }} />
+<Story name="PR Merged" args={{ isPull: true, state: "merged" }} />
diff --git a/web/src/lib/components/repo/tickets/TicketStatePill.svelte b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
new file mode 100644
index 000000000..cc7e033ac
--- /dev/null
+++ b/web/src/lib/components/repo/tickets/TicketStatePill.svelte
@@ -0,0 +1,64 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+	import CircleDot from "$icon/circle-dot";
+	import CircleX from "$icon/circle-x";
+	import CircleCheck from "$icon/circle-check";
+	import GitMerge from "$icon/git-merge";
+	import GitPullRequest from "$icon/git-pull-request";
+	import GitPullRequestClosed from "$icon/git-pull-request-closed";
+
+	export const statePill = tv({
+		base: "inline-flex items-center gap-1 rounded-sm px-2 py-1 typography-paragraph-small text-foreground-on-emphasis select-none",
+		variants: {
+			state: {
+				open: "bg-background-success-emphasis",
+				closed: "bg-background-emphasis dark:bg-background-subtle",
+				merged: "bg-background-info-emphasis"
+			}
+		},
+		defaultVariants: {
+			state: "open"
+		}
+	});
+
+	export type StatePillVariants = VariantProps<typeof statePill>;
+	export type TicketState = NonNullable<StatePillVariants["state"]>;
+
+	const ICONS = {
+		issue: {
+			open: CircleDot,
+			closed: CircleX,
+			merged: CircleCheck
+		},
+		pull: {
+			open: GitPullRequest,
+			closed: GitPullRequestClosed,
+			merged: GitMerge
+		}
+	} as const;
+
+	const LABELS: Record<TicketState, string> = {
+		open: "Open",
+		closed: "Closed",
+		merged: "Merged"
+	};
+</script>
+
+<script lang="ts">
+	interface Props {
+		isPull?: boolean;
+		state?: TicketState;
+		class?: string;
+	}
+
+	let { isPull = false, state = "open", class: className }: Props = $props();
+
+	const kind = $derived(isPull ? "pull" : "issue");
+	const Icon = $derived(ICONS[kind][state]);
+	const label = $derived(LABELS[state]);
+</script>
+
+<span class={statePill({ state, class: className })}>
+	<Icon class="size-3 shrink-0" aria-hidden="true" />
+	<span>{label}</span>
+</span>
diff --git a/web/src/lib/components/ui/GraphCell.stories.svelte b/web/src/lib/components/ui/GraphCell.stories.svelte
new file mode 100644
index 000000000..a135c48ee
--- /dev/null
+++ b/web/src/lib/components/ui/GraphCell.stories.svelte
@@ -0,0 +1,125 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import GraphCell, { type Band } from "./GraphCell.svelte";
+
+	const run: Band[] = ["first", "middle", "middle", "last"];
+	// where the accent overlay starts and stops within that run
+	const overlay: Band[] = ["none", "first", "middle", "last"];
+
+	// what RangeSelector puts on its root, so the accent examples below resolve
+	const palette =
+		"--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)";
+
+	const accent = "--graph-line: var(--range-accent); --graph-fill: var(--range-fill)";
+
+	const { Story } = defineMeta({
+		title: "UI/GraphCell",
+		component: GraphCell,
+		tags: ["autodocs"],
+		argTypes: {
+			band: {
+				control: { type: "inline-radio" },
+				options: ["none", "first", "middle", "last", "only"]
+			},
+			direction: {
+				control: { type: "inline-radio" },
+				options: ["vertical", "horizontal"]
+			},
+			fill: { control: "boolean" },
+			tail: { control: "boolean" },
+			// colour is CSS -- try `--graph-dot: tomato; --graph-line: gray; --graph-fill: papayawhip`
+			style: { control: "text" },
+			class: { control: "text" }
+		},
+		args: {
+			band: "middle",
+			direction: "vertical",
+			fill: false,
+			tail: false,
+			style: accent
+		}
+	});
+</script>
+
+<Story name="GraphCell">
+	{#snippet template(args)}
+		<div class="flex bg-background-default p-4" style={palette}>
+			<GraphCell {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<!-- every band: a run of four, then the two loners. band comes from the run, the rest from controls -->
+<Story name="Bands">
+	{#snippet template(args)}
+		<div class="flex gap-8 bg-background-default p-4" style={palette}>
+			<div class="flex flex-col">
+				{#each run as band, i (i)}
+					<GraphCell {...args} {band} />
+				{/each}
+			</div>
+			<div class="flex flex-col">
+				<GraphCell {...args} band="only" />
+				<GraphCell {...args} band="none" />
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- how RangeSelectorRow uses it: a neutral rail with an accent run painted over it -->
+<Story name="Stacked">
+	{#snippet template()}
+		<div class="flex flex-col bg-background-default p-4" style={palette}>
+			{#each run as band, i (i)}
+				<div class="relative flex">
+					<GraphCell {band} />
+					<GraphCell
+						band={overlay[i]}
+						fill={overlay[i] !== "middle"}
+						style={accent}
+						class="absolute inset-y-0 left-0"
+					/>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+</Story>
+
+<!-- the vars inherit, so one ancestor recolours a whole graph -->
+<Story name="Inherited">
+	{#snippet template()}
+		<div
+			class="flex flex-col bg-background-default p-4"
+			style="--graph-line: tomato; --graph-fill: papayawhip"
+		>
+			{#each run as band, i (i)}
+				<GraphCell {band} fill={band !== "middle"} />
+			{/each}
+		</div>
+	{/snippet}
+</Story>
+
+<!-- the run carries on below the last visible row, so its lower line trails off -->
+<Story name="Tail">
+	{#snippet template()}
+		<div class="flex flex-col bg-background-default p-4">
+			<GraphCell band="first" />
+			<GraphCell band="middle" />
+			<GraphCell band="last" tail />
+		</div>
+	{/snippet}
+</Story>
+
+<!-- --graph-dot falls back to --graph-line, so setting it splits the node off the rail -->
+<Story name="DotVsLine">
+	{#snippet template()}
+		<div
+			class="flex flex-col bg-background-default p-4"
+			style="--graph-line: var(--color-border-strong); --graph-dot: tomato; --graph-fill: papayawhip"
+		>
+			{#each run as band, i (i)}
+				<GraphCell {band} fill={band !== "middle"} />
+			{/each}
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/GraphCell.svelte b/web/src/lib/components/ui/GraphCell.svelte
new file mode 100644
index 000000000..3068b8942
--- /dev/null
+++ b/web/src/lib/components/ui/GraphCell.svelte
@@ -0,0 +1,105 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export type Band = "none" | "first" | "middle" | "last" | "only";
+
+	// `--graph-dot` : dot border color (default to `--graph-line`)
+	// `--graph-fill` : dot fill color (default to `--color-background-default`)
+	// `--graph-line` : line color (default to `--color-border-strong`)
+	export const graphCell = tv({
+		slots: {
+			root: [
+				"relative flex w-fit justify-center",
+				"before:absolute before:top-0 before:h-5 before:border-l before:border-(--line)",
+				"after:absolute after:top-5 after:bottom-0 after:border-l after:border-(--line)"
+			],
+			dot: "z-10 size-1.75 rounded-full border border-(--dot)"
+		},
+		variants: {
+			band: {
+				none: { root: "before:hidden after:hidden" },
+				first: { root: "before:hidden" },
+				middle: {},
+				last: { root: "after:hidden" },
+				only: { root: "before:hidden after:hidden" }
+			},
+			direction: {
+				vertical: {},
+				horizontal: { root: "origin-[--spacing(5)_--spacing(5)] rotate-90" }
+			},
+			fill: {
+				true: { dot: "bg-(--dot)" },
+				false: { dot: "bg-(--fill)" }
+			},
+			tail: {
+				true: {},
+				false: {}
+			}
+		},
+		compoundVariants: [
+			{
+				tail: true,
+				band: ["last", "only"],
+				class: {
+					root: [
+						"after:block after:w-px after:border-l-0",
+						"after:bg-linear-to-b",
+						"after:from-(--line)",
+						"after:to-transparent"
+					]
+				}
+			}
+		],
+		defaultVariants: {
+			band: "middle",
+			fill: false,
+			tail: false
+		}
+	});
+
+	export type GraphCellVariants = VariantProps<typeof graphCell>;
+</script>
+
+<script lang="ts">
+	interface Props {
+		band?: Band;
+		direction?: GraphCellVariants["direction"];
+		/** solid dot in `--graph-dot`, else hollow in `--graph-fill` */
+		fill?: boolean;
+		/** on `last` / `only`, trail the lower line off in a fade -- the run continues */
+		tail?: boolean;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		band = "middle",
+		direction = "vertical",
+		fill = false,
+		tail = false,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(graphCell({ band, direction, fill, tail }));
+</script>
+
+<div class="graph-cell {classes.root({ class: className })}" {style} {...rest}>
+	<div class="flex size-10 items-center justify-center">
+		{#if band !== "none"}
+			<div class={classes.dot()}></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.graph-cell {
+		/* the fallbacks resolve once here instead of inline on every utility. they can't be
+		   declared as `--graph-line` etc. directly -- a declaration on this element would beat
+		   an ancestor's, and the caller could never set the colour from above. */
+		--line: var(--graph-line, var(--color-border-strong));
+		--dot: var(--graph-dot, var(--line));
+		--fill: var(--graph-fill, var(--color-background-default));
+	}
+</style>
diff --git a/web/src/lib/components/ui/RangeSelector.stories.svelte b/web/src/lib/components/ui/RangeSelector.stories.svelte
new file mode 100644
index 000000000..5a1731744
--- /dev/null
+++ b/web/src/lib/components/ui/RangeSelector.stories.svelte
@@ -0,0 +1,68 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import RangeSelector from "./RangeSelector.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/RangeSelector",
+		component: RangeSelector,
+		tags: ["autodocs"],
+		args: {
+			minLength: 1,
+			muteFullSelection: false
+		},
+		argTypes: {
+			minLength: { control: { type: "number", min: 1 } }
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { Range, RowActions } from "./RangeSelector.svelte";
+	import Link from "./Link.svelte";
+	import Tag from "./Tag.svelte";
+
+	let bound = $state<Range>({ start: 1, end: 3 });
+</script>
+
+{#snippet row(index: number, item: number, actions: RowActions)}
+	<div role="none" class="flex w-50 items-stretch justify-between px-3" class:h-20={item === 5}>
+		<div class="flex flex-1 items-center">
+			<div
+				role="none"
+				onpointerenter={actions.onpointerenter}
+				onpointerleave={actions.onpointerleave}
+				class="flex h-10 items-center"
+			>
+				<Link onclick={actions.onclick}>row {item} (#{index})</Link>
+			</div>
+		</div>
+		<div class="flex items-center">
+			<Tag size="regular">meta</Tag>
+		</div>
+	</div>
+{/snippet}
+
+<Story name="RangeSelector">
+	{#snippet template()}
+		<div class="flex gap-4 bg-background-default p-4">
+			<RangeSelector items={[1, 2, 3, 4, 5]} {row} bind:range={bound} />
+			<output>{bound.start}..{bound.end}</output>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="MinLength">
+	{#snippet template()}
+		<div class="flex gap-4 bg-background-default p-4">
+			<RangeSelector items={[1, 2, 3, 4, 5, 6, 7, 8]} {row} minLength={3} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="MuteFullSelection" args={{ muteFullSelection: true }}>
+	{#snippet template({ muteFullSelection })}
+		<div class="flex gap-4 bg-background-default p-4">
+			<RangeSelector items={[1, 2, 3, 4, 5, 6]} {row} {muteFullSelection} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/RangeSelector.svelte b/web/src/lib/components/ui/RangeSelector.svelte
new file mode 100644
index 000000000..108f236e6
--- /dev/null
+++ b/web/src/lib/components/ui/RangeSelector.svelte
@@ -0,0 +1,244 @@
+<script module lang="ts">
+	export type Range = { start: number; end: number };
+
+	export type RowActions = {
+		onclick: () => void;
+		/**
+		 * The hover target doesn't have to be the click target, and usually shouldn't be.
+		 * A button shorter than its row leaves dead space above and below it, so the preview
+		 * drops out every time the cursor crosses from one row to the next.
+		 * Wrap the button in a band with the row's minimum height.
+		 * e.g. `h-10 flex items-center`.
+		 * A taller row still has a gap; hovering it won't hold the preview.
+		 */
+		onpointerenter: () => void;
+		onpointerleave: () => void;
+	};
+</script>
+
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import RangeSelectorRow from "./RangeSelectorRow.svelte";
+	import { type Band } from "./GraphCell.svelte";
+
+	interface Props {
+		minLength?: number;
+		items: T[];
+		range?: Range;
+		muteFullSelection?: boolean;
+		row: Snippet<[number, T, RowActions]>;
+	}
+
+	let {
+		minLength = 1,
+		items,
+		range = $bindable({ start: 0, end: Infinity }),
+		muteFullSelection = false,
+		row
+	}: Props = $props();
+
+	type HandleId = "a" | "b";
+
+	let activeHandle: HandleId | null = $state(null);
+	let hovered: number | null = $state(null);
+	let flipped = $state(false);
+	let anchorHandle: HandleId = $state("b");
+
+	function clamp(i: number) {
+		return Math.max(0, Math.min(i, items.length - 1));
+	}
+
+	let listRange = $derived({ start: 0, end: items.length - 1 });
+	let selectedRange = $derived({ start: clamp(range.start), end: clamp(range.end) });
+
+	let resting = $derived(
+		flipped
+			? { a: selectedRange.end, b: selectedRange.start }
+			: { a: selectedRange.start, b: selectedRange.end }
+	);
+
+	let mover: HandleId = $derived(activeHandle ?? sibling(anchorHandle));
+	let interacting = $derived(activeHandle !== null || hovered !== null);
+
+	let pos = $derived(hovered !== null ? { ...resting, [mover]: hovered } : resting);
+
+	function sibling(handle: HandleId): HandleId {
+		return handle === "a" ? "b" : "a";
+	}
+
+	function other(handle: HandleId) {
+		return resting[sibling(handle)];
+	}
+
+	function legal(next: number, handle: HandleId) {
+		return Math.abs(next - other(handle)) + 1 >= minLength;
+	}
+
+	// where row `i` sits inside a range, so the row can style its own ends
+	function band(i: number, { start, end }: Range): Band {
+		if (i < start || i > end) return "none";
+		if (start === end) return "only";
+		if (i === start) return "first";
+		if (i === end) return "last";
+		return "middle";
+	}
+
+	// just the span between the two handles -- at rest that's `selectedRange`
+	let displayRange = $derived({ start: Math.min(pos.a, pos.b), end: Math.max(pos.a, pos.b) });
+
+	let muted = $derived(
+		muteFullSelection &&
+			selectedRange.start === listRange.start &&
+			selectedRange.end === listRange.end
+	);
+
+	let palette = $derived(
+		muted && !interacting
+			? "--range-accent: var(--color-foreground-placeholder); --range-fill: var(--color-background-subtle)"
+			: "--range-accent: var(--color-background-info-emphasis); --range-fill: var(--color-background-info-subtle)"
+	);
+
+	let list: HTMLDivElement;
+
+	function grab(event: PointerEvent, handle: HandleId) {
+		activeHandle = handle;
+		hovered = null;
+		event.preventDefault();
+		// captured on the list so the drag keeps tracking once the cursor leaves it
+		list.setPointerCapture(event.pointerId);
+	}
+
+	function move(event: PointerEvent) {
+		if (!activeHandle) return;
+
+		const row = document
+			.elementFromPoint(event.clientX, event.clientY)
+			?.closest("[data-index]");
+
+		if (!row) return;
+
+		// ignoring an illegal row
+		const next = Number((row as HTMLElement).dataset.index);
+		if (legal(next, mover)) hovered = next;
+	}
+
+	function commit(handle: HandleId, at: number) {
+		const fixed = other(handle);
+		flipped = handle === "a" ? at > fixed : at < fixed;
+		anchorHandle = handle;
+		range = { start: Math.min(at, fixed), end: Math.max(at, fixed) };
+	}
+
+	function rowActions(at: number): RowActions {
+		return {
+			onclick: () => {
+				if (!legal(at, mover)) return;
+				commit(mover, at);
+				// the click already moved a handle and handed `mover` to its sibling; without
+				// this the still cursor would immediately preview *that* handle collapsing
+				// onto the row just clicked
+				hovered = null;
+			},
+			onpointerenter: () => {
+				if (activeHandle === null && legal(at, mover)) hovered = at;
+			},
+			onpointerleave: () => {
+				if (activeHandle === null) hovered = null;
+			}
+		};
+	}
+
+	function release() {
+		if (activeHandle !== null && hovered !== null) commit(activeHandle, hovered);
+		activeHandle = null;
+		hovered = null;
+	}
+
+	function handleKeyDown(event: KeyboardEvent, handle: HandleId) {
+		const delta = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+		if (!delta) return;
+
+		const next = pos[handle] + delta;
+		if (next < 0 || next >= items.length) return;
+		if (!legal(next, handle)) return;
+
+		event.preventDefault();
+		commit(handle, next);
+	}
+</script>
+
+<div
+	bind:this={list}
+	role="group"
+	aria-label="Range"
+	class:cursor-row-resize={activeHandle !== null}
+	class="grid grid-cols-1"
+	style={palette}
+	onpointermove={move}
+	onpointerup={release}
+	onpointercancel={release}
+>
+	{#each items as item, i (i)}
+		<RangeSelectorRow
+			index={i}
+			position={band(i, listRange)}
+			selected={band(i, selectedRange)}
+			displayed={band(i, displayRange)}
+		>
+			{@render row(i, item, rowActions(i))}
+		</RangeSelectorRow>
+	{/each}
+
+	{#snippet bandBox({ start, end }: Range, styles: string)}
+		<div
+			class="pointer-events-none {styles}"
+			style="grid-column: 1; grid-row: {start + 1} / {end + 2}"
+		></div>
+	{/snippet}
+
+	{#snippet pill({ start, end }: Range)}
+		{#if end > start}
+			{@render bandBox(
+				{ start, end: end - 1 },
+				"mt-2.5 -mb-7.5 ml-2.5 w-5 rounded-full bg-(--range-fill) outline-1 outline-border-default"
+			)}
+		{:else}
+			{@render bandBox(
+				{ start: end, end },
+				"mt-2.5 ml-2.5 size-5 self-start rounded-full bg-(--range-fill) outline-1 outline-border-default"
+			)}
+		{/if}
+	{/snippet}
+
+	{#snippet handle(id: HandleId, label: string)}
+		<div
+			class="z-10 flex size-10 touch-none items-center justify-center hover:cursor-row-resize"
+			class:pointer-events-none={activeHandle !== null}
+			style="grid-column: 1; grid-row: {pos[id] + 1}"
+			role="slider"
+			tabindex="0"
+			aria-label={label}
+			aria-valuenow={pos[id]}
+			aria-valuemin={0}
+			aria-valuemax={items.length - 1}
+			onpointerdown={(e) => grab(e, id)}
+			onkeydown={(e) => handleKeyDown(e, id)}
+			title="Drag or use arrow keys to adjust the range"
+		></div>
+	{/snippet}
+
+	{#if items.length > 0}
+		{#if interacting}
+			{@render bandBox(displayRange, "bg-background-subtle rounded")}
+		{/if}
+		{#if !muted}
+			{@render bandBox(
+				selectedRange,
+				"bg-background-inset rounded border border-border-default"
+			)}
+		{/if}
+		{@render pill(displayRange)}
+		{@render handle("a", "Range boundary 1")}
+		{@render handle("b", "Range boundary 2")}
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/RangeSelectorRow.svelte b/web/src/lib/components/ui/RangeSelectorRow.svelte
new file mode 100644
index 000000000..07fbbc5d6
--- /dev/null
+++ b/web/src/lib/components/ui/RangeSelectorRow.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import GraphCell, { type Band } from "./GraphCell.svelte";
+
+	interface Props {
+		index: number;
+		position?: Band;
+		selected?: Band;
+		displayed?: Band;
+		children: Snippet;
+	}
+
+	let { index, position = "middle", displayed = "none", children }: Props = $props();
+</script>
+
+<div
+	data-index={index}
+	style="grid-column: 1; grid-row: {index + 1}"
+	class="group relative box-border flex min-h-10 border-border-default"
+>
+	<div class="relative flex">
+		<GraphCell band={position} />
+		<GraphCell
+			band={displayed}
+			fill={displayed !== "middle"}
+			style="--graph-line: var(--range-accent); --graph-fill: var(--range-fill)"
+			class="absolute inset-y-0 left-0"
+		/>
+	</div>
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/ui/SplitButton.stories.svelte b/web/src/lib/components/ui/SplitButton.stories.svelte
new file mode 100644
index 000000000..62ae2e011
--- /dev/null
+++ b/web/src/lib/components/ui/SplitButton.stories.svelte
@@ -0,0 +1,45 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import GitMerge from "$icon/git-merge";
+	import CircleCheck from "$icon/circle-check";
+	import Trash2 from "$icon/trash-2";
+	import SplitButton from "./SplitButton.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/SplitButton",
+		component: SplitButton,
+		tags: ["autodocs"],
+		args: {
+			options: [
+				{ label: "Merge (rebase)", icon: GitMerge },
+				{
+					label: "Manually mark as merged",
+					buttonLabel: "Merge (manual)",
+					icon: CircleCheck
+				}
+			]
+		}
+	});
+</script>
+
+<!-- Picking from the menu arms an option, it does not run it — the primary
+	button takes over the armed option's label, icon and handler. -->
+
+<Story name="Default" />
+
+<Story name="Primary" args={{ variant: "primary" }} />
+
+<!-- Button owns the spinner, so `loading` disables the primary half on its own -->
+<Story name="Loading" args={{ variant: "primary", loading: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />
+
+<Story
+	name="With a danger option"
+	args={{
+		options: [
+			{ label: "Merge (rebase)", icon: GitMerge },
+			{ label: "Close without merging", icon: Trash2, danger: true }
+		]
+	}}
+/>
diff --git a/web/src/lib/components/ui/SplitButton.svelte b/web/src/lib/components/ui/SplitButton.svelte
new file mode 100644
index 000000000..731edef01
--- /dev/null
+++ b/web/src/lib/components/ui/SplitButton.svelte
@@ -0,0 +1,84 @@
+<script module lang="ts">
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
+	export interface SplitButtonOption {
+		/** shown in the menu, where the options are read side by side and need to disambiguate */
+		label: string;
+		/** shown on the button once armed; falls back to `label` when the two can be the same */
+		buttonLabel?: string;
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		onclick?: () => void;
+		danger?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import ChevronDown from "$icon/chevron-down";
+	import Button, { type ButtonVariants } from "./Button.svelte";
+	import ButtonGroup from "./ButtonGroup.svelte";
+	import Dropdown, { type DropdownVariants } from "./Dropdown.svelte";
+	import DropdownItem from "./DropdownItem.svelte";
+
+	interface Props {
+		options: SplitButtonOption[];
+		/** index of the armed option; two-way, so a caller can react to the choice */
+		selected?: number;
+		variant?: ButtonVariants["variant"];
+		size?: ButtonVariants["size"];
+		align?: DropdownVariants["align"];
+		menuLabel?: string;
+		disabled?: boolean;
+		loading?: boolean;
+		class?: string;
+	}
+
+	let {
+		options,
+		selected = $bindable(0),
+		variant = "default",
+		size,
+		align = "right",
+		menuLabel = "More options",
+		disabled = false,
+		loading = false,
+		class: className
+	}: Props = $props();
+
+	// options can be built from a filtered list, so neither an empty array nor a
+	// stale index may reach options[selected]
+	const current = $derived(options[Math.min(Math.max(selected, 0), options.length - 1)]);
+</script>
+
+{#if current}
+	<ButtonGroup class={className}>
+		<Button
+			class="flex-1"
+			{variant}
+			{size}
+			{disabled}
+			{loading}
+			icon={current.icon}
+			onclick={current.onclick}
+		>
+			<span>{current.buttonLabel ?? current.label}</span>
+		</Button>
+		<!-- the menu stays open even when the armed option is disabled, so a caller
+		     can gate one option (a conflicting merge, say) without trapping the user -->
+		<Dropdown variant="button" buttonVariant={variant} {size} {align} label={menuLabel}>
+			{#snippet trigger()}
+				<ChevronDown class="size-4" />
+			{/snippet}
+			{#each options as option, index (option.label)}
+				<DropdownItem
+					icon={option.icon}
+					danger={option.danger}
+					{size}
+					onclick={() => (selected = index)}
+				>
+					{option.label}
+				</DropdownItem>
+			{/each}
+		</Dropdown>
+	</ButtonGroup>
+{/if}
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
index c8d3ad0df..9cb8f4150 100644
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -6,7 +6,7 @@
 		variants: {
 			// the common surface padding; turn off to lay out children yourself
 			padded: {
-				true: "px-6 py-4",
+				true: "p-4",
 				false: ""
 			}
 		},
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 9327339bb..de5cb2e56 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -7,6 +7,7 @@
 			color: {
 				default: "border border-border-default bg-background-default text-foreground-default",
 				gray: "border border-transparent bg-background-inset text-foreground-default",
+				highlight: "border border-transparent bg-background-highlight text-foreground-highlight",
 				success:
 					"border border-transparent bg-background-success-subtle text-foreground-success-strong",
 				danger:
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts b/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts
new file mode 100644
index 000000000..449803bf3
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts
@@ -0,0 +1,81 @@
+import { error } from "@sveltejs/kit";
+import { createBobbinClient } from "$lib/api/client";
+import { COMMENT_AUTHOR_DOCS } from "$lib/api/descriptors";
+import { authorOf, enrich, target } from "$lib/api/enrich";
+import { getPullView, type PullState } from "$lib/api/records";
+import { rkeyFromUri } from "$lib/api/uri";
+import { renderMarkup, type MarkupContext } from "$lib/markup";
+import type { CommentListPage } from "$lib/api/comment";
+import type { CommentView } from "$lib/components/comment/comments";
+import type { LayoutLoad } from "./$types";
+
+export const load: LayoutLoad = async (event) => {
+	const parent = await event.parent();
+	const uri = event.params.aturi;
+	if (!uri.startsWith("at://")) error(404, "Pull request not found");
+
+	const repoDid = parent.repo.repoDid;
+	if (!repoDid) error(404, "Pull request not found");
+
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+
+	const markup: MarkupContext = {
+		repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
+		ref: parent.repo.defaultBranch,
+		host: event.url.host
+	};
+
+	const [pullView, page] = await Promise.all([
+		getPullView(ctx, uri).catch(() => null),
+		enrich<CommentListPage>(ctx, {
+			xrpc: "sh.tangled.feed.listComments",
+			params: { subject: uri, order: "asc", limit: 100 },
+			enrich: [target(COMMENT_AUTHOR_DOCS, ["items[].uri"])]
+		}).catch(() => null)
+	]);
+
+	// TODO: fetch versions separately from PR(ticket) itself.
+	// const pullView = getTicketView(aturi)
+	// const pullVersions = listPullVersions(aturi)
+
+	if (!pullView) error(404, "Pull request not found");
+	if (!pullView.versions.length)
+		error(404, "This pull request has no ref-based versions to show");
+
+	const body = pullView.body?.text ?? "";
+	const bodyHtml = body ? await renderMarkup(body, markup).catch(() => null) : null;
+
+	const comments = await Promise.all(
+		(page?.output.items ?? []).map(async (item): Promise<CommentView> => {
+			const author = authorOf(page?.data ?? {}, item.uri, COMMENT_AUTHOR_DOCS);
+			const body = item.value.body?.text ?? "";
+			return {
+				uri: item.uri,
+				cid: item.cid,
+				rkey: rkeyFromUri(item.uri),
+				authorDid: author.did,
+				authorHandle: author.handle,
+				createdAt: item.value.createdAt,
+				embed: item.value.embed,
+				body,
+				bodyHtml: body ? await renderMarkup(body, markup).catch(() => null) : null
+			};
+		})
+	);
+
+	return {
+		comments,
+		markup,
+		sourceRepoDid: pullView.source?.repo?.did ?? repoDid,
+		pull: {
+			...pullView,
+			rkey: rkeyFromUri(pullView.uri),
+			state: (pullView.state ?? "open") as PullState,
+			body,
+			bodyHtml
+		}
+	};
+};
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.svelte
index 6d864e063..a51933765 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.svelte
@@ -1,32 +1,51 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
-	import Pencil from "$icon/pencil";
+	import { now as tidNow } from "@atcute/tid";
+	import Bell from "$icon/bell";
+	import Workflow from "$icon/workflow";
+	import IterationCcw from "$icon/iteration-ccw";
+	import PanelRightClose from "$icon/panel-right-close";
+	import MessagesSquare from "$icon/messages-square";
+	import Circle from "$icon/circle";
 	import { createBobbinClient } from "$lib/api/client";
+	import { putComment, type CommentRecord } from "$lib/api/comment";
 	import { mergeCheck } from "$lib/api/gitmirror";
-	import { getBranch } from "$lib/api/knotmirror";
-	import { editPull } from "$lib/api/pull";
-	import { activeCommitId, activeVersion, seeAll } from "$lib/api/pullRoute";
-	import { createLoad } from "$lib/action.svelte";
+	import {
+		deletePull,
+		editPull,
+		keepCommit,
+		mergeCommit,
+		putPullStatus,
+		resubmitPull
+	} from "$lib/api/pull";
+	import { gitTarget } from "$lib/api/gitclient";
+	import { loadDiff, type PullDiffDeps, type PullDiffSpec } from "$lib/api/pullDiff";
+	import { getBranch, getMergeBase } from "$lib/api/knotmirror";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import { resizable } from "$lib/actions/resizable";
 	import { getAuth } from "$lib/auth.svelte";
 	import { renderMarkup } from "$lib/markup";
-	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
 	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
-	import IssueBody from "$lib/components/repo/issues/IssueBody.svelte";
-	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
-	import IssueHeader from "$lib/components/repo/issues/IssueHeader.svelte";
-	import IssueLabelPanel from "$lib/components/repo/issues/IssueLabelPanel.svelte";
-	import PullCommitList from "$lib/components/repo/pulls/PullCommitList.svelte";
-	import PullDiffPanel from "$lib/components/repo/pulls/PullDiffPanel.svelte";
-	import PullDiscussion from "$lib/components/repo/pulls/PullDiscussion.svelte";
-	import PullInfoBar from "$lib/components/repo/pulls/PullInfoBar.svelte";
-	import PullMetaPanel from "$lib/components/repo/pulls/PullMetaPanel.svelte";
+	import Ticket from "$lib/components/repo/tickets/Ticket.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { ResolvedPathname } from "$app/types";
-	import type { PullState } from "$lib/api/records";
 	import type { Did } from "@atcute/lexicons/syntax";
-	import type { CommentView, ThreadInput } from "$lib/components/comment/comments";
+	import type { PullState } from "$lib/api/records";
+	import type { CommentView } from "$lib/components/comment/comments";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import PullDiff from "$lib/components/repo/pulls/PullDiff.svelte";
+	import PullDiscussion from "$lib/components/repo/pulls/PullDiscussion.svelte";
+	import PullReviewCommentForm from "$lib/components/repo/pulls/PullReviewCommentForm.svelte";
+	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
 	import type { CommitSummary } from "$lib/components/repo/types";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import PullActions, { type MergeStyle } from "$lib/components/repo/pulls/PullActions.svelte";
+	import PullCommitListHeader from "$lib/components/repo/pulls/PullCommitListHeader.svelte";
+	import PullCommitListInterdiff from "$lib/components/repo/pulls/PullCommitListInterdiff.svelte";
+	import PullCommitListDiff from "$lib/components/repo/pulls/PullCommitListDiff.svelte";
+	import TicketInfoBar from "$lib/components/repo/tickets/TicketInfoBar.svelte";
 
 	let { data } = $props();
 
@@ -34,48 +53,11 @@
 
 	let pull = $derived(data.pull);
 	let view = $derived(data.view);
-	let active = $derived(activeVersion(view));
-
-	// close/merge/reopen flip the state optimistically: bobbin has no read-your-writes, so
-	// re-reading right after the write would still report the old state. the override only
-	// lives until the next load, which is when bobbin has caught up
-	let stateOverride = $state<PullState | undefined>();
-	$effect(() => {
-		void data.pull.state;
-		stateOverride = undefined;
-	});
-	const pullState = $derived(stateOverride ?? pull.state);
-
-	// an edit overrides title/body for the same reason: bobbin only has the new record once it
-	// has ingested it. reassigning `pull` would also reset `versions`, which holds optimistically
-	// inserted comments, so the edit keeps its own override instead
-	let editing = $state(false);
-	let edited = $state<{ title: string; body: string; bodyHtml: string | null }>();
-	$effect(() => {
-		void data.pull.title;
-		edited = undefined;
-	});
-	const title = $derived(edited?.title ?? pull.title);
-	const body = $derived(edited?.body ?? pull.body);
-	const bodyHtml = $derived(edited ? edited.bodyHtml : pull.bodyHtml);
 
-	const savePull = async (input: { title: string; body: string }) => {
-		const agent = auth.agent;
-		if (!agent) return;
-		await editPull(agent, pull.rkey, input);
-		edited = {
-			...input,
-			bodyHtml: input.body
-				? await renderMarkup(input.body, data.markup).catch(() => null)
-				: null
-		};
-		editing = false;
-	};
+	const isAuthor = $derived(auth.currentDid === pull.author.did);
 
+	const pullState = $derived(pull.state);
 	const head = $derived(pull.versions.at(-1)?.head);
-
-	// the mergeability check runs in the browser after paint rather than blocking the loader:
-	// it is a real 3-way merge on gitmirror. `createLoad` reruns when the pull's head moves
 	const check = createLoad(async () => {
 		if (pullState !== "open" || !data.repo.repoDid || !head) return undefined;
 		const mirror = createBobbinClient({
@@ -86,7 +68,7 @@
 			serviceUrl: data.publicConfig.bobbinUrl,
 			fetch: globalThis.fetch
 		});
-		// gitmirror compares two commits, so the target branch has to be resolved to its tip
+		// resolve target branch to raw commit ID
 		const target = await getBranch(mirror, {
 			repo: data.repo.repoDid,
 			name: pull.targetBranch
@@ -99,260 +81,417 @@
 		});
 	});
 
-	// the appview shows one flat "merge check failed" for every failure mode
-	const actions = $derived({
-		...data.actions,
-		mergeCheck: check.error
-			? { error: "merge check failed" }
-			: check.data
-				? { conflicts: check.data.conflicts }
-				: undefined
+	const short = (hash: string) => hash.slice(0, 8);
+
+	// the at-uri sits outside `resolve`, which would drop the empty segment in `at://`
+	let pullsBase = $derived(resolve(`/${data.repo.ownerHandle}/${data.repo.name}/pulls` as "/"));
+	let href = $derived(
+		(version: number | string, change?: string) =>
+			`${pullsBase}/${data.uri}/${version}${change ? `/${change}` : ""}` as ResolvedPathname
+	);
+	const versionRange = $derived<Range>({
+		start: view.mode === "diff" ? view.version : view.oldVersion,
+		end: view.version
 	});
+	const isInterdiff = $derived(versionRange.start != versionRange.end);
 
-	// the rail's comments are bucketed by round, so the page keeps its own copy and
-	// patches the right bucket optimistically — same shape as the issue page's
-	// insert/update/remove, minus the reply threading pulls don't have
-	let versions = $derived(pull.versions);
+	let comments = $derived(data.comments);
+	let commits = $derived(data.commits);
 
-	const patchRound = (round: number, next: (comments: CommentView[]) => CommentView[]) => {
-		versions = versions.map((version, index) =>
-			index === round ? { ...version, comments: next(version.comments) } : version
-		);
+	// the commit rows are `[...commits, "base"]`, newest first, so row 0 is the newest commit
+	// and row `commits.length` is the base marker -- the exclusive bottom of a range
+	const rowOf = (hash: string) => {
+		const row = commits.findIndex((commit) => commit.hash === hash);
+		return row !== -1 ? row : undefined;
 	};
+	// an interdiff's second url slot carries a change-id rather than a commit range, so there
+	// is nothing to narrow to there
+	const commitRange = $derived<Range>(
+		view.mode === "diff"
+			? { start: rowOf(view.head) ?? 0, end: rowOf(view.base) ?? commits.length }
+			: { start: 0, end: commits.length }
+	);
 
-	const insertComment = (round: number, { comment }: ThreadInput) =>
-		patchRound(round, (comments) => [...comments, comment]);
+	// rows are newest-first and `end` names the base marker, so in range is [start, end)
+	const inCommitRange = (commit: CommitSummary) => {
+		const row = rowOf(commit.hash);
+		return row !== undefined && row >= commitRange.start && row < commitRange.end;
+	};
 
-	const updateComment = ({ comment }: ThreadInput) => {
-		versions = versions.map((version) => ({
-			...version,
-			comments: version.comments.map((c) => (c.uri === comment.uri ? comment : c))
-		}));
+	const confirmVersions = ({ start, end }: Range) => {
+		void goto(href(start === end ? `${start}` : `${start}..${end}`));
 	};
 
-	const removeComment = (uri: string) => {
-		versions = versions.map((version) => ({
-			...version,
-			comments: version.comments.filter((c) => c.uri !== uri)
-		}));
+	const confirmCommits = ({ start, end }: Range) => {
+		const head = commits[start]?.hash ?? commits[0]?.hash ?? "";
+		const base = commits[end]?.hash ?? "";
+		const whole = start === 0 && end >= commits.length;
+		void goto(href(view.version, whole ? undefined : `${short(base)}..${short(head)}`));
 	};
 
-	const short = (hash: string) => hash.slice(0, 8);
+	const confirmChangeId = (changeId: string) => {
+		void goto(href(`${versionRange.start}..${versionRange.end}`, changeId || undefined));
+	};
 
-	// the at-uri sits outside `resolve`, which would drop the empty segment in `at://`
-	let pullsBase = $derived(resolve(`/${data.repo.ownerHandle}/${data.repo.name}/pulls` as "/"));
-	let href = $derived(
-		(version: number | string, range?: string) =>
-			`${pullsBase}/${data.uri}/${version}${range ? `/${range}` : ""}` as ResolvedPathname
+	const currentCommit = $derived(
+		view.mode === "diff"
+			? view.head
+			: view.changeId
+				? (commits.find((commit) => commit.changeId == view.changeId)?.hash ?? "")
+				: view.to.head
 	);
-	// the appview's interdiff button always steps back exactly one version
-	let interdiffRange = $derived(`${active - 1}..${active}`);
-
-	// a commit row narrows the current view: to its own range in a diff, to its
-	// change in an interdiff. the appview links 8-char hashes and resolves them
-	// server-side; `git.temp2.getDiff` only takes full shas, so link those
-	let commitHref = $derived((commit: CommitSummary) =>
-		view.mode === "interdiff"
-			? href(interdiffRange, commit.changeId)
-			: href(view.version, `${commit.parent ?? ""}..${commit.hash}`)
-	);
-	let seeAllHref = $derived(
-		view.mode === "interdiff"
-			? href(`${view.version1}..${view.version2}`, "all")
-			: href(view.version)
+
+	const diffSpec = $derived<PullDiffSpec>(
+		view.mode === "diff"
+			? {
+					kind: "diff",
+					repo: data.sourceRepoDid as Did,
+					version: { base: view.base, head: view.head }
+				}
+			: {
+					kind: "interdiff",
+					repo: data.sourceRepoDid as Did,
+					oldVersion: view.from,
+					version: view.to,
+					changeId: view.changeId || undefined
+				}
 	);
 
-	// the rail collapses on desktop and is a bottom sheet below lg, so the page
-	// owns the state the diff toolbar and the rail both read
+	const diffDeps = $derived<PullDiffDeps>({
+		ctx: createBobbinClient({
+			serviceUrl: data.publicConfig.bobbinUrl,
+			fetch: globalThis.fetch
+		}),
+		git: gitTarget(
+			data.publicConfig,
+			{ uri: data.repo.uri, repoDid: data.sourceRepoDid },
+			globalThis.fetch
+		)
+	});
+
+	const diff = createLoad(() => loadDiff(diffDeps, diffSpec));
+
 	let discussionOpen = $state(true);
-	let railOpen = $state(true);
-	let rail = $state<HTMLElement>();
-
-	// the sheet dims the page and locks its scroll while it is up on mobile
-	let sheetUp = $derived(discussionOpen && railOpen);
-	$effect(() => {
-		if (typeof document === "undefined") return;
-		const mobile = !window.matchMedia("(min-width: 1024px)").matches;
-		document.body.style.overflow = mobile && sheetUp ? "hidden" : "";
-		return () => (document.body.style.overflow = "");
+	let discussion = $state<HTMLElement>();
+	let discussionWidth = $state(0);
+	let formHeight = $state(0);
+
+	const insertComment = async (body: string, commit?: string) => {
+		const agent = auth.agent;
+		const user = auth.currentUser;
+		if (!agent || !user) return;
+		const rkey = tidNow();
+		const createdAt = new Date().toISOString();
+		const embed: CommentRecord["embed"] = commit
+			? {
+					$type: "sh.tangled.embed.commit",
+					repo: data.sourceRepoDid as Did,
+					commit: { $type: "sh.tangled.git.oid", oid: commit }
+				}
+			: undefined;
+		const saved = await putComment(agent, rkey, {
+			$type: "sh.tangled.feed.comment",
+			subject: { uri: data.uri, cid: pull.cid } as CommentRecord["subject"],
+			body: { $type: "sh.tangled.markup.markdown", text: body },
+			embed,
+			createdAt
+		});
+		comments = [
+			...comments,
+			{
+				uri: saved.uri,
+				cid: saved.cid,
+				rkey,
+				authorDid: user.did,
+				authorHandle: user.handle,
+				createdAt,
+				embed,
+				body,
+				// rendered client-side so an optimistic comment matches a loaded one
+				bodyHtml: await renderMarkup(body, data.markup).catch(() => null)
+			}
+		];
+		if (commit) {
+			commits = commits.map((row) =>
+				row.hash === commit ? { ...row, commentCount: (row.commentCount ?? 0) + 1 } : row
+			);
+		}
+	};
+
+	const updateComment = async (edited: CommentView) => {
+		const agent = auth.agent;
+		const user = auth.currentUser;
+		if (!agent || !user) return;
+		await putComment(agent, edited.rkey, {
+			$type: "sh.tangled.feed.comment",
+			subject: { uri: data.uri, cid: pull.cid } as CommentRecord["subject"],
+			body: { $type: "sh.tangled.markup.markdown", text: edited.body },
+			embed: edited.embed,
+			createdAt: edited.createdAt
+		});
+	};
+
+	const updatePull = async ({ title, body }: { title: string; body: string }) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await editPull(agent, pull.rkey, { title, body });
+		pull = {
+			...pull,
+			title,
+			body,
+			bodyHtml: body ? await renderMarkup(body, data.markup).catch(() => null) : null
+		};
+	};
+
+	const removePull = async () => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await deletePull(agent, pull.rkey);
+		await goto(pullsBase);
+	};
+
+	const setStatus = createAction(async (state: PullState) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await putPullStatus(agent, data.uri, state);
+		pull = { ...pull, state };
+	});
+
+	const doMerge = createAction(async () => {
+		const agent = auth.agent;
+		if (!agent || !head || !data.repo.repoDid) return;
+		await mergeCommit(agent, data.repo.knot, {
+			target: { repo: data.repo.repoDid, branch: pull.targetBranch },
+			source: { repo: data.sourceRepoDid, commit: head },
+			style: "rebase"
+		});
+		await putPullStatus(agent, data.uri, "merged");
+		pull = { ...pull, state: "merged" };
+	});
+
+	const runMerge = (style: MergeStyle) =>
+		style === "manual" ? setStatus.run("merged") : doMerge.run();
+
+	let showHeader = $state(false);
+	const stickyTrigger = (node: HTMLElement) => {
+		const io = new IntersectionObserver(([e]) => (showHeader = e.boundingClientRect.top < 68), {
+			rootMargin: "-68px 0px 0px 0px"
+		});
+		io.observe(node);
+		return { destroy: () => io.disconnect() };
+	};
+
+	const sourceBranch = $derived(pull.source?.branch ?? "");
+
+	// the branch tip lives outside the record, so it has to be resolved live
+	const sourceHead = createLoad(async () => {
+		if (!isAuthor || pullState !== "open" || !sourceBranch) return undefined;
+		const mirror = createBobbinClient({
+			serviceUrl: data.publicConfig.knotMirrorUrl,
+			fetch: globalThis.fetch
+		});
+		return (await getBranch(mirror, { repo: data.sourceRepoDid, name: sourceBranch })).hash;
+	});
+	const canResubmit = $derived(Boolean(sourceHead.data) && sourceHead.data !== head);
+
+	const resubmit = createAction(async () => {
+		const agent = auth.agent;
+		const oid = sourceHead.data;
+		if (!agent || !oid) return;
+		const mirror = createBobbinClient({
+			serviceUrl: data.publicConfig.knotMirrorUrl,
+			fetch: globalThis.fetch
+		});
+		const mergeBase = await getMergeBase(mirror, {
+			repo: data.sourceRepoDid,
+			base: pull.targetBranch,
+			head: sourceBranch
+		});
+		await keepCommit(agent, data.repo.knot, {
+			repo: data.sourceRepoDid,
+			oid,
+			record: data.uri
+		});
+		await resubmitPull(agent, pull.rkey, {
+			base: mergeBase.commit,
+			head: oid,
+			createdAt: new Date().toISOString()
+		});
+		await goto(href("latest"), { invalidateAll: true });
 	});
 </script>
 
 <svelte:head>
 	<title
-		>{title} &middot; Pull Request #{pull.rkey} &middot; {data.repo.ownerHandle}/{data.repo
+		>{pull.title} &middot; Pull Request #{pull.rkey} &middot; {data.repo.ownerHandle}/{data.repo
 			.name} &middot; Tangled</title
 	>
 </svelte:head>
 
-{#snippet pullActions()}
-	<button
-		type="button"
-		aria-label="Edit pull request"
-		class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
-		onclick={() => (editing = true)}
-	>
-		<Pencil class="size-3" />
-	</button>
-{/snippet}
-
-<!--
-	unlike every other repo page this one is laid out by the page, not the layout:
-	the discussion rail runs the full page height beside the repo chrome, and the
-	diff below needs the whole viewport width, so only the conversation half stays
-	inside the reading column
--->
-<div class="group/pr-layout flex px-1">
-	<div class="min-w-0 flex-1">
-		<!-- max-w-5xl is the layout's max-w-screen-lg, spelled the way the linter wants -->
-		<div class="mx-auto max-w-5xl">
-			<RepoHeader
-				repo={data.repo}
-				counts={data.counts}
-				viewerStarRkey={data.viewerStarRkey}
-			/>
-			<RepoTabs repo={data.repo} counts={data.counts} active="pulls" />
-
-			<div class="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-[4fr_1fr]">
-				<div class="min-w-0">
-					<TabPanel>
-						{#if editing}
-							<IssueForm
-								mode="edit"
-								repoDid={data.repo.repoDid ?? ""}
-								markup={data.markup}
-								{title}
-								{body}
-								bodyPlaceholder="Describe your pull request. Markdown is supported."
-								submit={savePull}
-								oncancel={() => (editing = false)}
-							/>
-						{:else}
-							<IssueHeader {title} rkey={pull.rkey} />
-							<PullInfoBar
-								state={pullState}
-								authorHandle={pull.author.handle}
-								authorDid={pull.author.did}
-								createdAt={pull.createdAt}
-								ownerHandle={data.repo.ownerHandle}
-								repoName={data.repo.name}
-								targetBranch={pull.targetBranch}
-								sourceBranch={pull.source?.branch}
-								actions={data.actions.isAuthor ? pullActions : undefined}
-							/>
-							<!-- todo: reactions once the loader returns them -->
-							<IssueBody {body} {bodyHtml} />
-						{/if}
-					</TabPanel>
-				</div>
-
-				<div
-					class="flex min-w-0 flex-col gap-6 lg:col-start-2 lg:row-span-2 lg:row-start-1"
-				>
-					<IssueLabelPanel />
-					<PullMetaPanel
-						uri={data.uri}
-						repoFullName={`${data.repo.ownerHandle}/${data.repo.name}`}
+<div class="flex items-stretch gap-1">
+	<div class="min-w-0 flex-1 space-y-2 py-4 pl-4">
+		<!-- TODO: extract as a component -->
+		<div class="sticky top-0 z-30 mb-0 h-0">
+			<div
+				class="absolute inset-x-0 top-0 flex h-17 items-center justify-between border-x border-b border-border-default bg-background-default px-4 {showHeader
+					? 'opacity-100'
+					: 'pointer-events-none opacity-0'}"
+			>
+				<div class="flex items-center gap-2">
+					<h1 class="typography-paragraph-large">
+						<span class="font-medium">{pull.title}</span>
+						<span class="text-foreground-muted">#{pull.rkey}</span>
+					</h1>
+					<TicketInfoBar
+						isPull
+						state={pull.state}
+						authorHandle={pull.author.handle}
+						authorDid={pull.author.did}
+						createdAt={pull.createdAt}
 					/>
 				</div>
-
-				<div class="lg:col-start-1 lg:row-start-2">
-					<h2 id="commits" class="mb-2 typography-heading-4">Commits</h2>
-					{#if data.commitsError}
-						<div
-							class="flex min-h-32 w-full items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-4 typography-paragraph-regular text-foreground-danger"
+				{#if !discussionOpen}
+					<Button icon={Circle} onclick={() => (discussionOpen = true)} />
+				{/if}
+			</div>
+		</div>
+		<RepoTabs repo={data.repo} counts={data.counts} active={"pulls"} />
+		<!-- PR Body -->
+		<TabPanel class="space-y-5">
+			<Ticket ticket={pull} markup={data.markup} onedit={updatePull} ondelete={removePull}>
+				{#snippet extraActions()}
+					<Dropdown variant="button" align="right" label="Subscribe">
+						{#snippet trigger()}
+							<Bell class="size-4" />
+							<span>Subscribe</span>
+						{/snippet}
+						<div class="p-2 debug-border">todo: subscribe menu</div>
+					</Dropdown>
+					{#if !discussionOpen}
+						<Button icon={Circle} onclick={() => (discussionOpen = true)} />
+					{/if}
+				{/snippet}
+			</Ticket>
+			<!-- TODO: labels -->
+		</TabPanel>
+		<!-- PR Commits -->
+		<div class="space-y-2 rounded border border-border-default bg-background-default p-4">
+			<PullCommitListHeader
+				versions={pull.versions}
+				{commits}
+				{versionRange}
+				oncommitVersions={confirmVersions}
+			>
+				{#snippet actions()}
+					{#if isAuthor && pullState === "open" && sourceBranch}
+						<Button
+							icon={IterationCcw}
+							title={canResubmit
+								? "Resubmit pull request"
+								: "Update the source branch to resubmit this pull request"}
+							disabled={!canResubmit || resubmit.loading}
+							loading={resubmit.loading}
+							onclick={() => resubmit.run()}
 						>
-							<span>{data.commitsError}</span>
-						</div>
-					{:else}
-						<PullCommitList
-							commits={data.commits}
-							hrefFor={commitHref}
-							{seeAllHref}
-							seeAll={seeAll(view)}
-							activeCommitId={activeCommitId(view)}
-						/>
+							Resubmit
+						</Button>
 					{/if}
-				</div>
-			</div>
+					<Button icon={Workflow} title="Approve CI run from this pull request" disabled>
+						Approve CI
+					</Button>
+				{/snippet}
+			</PullCommitListHeader>
+			<ErrorAlert label={resubmit.error} />
+			{#if isInterdiff}
+				<PullCommitListInterdiff
+					{commits}
+					changeId={view.mode === "interdiff" ? view.changeId : ""}
+					onselect={confirmChangeId}
+				/>
+			{:else}
+				<PullCommitListDiff {commits} {commitRange} oncommitCommits={confirmCommits} />
+			{/if}
 		</div>
-
-		<!-- full-bleed on purpose, it is the reason this page places its own repo
-		     header instead of taking the layout's -->
-		<PullDiffPanel
-			diff={data.diff}
-			diffError={data.diffError}
-			diffStyle={data.diffStyle}
-			isInterdiff={view.mode === "interdiff"}
-			version={view.mode === "diff" ? view.version : active}
-			version1={view.mode === "interdiff" ? view.version1 : undefined}
-			version2={view.mode === "interdiff" ? view.version2 : undefined}
-			baseLabel={view.mode === "diff"
-				? view.isDiffBase
-					? "base"
-					: short(view.base)
-				: undefined}
-			headLabel={view.mode === "diff"
-				? view.isDiffHead
-					? "head"
-					: short(view.head)
-				: undefined}
-			changeLabel={view.mode === "interdiff" && view.changeId
-				? short(view.changeId)
-				: undefined}
-			diffHref={href(active)}
-			interdiffHref={href(interdiffRange)}
-			canInterdiff={active > 0}
-			{discussionOpen}
-			onToggleDiscussion={() => (discussionOpen = true)}
-		/>
+		<div use:stickyTrigger class="h-0"></div>
+		<!-- PR Diff -->
+		<PullDiff deps={diffDeps} diff={diff.data} error={diff.error} loading={diff.loading} />
 	</div>
-
-	<!-- the mobile sheet's scrim, click it to put the sheet away -->
-	<div
-		class="fixed inset-0 z-20 bg-alpha-dark-50 transition-opacity duration-300 lg:hidden {sheetUp
-			? 'opacity-100'
-			: 'pointer-events-none opacity-0'}"
-		role="presentation"
-		onclick={() => (railOpen = false)}
-	></div>
-
 	{#if discussionOpen}
 		<div
-			class="group sticky top-12 hidden max-h-screen w-4 shrink-0 cursor-col-resize flex-col items-center justify-center lg:flex"
+			class="group sticky top-0 flex max-h-screen w-2 shrink-0 cursor-col-resize flex-col items-center justify-center"
 			role="separator"
 			aria-orientation="vertical"
 			aria-label="Resize discussion panel"
-			use:resizable={{ target: () => rail, direction: "after" }}
+			use:resizable={{ target: () => discussion, direction: "after", min: 336 }}
 		>
 			<div
 				class="h-16 w-1 rounded-full bg-border-strong transition-all group-hover:h-24 group-hover:bg-foreground-subtle group-[.resizing]:h-24"
 			></div>
 		</div>
-
+		<!-- discussion sidebar -->
 		<div
-			bind:this={rail}
-			id="discussion"
-			class="fixed right-0 bottom-0 z-30 max-h-[calc(100vh-10rem)] w-full rounded-t-2xl bg-background-inset lg:sticky lg:top-0 lg:block lg:max-h-screen lg:w-[25vw] lg:max-w-[50vw] lg:bg-transparent"
+			bind:this={discussion}
+			bind:clientWidth={discussionWidth}
+			class="relative w-[max(20vw,21rem)] max-w-[min(50vw,800px)] shrink-0 pt-11.5"
 		>
-			<PullDiscussion
-				state={pullState}
-				{versions}
-				authorHandle={pull.author.handle}
-				authorDid={pull.author.did}
-				subjectUri={data.uri}
-				subjectCid={pull.cid}
-				activeVersion={active}
-				versionHref={href}
-				markup={data.markup}
-				{actions}
-				onstatechange={(next) => (stateOverride = next)}
-				onsubmitted={insertComment}
-				onedited={updateComment}
-				ondeleted={removeComment}
-				bind:open={railOpen}
-				onclose={() => (discussionOpen = false)}
-			/>
+			<aside
+				class="flex h-full min-h-screen flex-col items-stretch rounded-tl-sm border-t border-l border-border-default bg-background-default text-foreground-default"
+			>
+				<div class="sticky top-0 flex h-screen flex-col">
+					<header class="h-17 px-4">
+						<div
+							class="flex h-full items-center justify-between border-b border-border-default"
+						>
+							<h2 class="flex items-center gap-2 px-3 typography-paragraph-regular">
+								<MessagesSquare class="size-4 shrink-0" aria-hidden="true" />
+								Comments
+							</h2>
+							<Button
+								icon={PanelRightClose}
+								onclick={() => (discussionOpen = false)}
+							/>
+						</div>
+					</header>
+
+					<div
+						class="min-h-0 flex-1 overflow-y-auto"
+						style="margin-bottom: {formHeight}px"
+					>
+						<PullDiscussion
+							markup={data.markup}
+							currentVersion={view.version}
+							versions={pull.versions}
+							{comments}
+							{commits}
+							filter={view.mode === "diff" ? inCommitRange : undefined}
+							onUpdateComment={updateComment}
+						/>
+					</div>
+				</div>
+			</aside>
+			<!-- action form -->
+			<div
+				bind:clientHeight={formHeight}
+				style={discussionWidth ? `width: ${discussionWidth}px` : ""}
+				class="fixed right-0 bottom-0 w-[max(20vw,21rem)] space-y-2 border-l border-border-default bg-background-default p-4"
+			>
+				<PullReviewCommentForm
+					{currentCommit}
+					onsubmit={insertComment}
+					disabled={!auth.currentUser}
+				/>
+
+				<PullActions
+					pullState={pull.state}
+					conflicted={check.data?.isConflicted ?? false}
+					canChangeState={isAuthor}
+					canMerge={isAuthor}
+					onChangeState={setStatus.run}
+					onMerge={runMerge}
+					loading={setStatus.loading || doMerge.loading}
+					error={setStatus.error ?? doMerge.error}
+				/>
+			</div>
 		</div>
 	{/if}
 </div>
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.ts b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.ts
index b79d6bea5..98b31e59a 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/+page.ts
@@ -1,78 +1,20 @@
-import { error, redirect } from "@sveltejs/kit";
+import { redirect } from "@sveltejs/kit";
 import { createBobbinClient } from "$lib/api/client";
-import { COMMENT_AUTHOR_DOCS } from "$lib/api/descriptors";
-import { authorOf, enrich, target } from "$lib/api/enrich";
-import { gitTarget } from "$lib/api/gitclient";
-import { prepareDiff, prepareInterdiff, type PullPageDeps } from "$lib/api/pullPage";
+import { listLog } from "$lib/api/gitmirror";
 import { isRedirect, parseDiffRoute, parseInterdiffRoute } from "$lib/api/pullRoute";
-import {
-	getPullView,
-	type CommentListPage,
-	type CommentRecord,
-	type PullState,
-	type RecordView
-} from "$lib/api/records";
-import { didFromUri, rkeyFromUri } from "$lib/api/uri";
-import { renderMarkup } from "$lib/markup";
+import { countCommentsByCommit } from "$lib/components/comment/comments";
 import type { Did } from "@atcute/lexicons/syntax";
-import type { CommentView } from "$lib/components/comment/comments";
-import type { DiffStyle } from "$lib/components/repo/pierre";
-import type { MarkupContext } from "$lib/markup/paths";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
 	const uri = event.params.aturi;
+	const { pull, sourceRepoDid } = parent;
 
-	if (!uri.startsWith("at://")) error(404, "Pull request not found");
-
-	const repoDid = parent.repo.repoDid;
-	if (!repoDid) error(404, "Pull request not found");
-
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
-
-	const viewerDid = parent.auth?.did;
-
-	const [pull, commentPage] = await Promise.all([
-		getPullView(ctx, uri).catch(() => null),
-		enrich<CommentListPage>(ctx, {
-			xrpc: "sh.tangled.feed.listComments",
-			params: { subject: uri, order: "asc", limit: 100 },
-			enrich: [target(COMMENT_AUTHOR_DOCS, ["items[].uri"])]
-		}).catch(() => null)
-	]);
-	if (!pull) error(404, "Pull request not found");
-	if (!pull.versions.length) error(404, "This pull request has no ref-based versions to show");
-
-	const markup: MarkupContext = {
-		repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
-		ref: parent.repo.defaultBranch,
-		host: event.url.host
-	};
-
-	const toCommentView = async (item: RecordView<CommentRecord>): Promise<CommentView> => {
-		const author = authorOf(commentPage?.data ?? {}, item.uri, COMMENT_AUTHOR_DOCS);
-		const body = item.value.body?.text ?? "";
-		return {
-			uri: item.uri,
-			cid: item.cid,
-			rkey: rkeyFromUri(item.uri),
-			authorDid: author.did,
-			authorHandle: author.handle,
-			createdAt: item.value.createdAt,
-			body,
-			bodyHtml: body ? await renderMarkup(body, markup).catch(() => null) : null
-		};
-	};
-
-	const versions = pull.versions.map((version) => ({ ...version, comments: [] as CommentView[] }));
-	for (const item of commentPage?.output.items ?? []) {
-		const round = Math.min(item.value.pullRoundIdx ?? 0, versions.length - 1);
-		versions[round].comments.push(await toCommentView(item));
-	}
-
-	const body = pull.body?.text ?? "";
-	const bodyHtml = body ? await renderMarkup(body, markup).catch(() => null) : null;
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
 
 	const route = event.params.version.includes("..")
 		? parseInterdiffRoute(pull.versions, event.params.version, event.params.range)
@@ -83,40 +25,30 @@ export const load: PageLoad = async (event) => {
 		redirect(307, `/${event.params.handle}/${event.params.repo}/pulls/${uri}/${target}`);
 	}
 
-	const diffStyle: DiffStyle = event.url.searchParams.get("diff") === "split" ? "split" : "unified";
-	const deps: PullPageDeps = {
-		ctx,
-		git: gitTarget(parent.publicConfig, parent.repo, event.fetch),
-		repo: repoDid as Did,
-		diffStyle
-	};
-
-	const prepared =
-		route.mode === "diff"
-			? await prepareDiff(deps, route, pull.versions[route.version])
-			: await prepareInterdiff(deps, route);
-
-	const sourceRepoDid = pull.source?.repo?.did ?? repoDid;
-
-	const actions = {
-		isAuthor: Boolean(viewerDid) && viewerDid === didFromUri(pull.uri)
-	};
+	const currentVersion = pull.versions[route.version];
+
+	// TODO: bobbin should hydrate the commit list with backlinked comment counts
+	const commits = await listLog(ctx, sourceRepoDid as Did, currentVersion);
+	const commentCounts = countCommentsByCommit(parent.comments);
+
+	if (route.mode === "diff") {
+		route.base =
+			commits.find((commit) => commit.hash.startsWith(route.base))?.hash ??
+			currentVersion.base;
+		route.head =
+			commits.find((commit) => commit.hash.startsWith(route.head))?.hash ??
+			currentVersion.head;
+	} else if (route.mode === "interdiff" && route.changeId) {
+		route.changeId =
+			commits.find((commit) => commit.changeId?.startsWith(route.changeId))?.changeId ?? "";
+	}
 
 	return {
-		...prepared,
-		diffStyle,
-		actions,
-		sourceRepoDid,
-		pull: {
-			...pull,
-			rkey: rkeyFromUri(pull.uri),
-			state: (pull.state ?? "open") as PullState,
-			body,
-			bodyHtml,
-			versions
-		},
+		commits: commits.map((commit) => ({
+			...commit,
+			commentCount: commentCounts.get(commit.hash) ?? 0
+		})),
 		view: route,
-		uri,
-		markup
+		uri
 	};
 };
-- 
2.51.2