From d2f6cc5a5f5dc9a4b7c72cce15e9bdfe468c8602 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 21 Sep 2026 11:02:38 +0100
Subject: [PATCH] web/pulls: rework the compose page into source, changes and
 diff sheets

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/api/pullCompose.ts                |  24 +-
 web/src/lib/components/repo/DiffView.svelte   |   8 +-
 .../repo/pulls/PullCompose.stories.svelte     |   1 +
 .../components/repo/pulls/PullCompose.svelte  | 521 +++++++++---------
 .../[handle]/[repo]/pulls/new/+page.svelte    |  49 +-
 5 files changed, 297 insertions(+), 306 deletions(-)

diff --git a/web/src/lib/api/pullCompose.ts b/web/src/lib/api/pullCompose.ts
index 36e6b1be5..bc9223a4f 100644
--- a/web/src/lib/api/pullCompose.ts
+++ b/web/src/lib/api/pullCompose.ts
@@ -4,6 +4,7 @@ import type { RepoInfo } from "$lib/components/repo/types";
 import { createBobbinClient } from "$lib/api/client";
 import { branches as listBranches, gitTarget, type GitServiceConfig } from "$lib/api/gitclient";
 import { listCommits, toMirrorCommitSummary } from "$lib/api/gitmirror";
+import { getMergeBase } from "$lib/api/knotmirror";
 import { listRepos } from "$lib/api/records";
 import {
 	repoNameOf,
@@ -96,6 +97,7 @@ export interface ForkOption {
 export interface ComposeData {
 	commits: CommitSummary[];
 	commitsError: string;
+	mergeBase: string;
 	// `owner/repo` of the source repo, for the browse-at-commit links
 	sourceRepoPath: string;
 	branches: BranchSummary[];
@@ -187,14 +189,25 @@ export const loadCompose = async (args: {
 
 	let commits: CommitSummary[] = [];
 	let commitsError = "";
+	let mergeBase = "";
 	if (hasComparison && source !== "patch") {
+		const mirror = createBobbinClient({ serviceUrl: config.knotMirrorUrl, fetch: fetchFn });
 		try {
-			const page = await listCommits(ctx, {
-				repo: sourceRepoDid as Did,
-				ranges: [`${targetBranch}..${sourceBranch}`],
-				limit: COMMIT_LIMIT
-			});
+			const [page, base] = await Promise.all([
+				listCommits(ctx, {
+					repo: sourceRepoDid as Did,
+					ranges: [`${targetBranch}..${sourceBranch}`],
+					limit: COMMIT_LIMIT,
+					includeStats: true
+				}),
+				getMergeBase(mirror, {
+					repo: sourceRepoDid,
+					base: targetBranch,
+					head: sourceBranch
+				})
+			]);
 			commits = page.commits.map(toMirrorCommitSummary);
+			mergeBase = base.commit;
 		} catch (cause) {
 			commitsError = cause instanceof Error ? cause.message : String(cause);
 		}
@@ -203,6 +216,7 @@ export const loadCompose = async (args: {
 	return {
 		commits,
 		commitsError,
+		mergeBase,
 		sourceRepoPath: forkRepo
 			? `${viewer?.handle ?? repo.ownerHandle}/${forkRepo.name}`
 			: `${repo.ownerHandle}/${repo.name}`,
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index eed9bd33d..0b7ac6bf8 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -27,7 +27,7 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import ResizeHandle from "$lib/components/ui/ResizeHandle.svelte";
 	import { browser } from "$app/environment";
-	import { tick } from "svelte";
+	import { tick, untrack } from "svelte";
 
 	interface Props {
 		deps: RepoDiffDeps;
@@ -48,6 +48,7 @@
 		/** a patch already streaming in parallel with the file list */
 		patch?: PatchStream;
 		stickyOffset?: number;
+		treeCollapsed?: boolean;
 	}
 
 	let {
@@ -62,11 +63,12 @@
 		downloadUrls,
 		patchUrl,
 		patch,
-		stickyOffset = 0
+		stickyOffset = 0,
+		treeCollapsed = false
 	}: Props = $props();
 
 	const SM = 640;
-	let treeToggled = $state<boolean | null>(null);
+	let treeToggled = $state<boolean | null>(untrack(() => (treeCollapsed ? false : null)));
 	const TREE_WIDTH = 250;
 	const TREE_MIN_WIDTH = 200;
 	const TREE_MAX_WIDTH = 560;
diff --git a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
index 79494364b..3f835cd6b 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
@@ -25,6 +25,7 @@
 			}
 		],
 		commitsError: "",
+		mergeBase: "abc123abc123abc123abc123abc123abc123abc1",
 		sourceRepoPath: "alice.pds.tngl.boltless.dev/core",
 		branches: [{ name: "main", hash: "abc123", isDefault: true }],
 		sourceBranches: [branch("feature/compose-selector")],
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index e74aa7d77..5918bfcff 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -15,18 +15,18 @@
 <script lang="ts">
 	import { untrack } from "svelte";
 	import { SvelteURLSearchParams } from "svelte/reactivity";
+	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import { now as tidNow } from "@atcute/tid";
 	import type { Did } from "@atcute/lexicons/syntax";
-	import ArrowLeftRight from "$icon/arrow-left-right";
-	import FolderCode from "$icon/folder-code";
-	import GitCommitVertical from "$icon/git-commit-vertical";
 	import GitPullRequestCreate from "$icon/git-pull-request-create";
 	import TriangleAlert from "$icon/triangle-alert";
 	import { awaitIndexedOrSaved } from "$lib/api/awaitRecord";
 	import { createBobbinClient } from "$lib/api/client";
-	import { getBranch, getMergeBase } from "$lib/api/knotmirror";
+	import { gitTarget } from "$lib/api/gitclient";
+	import { formatPatchUrl, getBranch, getMergeBase } from "$lib/api/knotmirror";
+	import { getPatchStream } from "$lib/api/patchStream";
 	import { keepCommit, putPull } from "$lib/api/pull";
 	import { pingIndexNow } from "$lib/api/indexnow";
 	import { createEntitySubscription } from "$lib/api/graph";
@@ -36,26 +36,30 @@
 		type ComposeData,
 		type PullSource
 	} from "$lib/api/pullCompose";
-	import { createAction } from "$lib/action.svelte";
+	import { loadDiff, type RepoDiffDeps, type RepoDiffSpec } from "$lib/api/repoDiff";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import AccountSelector from "$lib/components/auth/AccountSelector.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
-	import CopyButton from "$lib/components/ui/CopyButton.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Field from "$lib/components/ui/Field.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import StepMarker from "$lib/components/ui/StepMarker.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import Textarea from "$lib/components/ui/Textarea.svelte";
-	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import DiffView from "$lib/components/repo/DiffView.svelte";
+	import PullCommitList from "$lib/components/repo/pulls/PullCommitList.svelte";
+	import PullCommitListHeader from "$lib/components/repo/pulls/PullCommitListHeader.svelte";
 	import type { PullRecord } from "$lib/api/records";
 	import type { BranchEntry } from "$lib/api/repo";
+	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
 	import type { SelectOption } from "$lib/components/ui/selectField";
 	import type { RepoInfo } from "$lib/components/repo/types";
 	import type { MarkupContext } from "$lib/markup";
-	import { formatCount } from "$lib/format";
-	import Separator from "$lib/components/ui/Separator.svelte";
 
 	/** everything the route's load derived, passed through whole */
 	interface Props {
@@ -76,6 +80,7 @@
 	const accounts = $derived(auth?.accounts ?? []);
 
 	let picked = $state<string | null>(null);
+	let showChangeIds = $state(true);
 	const acting = $derived(
 		accounts.find((account) => account.did === (picked ?? auth?.currentDid))
 	);
@@ -122,6 +127,8 @@
 		};
 	});
 	const view = $derived(diverged ?? compose);
+	const commits = $derived(view.commits);
+	const hasChanges = $derived(view.showDetails && !view.commitsError && commits.length > 0);
 	const base = $derived(`/${ownerHandle}/${repoName}/pulls`);
 
 	let title = $state("");
@@ -203,6 +210,47 @@
 		}))
 	);
 
