From dad5d8d61008dbd7c18610bbbcdf065940093f0b Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Tue, 11 Aug 2026 19:01:12 +0900
Subject: [PATCH] web: PR title & body edit

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 web/src/lib/api/pull.ts                       | 31 +++++++
 .../components/repo/issues/IssueForm.svelte   | 10 ++-
 .../components/repo/pulls/PullCompose.svelte  |  5 ++
 .../components/repo/pulls/PullInfoBar.svelte  | 11 ++-
 .../[aturi]/[version]/[[range]]/+page.svelte  | 86 ++++++++++++++++---
 5 files changed, 126 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/api/pull.ts b/web/src/lib/api/pull.ts
index cf847fc01..7db0e8843 100644
--- a/web/src/lib/api/pull.ts
+++ b/web/src/lib/api/pull.ts
@@ -1,6 +1,7 @@
 import { ok } from "@atcute/client";
 import { mainSchema as putRecordSchema } from "@atcute/atproto/types/repo/putRecord";
 import { mainSchema as deleteRecordSchema } from "@atcute/atproto/types/repo/deleteRecord";
+import { mainSchema as getRecordSchema } from "@atcute/atproto/types/repo/getRecord";
 import type { Nsid, RecordKey } from "@atcute/lexicons/syntax";
 import type { OAuthUserAgent } from "@atcute/oauth-browser-client";
 import { now as tidNow } from "@atcute/tid";
@@ -30,6 +31,36 @@ export const putPull = async (
 	return { uri, cid, value: record };
 };
 
+export const editPull = async (
+	agent: OAuthUserAgent,
+	rkey: string,
+	patch: { title: string; body: string }
+): Promise<RecordView<PullRecord>> => {
+	const rpc = createClient(agent);
+	const existing = await ok(
+		rpc.call(getRecordSchema, {
+			params: {
+				repo: agent.sub,
+				collection: PULL_COLLECTION,
+				rkey: rkey as RecordKey
+			}
+		})
+	);
+	const record = { ...(existing.value as PullRecord), ...patch };
+	const { uri, cid } = await ok(
+		rpc.call(putRecordSchema, {
+			input: {
+				repo: agent.sub,
+				collection: PULL_COLLECTION,
+				rkey: rkey as RecordKey,
+				swapRecord: existing.cid,
+				record
+			}
+		})
+	);
+	return { uri, cid, value: record };
+};
+
 export const deletePull = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
 	const rpc = createClient(agent);
 	await ok(
diff --git a/web/src/lib/components/repo/issues/IssueForm.svelte b/web/src/lib/components/repo/issues/IssueForm.svelte
index a9e950f45..ca80f9914 100644
--- a/web/src/lib/components/repo/issues/IssueForm.svelte
+++ b/web/src/lib/components/repo/issues/IssueForm.svelte
@@ -26,7 +26,8 @@
 		body?: string;
 		submitLabel?: string;
 		bodyPlaceholder?: string;
-		onsaved: (saved: RecordView<IssueRecord>) => void;
+		submit?: (input: { title: string; body: string }) => Promise<void>;
+		onsaved?: (saved: RecordView<IssueRecord>) => void;
 		oncancel: () => void;
 	}
 
@@ -40,6 +41,7 @@
 		body: initialBody = "",
 		submitLabel,
 		bodyPlaceholder = "Describe your issue. Markdown is supported.",
+		submit,
 		onsaved,
 		oncancel
 	}: Props = $props();
@@ -55,6 +57,10 @@
 		event.preventDefault();
 		const agent = auth.agent;
 		if (!agent || title.trim() === "") return;
+		if (submit) {
+			await submit({ title, body });
+			return;
+		}
 		const targetRkey = rkey ?? tidNow();
 		const record: IssueRecord = {
 			$type: "sh.tangled.repo.issue",
@@ -64,7 +70,7 @@
 			createdAt: createdAt ?? new Date().toISOString()
 		};
 		const saved = await putIssue(agent, targetRkey, record);
-		onsaved(saved);
+		onsaved?.(saved);
 	});
 	const canSubmit = $derived(title.trim() !== "" && !save.loading);
 </script>
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index da8abc142..233987b40 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -176,6 +176,11 @@
 		]);
 
 		// pin before the record lands, so gc can't drop the head in between
+		console.log("keepCommit", {
+			repo: compose.sourceRepoDid,
+			oid: head.hash,
+			record: uri
+		});
 		await keepCommit(agent, compose.sourceKnot, {
 			repo: compose.sourceRepoDid,
 			oid: head.hash,
diff --git a/web/src/lib/components/repo/pulls/PullInfoBar.svelte b/web/src/lib/components/repo/pulls/PullInfoBar.svelte
index e94d18ea6..481809647 100644
--- a/web/src/lib/components/repo/pulls/PullInfoBar.svelte
+++ b/web/src/lib/components/repo/pulls/PullInfoBar.svelte
@@ -1,4 +1,5 @@
 <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";
@@ -17,6 +18,7 @@
 		sourceBranch?: string;
 		// set only when the source branch lives in a fork, as `owner/repo` or a did
 		sourceRepo?: string;
+		actions?: Snippet;
 	}
 
 	let {
@@ -28,7 +30,8 @@
 		repoName,
 		targetBranch,
 		sourceBranch,
-		sourceRepo
+		sourceRepo,
+		actions
 	}: Props = $props();
 
 	const treeHref = (repo: string, ref: string) =>
@@ -76,4 +79,10 @@
 			</span>
 		</span>
 	{/if}
+
+	{#if actions}
+		<div class="ml-auto flex items-center gap-2">
+			{@render actions()}
+		</div>
+	{/if}
 </div>
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 f32ebbac8..1f3803362 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,14 +1,19 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import Pencil from "$icon/pencil";
 	import { createBobbinClient } from "$lib/api/client";
 	import { mergeCheck } from "$lib/api/gitmirror";
 	import { getBranch } from "$lib/api/knotmirror";
+	import { editPull } from "$lib/api/pull";
 	import { activeCommitId, activeVersion, pullHref, seeAll } from "$lib/api/pullRoute";
 	import { 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";
@@ -24,6 +29,8 @@
 
 	let { data } = $props();
 
+	const auth = getAuth();
+
 	let pull = $derived(data.pull);
 	let view = $derived(data.view);
 	let active = $derived(activeVersion(view));
@@ -38,6 +45,32 @@
 	});
 	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 head = $derived(pull.versions.at(-1)?.head);
 
 	// the mergeability check runs in the browser after paint rather than blocking the loader:
@@ -145,11 +178,22 @@
 
 <svelte:head>
 	<title
-		>{pull.title} &middot; Pull Request #{pull.rkey} &middot; {data.repo.ownerHandle}/{data.repo
+		>{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
@@ -170,19 +214,33 @@
 			<div class="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-[4fr_1fr]">
 				<div class="min-w-0">
 					<TabPanel>
-						<IssueHeader title={pull.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}
-						/>
-						<!-- todo: reactions once the loader returns them -->
-						<IssueBody body={pull.body} bodyHtml={pull.bodyHtml} />
+						{#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>
 
-- 
2.51.2