+	let stagedRange = $state<Range | null>(null);
+	$effect(() => {
+		void view;
+		stagedRange = null;
+	});
+	const commitRange = $derived<Range>(stagedRange ?? { start: 0, end: commits.length });
+
+	const diffSpec = $derived<RepoDiffSpec>({
+		kind: "diff",
+		repo: view.sourceRepoDid as Did,
+		version: {
+			base: commits[commitRange.end]?.hash ?? view.mergeBase,
+			head: commits[commitRange.start]?.hash ?? commits[0]?.hash ?? ""
+		}
+	});
+
+	const diffDeps = $derived<RepoDiffDeps>({
+		ctx: createBobbinClient({ serviceUrl: bobbinUrl, fetch: globalThis.fetch }),
+		git: gitTarget(
+			{ bobbinUrl, knotMirrorUrl },
+			{ uri: repo.uri, repoDid: view.sourceRepoDid },
+			globalThis.fetch
+		)
+	});
+
+	const diff = createLoad(async () => {
+		if (!hasChanges || !diffSpec.version.base || !diffSpec.version.head) return undefined;
+		return await loadDiff(diffDeps, diffSpec);
+	});
+
+	const patchUrl = $derived(
+		hasChanges && diffDeps.git.via === "mirror" && diffSpec.version.base
+			? formatPatchUrl(diffDeps.git.ctx.serviceUrl, {
+					repo: view.sourceRepoDid,
+					from: diffSpec.version.base,
+					to: diffSpec.version.head
+				})
+			: undefined
+	);
+	const patchStream = $derived(browser && patchUrl ? getPatchStream(patchUrl) : undefined);
+
 	const save = createAction(async (event: SubmitEvent) => {
 		event.preventDefault();
 		if (!auth || !acting) throw new Error("You must be signed in to open a pull request.");
@@ -235,11 +283,6 @@
 		]);
 
 		// pin before the record lands, so gc can't drop the head in between
-		console.log("keepCommit", {
-			repo: view.sourceRepoDid,
-			oid: head.hash,
-			record: uri
-		});
 		await keepCommit(agent, view.sourceKnot, {
 			repo: view.sourceRepoDid,
 			oid: head.hash,
@@ -286,17 +329,8 @@
 		"--- a/file.txt",
 		"+++ b/file.txt"
 	].join("\n");
-
-	const connector = "absolute top-3 -bottom-6 left-3 w-px -translate-x-1/2 bg-border-default";
 </script>
 
-{#snippet stepNumber(n: number)}
-	<span
-		class="inline-flex size-6 items-center justify-center rounded-full bg-background-emphasis typography-paragraph-small font-bold text-foreground-subtle"
-		>{n}</span
-	>
-{/snippet}
-
 {#snippet notice(message: string, danger = false)}
 	<div
 		class="rounded-sm border px-4 py-3 typography-paragraph-small {danger
@@ -320,78 +354,43 @@
 	</button>
 {/snippet}
 
-<div class="flex flex-col">
-	{#if view.prefillError}
-		<div
-			class="mb-4 flex items-center gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 typography-paragraph-small text-foreground-danger"
-		>
-			<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
-			<span>{view.prefillError}</span>
-		</div>
-	{/if}
+<div class="flex flex-col gap-4">
+	<TabPanel class="py-6">
+		{#if view.prefillError}
+			<div
+				class="mb-4 flex items-center gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 typography-paragraph-small text-foreground-danger"
+			>
+				<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
+				<span>{view.prefillError}</span>
+			</div>
+		{/if}
 
-	<form onsubmit={save.run} class="flex flex-col gap-6">
-		<section class="relative flex flex-col gap-3">
-			<div class={connector}></div>
-			<div class="relative flex items-center gap-4">
-				<div class="relative z-10 shrink-0">{@render stepNumber(1)}</div>
-				<h3
-					class="my-0 typography-paragraph-small font-bold tracking-wide text-foreground-default"
-				>
+		<form onsubmit={save.run} class="flex flex-col pl-3">
+			<section class="relative flex flex-col gap-3 border-l border-border-default pb-10 pl-6">
+				<StepMarker class="absolute top-0 -left-3">1</StepMarker>
+				<h3 class="my-0 typography-paragraph-large font-medium text-foreground-default">
 					Source
 				</h3>
-				<AccountSelector
-					{accounts}
-					bind:value={() => acting?.did ?? "", (did) => (picked = did)}
-					label="Open as"
-					disabled={save.loading}
-					group="pull-compose"
-					class="ml-auto"
-				/>
-			</div>
-			<div class="ml-10 flex flex-col gap-3">
-				<div
-					class="flex items-center justify-stretch gap-1 rounded-md border border-border-default bg-background-subtle p-1.5"
-				>
-					{@render tab("branch", "Compare branches", "Select a source branch")}
-					{@render tab("fork", "Compare forks", "Select a fork and branch as the source")}
-					{@render tab(
-						"patch",
-						"Paste patch",
-						"Paste a git diff or git format-patch",
-						true
-					)}
-				</div>
-
-				{#if view.source === "patch"}
-					<Field label="Merge into" class="max-w-xs">
-						{#snippet children({ id })}
-							<Select
-								{id}
-								{...branchSearch}
-								label="Merge into"
-								options={targetOptions}
-								value={view.targetBranch}
-								placeholder={view.targetBranch ? undefined : "Target branch"}
-								onSelect={(value) => navigate({ targetBranch: value })}
-							/>
-						{/snippet}
-					</Field>
-					<div class="flex flex-col gap-2">
-						<p class="my-0 typography-paragraph-small text-foreground-muted">
-							You can paste a <code>git diff</code> or a <code>git format-patch</code> patch
-							series here.
-						</p>
-						<Textarea
-							rows={12}
-							bind:value={patch}
-							class="resize-y typography-monospace-regular"
-							placeholder={PATCH_PLACEHOLDER}
-						/>
+				<div class="flex flex-col gap-3">
+					<div
+						class="flex items-center justify-stretch gap-1 rounded-md border border-border-default bg-background-subtle p-1.5"
+					>
+						{@render tab("branch", "Compare branches", "Select a source branch")}
+						{@render tab(
+							"fork",
+							"Compare forks",
+							"Select a fork and branch as the source"
+						)}
+						{@render tab(
+							"patch",
+							"Paste patch",
+							"Paste a git diff or git format-patch",
+							true
+						)}
 					</div>
-				{:else}
-					<div class="flex flex-col gap-3 md:flex-row md:flex-wrap">
-						<Field label="Merge into" class="min-w-48">
+
+					{#if view.source === "patch"}
+						<Field label="Merge into" class="max-w-xs">
 							{#snippet children({ id })}
 								<Select
 									{id}
@@ -404,28 +403,75 @@
 								/>
 							{/snippet}
 						</Field>
-
-						{#if view.source === "fork"}
-							<Field label="Pull from" class="min-w-48">
+						<div class="flex flex-col gap-2">
+							<p class="my-0 typography-paragraph-small text-foreground-muted">
+								You can paste a <code>git diff</code> or a
+								<code>git format-patch</code> patch series here.
+							</p>
+							<Textarea
+								rows={12}
+								bind:value={patch}
+								class="resize-y typography-monospace-regular"
+								placeholder={PATCH_PLACEHOLDER}
+							/>
+						</div>
+					{:else}
+						<div class="flex flex-col gap-3 md:flex-row md:flex-wrap">
+							<Field label="Merge into" class="min-w-48">
 								{#snippet children({ id })}
 									<Select
 										{id}
-										options={forkOptions}
-										value={view.fork}
-										placeholder={view.fork ? undefined : "Select a fork"}
-										disabled={laneLoading}
-										onSelect={(value) => navigate({ fork: value })}
+										{...branchSearch}
+										label="Merge into"
+										options={targetOptions}
+										value={view.targetBranch}
+										placeholder={view.targetBranch
+											? undefined
+											: "Target branch"}
+										onSelect={(value) => navigate({ targetBranch: value })}
 									/>
 								{/snippet}
 							</Field>
-							{#if view.fork && view.forkBranches.length > 0}
-								<Field label="Branch" class="min-w-48">
+
+							{#if view.source === "fork"}
+								<Field label="Pull from" class="min-w-48">
+									{#snippet children({ id })}
+										<Select
+											{id}
+											options={forkOptions}
+											value={view.fork}
+											placeholder={view.fork ? undefined : "Select a fork"}
+											disabled={laneLoading}
+											onSelect={(value) => navigate({ fork: value })}
+										/>
+									{/snippet}
+								</Field>
+								{#if view.fork && view.forkBranches.length > 0}
+									<Field label="Branch" class="min-w-48">
+										{#snippet children({ id })}
+											<Select
+												{id}
+												{...branchSearch}
+												label="Branch"
+												options={forkBranchOptions}
+												value={view.sourceBranch}
+												placeholder={view.sourceBranch
+													? undefined
+													: "Source branch"}
+												onSelect={(value) =>
+													navigate({ sourceBranch: value })}
+											/>
+										{/snippet}
+									</Field>
+								{/if}
+							{:else}
+								<Field label="Pull from" class="min-w-48">
 									{#snippet children({ id })}
 										<Select
 											{id}
 											{...branchSearch}
-											label="Branch"
-											options={forkBranchOptions}
+											label="Pull from"
+											options={branchOptions}
 											value={view.sourceBranch}
 											placeholder={view.sourceBranch
 												? undefined
@@ -434,186 +480,117 @@
 										/>
 									{/snippet}
 								</Field>
-							{:else}
-								<p
-									class="self-end typography-paragraph-small text-foreground-muted"
-								>
-									Select a fork first to view available branches
-								</p>
 							{/if}
-						{:else}
-							<Field label="Pull from" class="min-w-48">
-								{#snippet children({ id })}
-									<Select
-										{id}
-										{...branchSearch}
-										label="Pull from"
-										options={branchOptions}
-										value={view.sourceBranch}
-										placeholder={view.sourceBranch
-											? undefined
-											: "Source branch"}
-										onSelect={(value) => navigate({ sourceBranch: value })}
-									/>
-								{/snippet}
-							</Field>
+						</div>
+						{#if view.source === "fork" && !(view.fork && view.forkBranches.length > 0)}
+							<p class="typography-paragraph-small text-foreground-muted">
+								Select a fork first to view available branches
+							</p>
 						{/if}
-					</div>
-				{/if}
-			</div>
-		</section>
-
-		<section class="relative flex flex-col gap-3">
-			<div class="{connector} -top-6"></div>
-			<div class="relative flex items-center gap-4">
-				<div class="relative z-10 shrink-0">{@render stepNumber(2)}</div>
-				<h3
-					class="my-0 typography-paragraph-small font-bold tracking-wide text-foreground-default"
-				>
-					Review
+					{/if}
+				</div>
+			</section>
+
+			<section class="relative flex flex-col gap-3 border-l border-border-default pl-6">
+				<StepMarker class="absolute top-0 -left-3">2</StepMarker>
+				<h3 class="my-0 typography-paragraph-large font-medium text-foreground-default">
+					Details
 				</h3>
-			</div>
-			<div class="ml-10 flex flex-col gap-3">
 				{#if !view.showDetails}
 					{@render notice(
 						view.source === "patch"
-							? "Paste a patch above to see a comparison."
-							: "Pick a source and target above to see a comparison."
-					)}
-				{:else if view.source === "patch"}
-					<!-- TODO: implement patch based PR -->
-				{:else if view.commitsError}
-					{@render notice(view.commitsError, true)}
-				{:else if view.commits.length === 0}
-					{@render notice(
-						view.sourceBranch === view.targetBranch
-							? "Source and target are the same branch, nothing to merge."
-							: "No commits between target and source. Make sure your source branch has commits not on the target."
+							? "Paste a patch above to describe your change."
+							: "Pick a source and target above to describe your change."
 					)}
 				{:else}
-					<div
-						class="flex min-w-0 items-center justify-between gap-3 typography-paragraph-small text-foreground-muted"
-					>
-						<span class="shrink-0">
-							{formatCount(view.commits.length)}
-							{view.commits.length === 1 ? "commit" : "commits"}
-						</span>
-						<span
-							class="inline-flex items-center gap-2 truncate typography-monospace-small text-foreground-subtle"
-						>
-							<span>{view.targetBranch}</span>
-							<ArrowLeftRight class="size-4 shrink-0" aria-hidden="true" />
-							<span>{view.sourceBranch}</span>
-						</span>
-					</div>
-					<ul class="m-0 flex list-none flex-col gap-2 p-0">
-						{#each view.commits as commit (commit.hash)}
-							<li
-								class="flex items-center gap-3 rounded-sm border border-border-default bg-background-default px-3 py-2"
-							>
-								<GitCommitVertical
-									class="size-4 shrink-0 text-foreground-subtle"
-									aria-hidden="true"
+					<div class="flex flex-col gap-4">
+						<Field label="Title" required>
+							{#snippet children({ id })}
+								<Input
+									{id}
+									name="title"
+									required
+									bind:value={title}
+									disabled={save.loading}
+									placeholder="One-line summary of your change."
 								/>
-								<span class="min-w-0 flex-1 truncate typography-paragraph-small">
-									{commit.subject}
-								</span>
-								<span
-									class="flex shrink-0 items-center gap-2 typography-paragraph-small text-foreground-muted"
-								>
-									{#if commit.when}<TimeAgo value={commit.when} />{/if}
-									<code
-										class="rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small"
-									>
-										{commit.shortHash}
-									</code>
-								</span>
-								<Separator orientation="vertical" class="-my-2" />
-								<span class="flex shrink-0 items-center gap-1">
-									<CopyButton
-										value={commit.hash}
-										size="mini"
-										label="Copy SHA"
-										title="Copy SHA"
-										class="text-foreground-subtle hover:bg-background-muted"
-									/>
-									<a
-										href={resolve(
-											`/${view.sourceRepoPath}/tree/${commit.hash}` as "/"
-										)}
-										class="rounded-sm p-1 text-foreground-subtle hover:bg-background-muted"
-										title="Browse repository at this commit"
-									>
-										<FolderCode class="size-4" aria-hidden="true" />
-									</a>
-								</span>
-							</li>
-						{/each}
-					</ul>
-					<div
-						class="rounded-sm border border-border-default bg-background-subtle px-4 py-6 text-center typography-paragraph-small text-foreground-muted"
-					>
-						Diff preview (TODO)
-					</div>
-				{/if}
-			</div>
-		</section>
-
-		{#if view.showDetails}
-			<section class="relative flex flex-col gap-3">
-				<div
-					class="{connector} -top-6 -bottom-12 mask-[linear-gradient(to_bottom,black_calc(100%-1.5rem),transparent)]"
-				></div>
-				<div class="relative flex items-center gap-4">
-					<div class="relative z-10 shrink-0">{@render stepNumber(3)}</div>
-					<h3
-						class="my-0 typography-paragraph-small font-bold tracking-wide text-foreground-default"
-					>
-						Details
-					</h3>
-				</div>
-				<div class="ml-10 flex flex-col gap-4">
-					<Field label="Title" required>
-						{#snippet children({ id })}
-							<Input
-								{id}
-								name="title"
-								required
-								bind:value={title}
-								disabled={save.loading}
-								placeholder="One-line summary of your change."
-							/>
-						{/snippet}
-					</Field>
-
-					<Field label="Body">
-						{#snippet children({ id })}
-							<MarkdownEditor
-								{id}
-								name="body"
-								rows={6}
-								placeholder="Describe your change. Markdown is supported."
-								{markup}
-								bind:value={body}
+							{/snippet}
+						</Field>
+
+						<Field label="Body">
+							{#snippet children({ id })}
+								<MarkdownEditor
+									{id}
+									name="body"
+									rows={6}
+									placeholder="Describe your change. Markdown is supported."
+									{markup}
+									bind:value={body}
+									disabled={save.loading}
+								/>
+							{/snippet}
+						</Field>
+
+						<ErrorAlert label={save.error} />
+
+						<div class="flex items-center justify-end gap-2">
+							<AccountSelector
+								{accounts}
+								bind:value={() => acting?.did ?? "", (did) => (picked = did)}
+								label="Open as"
 								disabled={save.loading}
+								group="pull-compose"
+								class="mr-auto"
 							/>
-						{/snippet}
-					</Field>
-
-					<ErrorAlert label={save.error} />
-
-					<div class="flex items-center justify-end">
-						<Button
-							type="submit"
-							variant="primary"
-							icon={save.loading ? Spinner : GitPullRequestCreate}
-							disabled={!canSubmit}
-						>
-							Create pull request
-						</Button>
+							<Button
+								type="submit"
+								variant="primary"
+								icon={save.loading ? Spinner : GitPullRequestCreate}
+								disabled={!canSubmit}
+							>
+								Create pull request
+							</Button>
+						</div>
 					</div>
-				</div>
+				{/if}
 			</section>
-		{/if}
-	</form>
+		</form>
+	</TabPanel>
+
+	{#if view.showDetails && view.source !== "patch"}
+		<Card padding="small" class="space-y-2">
+			{#if view.commitsError}
+				{@render notice(view.commitsError, true)}
+			{:else if commits.length === 0}
+				{@render notice(
+					view.sourceBranch === view.targetBranch
+						? "Source and target are the same branch, nothing to merge."
+						: "No commits between target and source. Make sure your source branch has commits not on the target."
+				)}
+			{:else}
+				<PullCommitListHeader {commits} bind:showChangeIds />
+				<PullCommitList
+					{commits}
+					bind:showChangeIds
+					selection={{
+						mode: "range",
+						range: commitRange,
+						oncommit: (range) => (stagedRange = range)
+					}}
+				/>
+			{/if}
+		</Card>
+	{/if}
+
+	{#if hasChanges}
+		<DiffView
+			deps={diffDeps}
+			diff={diff.data}
+			error={diff.error}
+			loading={diff.loading}
+			{patchUrl}
+			patch={patchStream}
+			treeCollapsed
+		/>
+	{/if}
 </div>
diff --git a/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
index 1f2765ab8..f78d6d14c 100644
--- a/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
@@ -4,7 +4,6 @@
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import repoPullsPullcomposeDefault from "$lib/bones/repo-pulls-pullcompose--default.bones.json";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
@@ -18,28 +17,26 @@
 	});
 </script>
 
-<TabPanel class="py-6">
-	<Pending>
-		{#snippet skeleton()}
-			<Bones capture={repoPullsPullcomposeDefault} />
-		{/snippet}
-		{@const repo = await data.repo}
-		{@const compose = await data.compose}
-		{@const markup = {
-			repo: `${repo.ownerHandle}/${repo.name}`,
-			ref: defaultBranch,
-			host: page.url.host,
-			camo: data.publicConfig?.camoEnabled
-		}}
-		<PullCompose
-			{markup}
-			ownerHandle={repo.ownerHandle}
-			repoName={repo.name}
-			repoDid={repo.repoDid ?? ""}
-			{repo}
-			bobbinUrl={data.publicConfig.bobbinUrl}
-			knotMirrorUrl={data.publicConfig.knotMirrorUrl}
-			{compose}
-		/>
-	</Pending>
-</TabPanel>
+<Pending>
+	{#snippet skeleton()}
+		<Bones capture={repoPullsPullcomposeDefault} />
+	{/snippet}
+	{@const repo = await data.repo}
+	{@const compose = await data.compose}
+	{@const markup = {
+		repo: `${repo.ownerHandle}/${repo.name}`,
+		ref: defaultBranch,
+		host: page.url.host,
+		camo: data.publicConfig?.camoEnabled
+	}}
+	<PullCompose
+		{markup}
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		repoDid={repo.repoDid ?? ""}
+		{repo}
+		bobbinUrl={data.publicConfig.bobbinUrl}
+		knotMirrorUrl={data.publicConfig.knotMirrorUrl}
+		{compose}
+	/>
+</Pending>
-- 
2.51.2