From ac812568f5430fb2d00cb15e97d7b2dcc92d10e3 Mon Sep 17 00:00:00 2001
From: Dominic Roy <dominic@sdko.org>
Date: Wed, 12 Aug 2026 20:59:06 -0400
Subject: [PATCH 1/3] feat(web): quote reply to pull request comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each comment in the pull request Summary tab gets a reply button that
prefills the composer with the comment quoted GitHub-style — every line
behind "> ", cursor on the empty line below — instead of making the
reader copy and reformat it by hand. Quoting appends under an existing
draft rather than replacing it, and the button only appears when the
viewer can comment and the comment has a body worth quoting.

The composer's draft and posting state move up into the tab so the
reply buttons can write into the draft and respect the posting lock;
the draft stays keyed by pull request so switching tabs still starts
clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../pullRequest/PullRequestSummaryTab.tsx     | 131 ++++++++++++------
 .../pullRequestDetail.logic.test.ts           |  23 +++
 .../pullRequest/pullRequestDetail.logic.ts    |  15 ++
 3 files changed, 129 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index a57f2a4d160..b37594609ff 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -12,11 +12,12 @@ import {
   HammerIcon,
   MessageSquareIcon,
   PencilIcon,
+  ReplyIcon,
   SendIcon,
   TagIcon,
   UsersIcon,
 } from "lucide-react";
-import { useRef, useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode, type Ref } from "react";
 
 import { useAtomCommand } from "~/state/use-atom-command";
 import { pullRequestEnvironment } from "~/state/pullRequests";
@@ -40,6 +41,7 @@ import { PullRequestActivityUnavailableState } from "./PullRequestActivityUnavai
 import {
   orderPullRequestComments,
   pullRequestFindingKey,
+  quoteReplyDraft,
   type PullRequestFinding,
 } from "./pullRequestDetail.logic";
 import {
@@ -280,43 +282,22 @@ function Section({
 }
 
 function CommentComposer({
-  environmentId,
-  detail,
-  onCommented,
+  body,
+  posting,
+  textareaRef,
+  onBodyChange,
+  onSubmit,
 }: {
-  environmentId: EnvironmentId;
-  detail: PullRequestDetailView;
-  onCommented: () => void;
+  body: string;
+  posting: boolean;
+  textareaRef: Ref<HTMLTextAreaElement>;
+  onBodyChange: (body: string) => void;
+  onSubmit: () => void;
 }) {
-  const [body, setBody] = useState("");
-  const [posting, setPosting] = useState(false);
-  const postComment = useAtomCommand(pullRequestEnvironment.comment, { reportFailure: false });
-
-  const submit = async () => {
-    const trimmed = body.trim();
-    if (trimmed.length === 0 || posting) return;
-    setPosting(true);
-    const result = await postComment({
-      environmentId,
-      input: {
-        projectId: detail.projectId,
-        repository: detail.repository,
-        number: detail.number,
-        body: trimmed,
-      },
-    });
-    setPosting(false);
-    if (result._tag === "Failure") {
-      toastManager.add({ type: "error", title: "Could not post the comment" });
-      return;
-    }
-    setBody("");
-    onCommented();
-  };
-
   return (
     <div className="mt-3 space-y-2">
       <Textarea
+        ref={textareaRef}
         // Locked while posting: the body is cleared on success, which would otherwise throw
         // away a new draft typed while the request was still in flight.
         disabled={posting}
@@ -324,14 +305,14 @@ function CommentComposer({
         rows={3}
         placeholder="Leave a comment"
         aria-label="Comment on this pull request"
-        onChange={(event) => setBody(event.target.value)}
+        onChange={(event) => onBodyChange(event.target.value)}
       />
       <div className="flex justify-end">
         <Button
           size="xs"
           variant="outline"
           disabled={body.trim().length === 0 || posting}
-          onClick={() => void submit()}
+          onClick={onSubmit}
         >
           <SendIcon className="size-3.5" />
           {posting ? "Posting..." : "Comment"}
@@ -382,6 +363,53 @@ export function PullRequestSummaryTab({
   const [commentOrder, setCommentOrder] = useState<"newest" | "oldest">("newest");
   const visibleComments = orderPullRequestComments(recentComments, commentOrder);
 
+  const canComment = detail.capabilities.comment && detail.viewerPermissions.comment;
+  // The draft is keyed by the pull request the same way the paging window is, so opening another
+  // one starts from an empty box rather than a half-written reply to a different conversation.
+  const [draft, setDraft] = useState({ url: detail.url, body: "" });
+  const draftBody = draft.url === detail.url ? draft.body : "";
+  const setDraftBody = (body: string) => setDraft({ url: detail.url, body });
+  const [posting, setPosting] = useState(false);
+  const composerRef = useRef<HTMLTextAreaElement>(null);
+  const postComment = useAtomCommand(pullRequestEnvironment.comment, { reportFailure: false });
+
+  const submitComment = async () => {
+    const trimmed = draftBody.trim();
+    if (trimmed.length === 0 || posting) return;
+    setPosting(true);
+    const result = await postComment({
+      environmentId,
+      input: {
+        projectId: detail.projectId,
+        repository: detail.repository,
+        number: detail.number,
+        body: trimmed,
+      },
+    });
+    setPosting(false);
+    if (result._tag === "Failure") {
+      toastManager.add({ type: "error", title: "Could not post the comment" });
+      return;
+    }
+    // Cleared only if the draft still belongs to this pull request: by the time the request
+    // lands, the reader may already be drafting on another one.
+    setDraft((value) => (value.url === detail.url ? { url: value.url, body: "" } : value));
+    onRefresh();
+  };
+
+  const quoteReply = (commentBody: string) => {
+    setDraftBody(quoteReplyDraft(draftBody, commentBody));
+    // After React commits the merged draft: the cursor belongs at its end, below the quote,
+    // with the composer in view.
+    requestAnimationFrame(() => {
+      const element = composerRef.current;
+      if (element === null) return;
+      element.focus();
+      element.setSelectionRange(element.value.length, element.value.length);
+      element.scrollIntoView({ block: "nearest" });
+    });
+  };
+
   // A comment that already lives on a review thread is that thread: the thread carries the line
   // and side the bare comment has lost, and a resolved one is finished work nobody should be
   // invited to fix again — the same call the whole-review hand-off makes.
@@ -752,6 +780,28 @@ export function PullRequestSummaryTab({
                               : fixFindingLabel}
                           </Button>
                         ) : null}
+                        {/* Only where the composer below exists to receive the quote, and only
+                            for comments with something to quote — a review that is all verdict
+                            and no words would quote as an empty block. */}
+                        {canComment && comment.body.trim().length > 0 ? (
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={
+                                <Button
+                                  aria-label="Quote reply"
+                                  size="icon-xs"
+                                  variant="ghost"
+                                  className="-mr-1 -mt-1 shrink-0 text-muted-foreground hover:text-foreground"
+                                  disabled={posting}
+                                  onClick={() => quoteReply(comment.body)}
+                                />
+                              }
+                            >
+                              <ReplyIcon className="size-3" />
+                            </TooltipTrigger>
+                            <TooltipPopup>Quote reply</TooltipPopup>
+                          </Tooltip>
+                        ) : null}
                       </div>
                       {comment.path ? (
                         <p
@@ -779,12 +829,13 @@ export function PullRequestSummaryTab({
           </>
         )}
         {/* Posting is a core capability and remains usable even if the activity read failed. */}
-        {detail.capabilities.comment && detail.viewerPermissions.comment ? (
+        {canComment ? (
           <CommentComposer
-            key={`${environmentId}:${detail.projectId}/${detail.repository}#${detail.number}`}
-            environmentId={environmentId}
-            detail={detail}
-            onCommented={onRefresh}
+            body={draftBody}
+            posting={posting}
+            textareaRef={composerRef}
+            onBodyChange={setDraftBody}
+            onSubmit={() => void submitComment()}
           />
         ) : null}
       </Section>
diff --git a/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts b/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
index 9b247002fce..80bd016aa5f 100644
--- a/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
+++ b/apps/web/src/components/pullRequest/pullRequestDetail.logic.test.ts
@@ -21,6 +21,7 @@ import {
   pullRequestActionNeedsHostRefresh,
   pullRequestFindingKey,
   pullRequestHandoffLabels,
+  quoteReplyDraft,
   readableFailure,
   resolveBaseFreshness,
   buildPullRequestTimeline,
@@ -98,6 +99,28 @@ describe("ordering comments", () => {
   });
 });
 
+describe("quote replying to a comment", () => {
+  it("prefixes every line and leaves an empty line for the reply to start on", () => {
+    expect(quoteReplyDraft("", "First point.\n\nSecond point.")).toBe(
+      "> First point.\n>\n> Second point.\n\n",
+    );
+  });
+
+  it("lands under an existing draft instead of replacing it", () => {
+    expect(quoteReplyDraft("What I typed so far.\n", "A remark.")).toBe(
+      "What I typed so far.\n\n> A remark.\n\n",
+    );
+  });
+
+  it("normalizes Windows line endings and surrounding whitespace from the host", () => {
+    expect(quoteReplyDraft("", "\r\nline one\r\nline two\r\n")).toBe("> line one\n> line two\n\n");
+  });
+
+  it("treats a whitespace-only draft as empty rather than stacking blank lines", () => {
+    expect(quoteReplyDraft("   \n", "A remark.")).toBe("> A remark.\n\n");
+  });
+});
+
 describe("pull request timeline", () => {
   it("orders creation, commits and comments newest first", () => {
     // What happened last is what the reader opening the tab is asking about.
diff --git a/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts b/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
index ddb4e813bf4..7a14186b1ee 100644
--- a/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
+++ b/apps/web/src/components/pullRequest/pullRequestDetail.logic.ts
@@ -72,6 +72,21 @@ export function orderPullRequestComments<T extends { readonly createdAt: string
   return order === "newest" ? comments.toReversed() : comments;
 }
 
+/**
+ * A quote reply the way GitHub writes one: every line of the quoted comment behind "> ", then an
+ * empty line where the reply starts. Lands under whatever the reader already typed — quoting a
+ * second comment, or quoting after drafting, must never cost them the draft.
+ */
+export function quoteReplyDraft(draft: string, quoted: string): string {
+  const quote = quoted
+    .replace(/\r\n/gu, "\n")
+    .trim()
+    .split("\n")
+    .map((line) => (line.length === 0 ? ">" : `> ${line}`))
+    .join("\n");
+  return draft.trim().length === 0 ? `${quote}\n\n` : `${draft.trimEnd()}\n\n${quote}\n\n`;
+}
+
 export interface PullRequestTimelineEvent {
   readonly id: string;
   readonly at: string;

From cd7b5ede89d19c97b56227dd3add8986a2b37f69 Mon Sep 17 00:00:00 2001
From: Dominic Roy <dominic@sdko.org>
Date: Wed, 12 Aug 2026 21:10:13 -0400
Subject: [PATCH 2/3] feat(web): quote reply on resolved conversations too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The quote button rode the expanded card's header, so a resolved
conversation or dismissed approval — which renders collapsed — never
offered it even once opened, despite carrying the edit pencil and
reaction bar. Bugbot's catch. The button now rides beside the pencil
inside the comment body, the same hover-revealed pattern, which gives
every remark the same single placement.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../pullRequest/PullRequestSummaryTab.tsx     | 68 ++++++++++++-------
 1 file changed, 44 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index b37594609ff..4c463a2780e 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -98,10 +98,13 @@ interface CommentEditing {
 function CommentBody({
   comment,
   editing,
+  quoteButton,
   className,
 }: {
   comment: PullRequestComment;
   editing: CommentEditing;
+  /** Built by the owner of the composer, so this stays a view over whatever actions it is handed. */
+  quoteButton?: ReactNode;
   className?: string | undefined;
 }) {
   if (editing.editingId === comment.id) {
@@ -120,6 +123,7 @@ function CommentBody({
   return (
     <div className={cn("flex items-start gap-1", className)}>
       <PullRequestMarkdown className="min-w-0 flex-1" text={comment.body} cwd={editing.cwd} />
+      {quoteButton}
       {editing.canEdit(comment) ? (
         <Button
           size="icon-xs"
@@ -140,11 +144,13 @@ function CollapsedComment({
   comment,
   editing,
   label,
+  quoteButton,
   reactionBar,
 }: {
   comment: PullRequestComment;
   editing: CommentEditing;
   label: string;
+  quoteButton?: ReactNode;
   reactionBar: ReactNode;
 }) {
   const [open, setOpen] = useState(false);
@@ -178,7 +184,12 @@ function CollapsedComment({
                   {comment.path}
                 </p>
               ) : null}
-              <CommentBody className="mt-2" comment={comment} editing={editing} />
+              <CommentBody
+                className="mt-2"
+                comment={comment}
+                editing={editing}
+                quoteButton={quoteButton}
+              />
               {reactionBar}
             </div>
           ) : null}
@@ -410,6 +421,31 @@ export function PullRequestSummaryTab({
     });
   };
 
+  // Rides beside the edit pencil on every remark, collapsed conversations included — but only
+  // where the composer below exists to receive the quote, and only for comments with something
+  // to quote: a review that is all verdict and no words would quote as an empty block. Disabled
+  // while posting, when the composer is locked and the success clear would eat the quote.
+  const quoteReplyButton = (comment: PullRequestComment): ReactNode =>
+    canComment && comment.body.trim().length > 0 ? (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              aria-label="Quote reply"
+              size="icon-xs"
+              variant="ghost"
+              className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
+              disabled={posting}
+              onClick={() => quoteReply(comment.body)}
+            />
+          }
+        >
+          <ReplyIcon className="size-3" />
+        </TooltipTrigger>
+        <TooltipPopup>Quote reply</TooltipPopup>
+      </Tooltip>
+    ) : null;
+
   // A comment that already lives on a review thread is that thread: the thread carries the line
   // and side the bare comment has lost, and a resolved one is finished work nobody should be
   // invited to fix again — the same call the whole-review hand-off makes.
@@ -727,6 +763,7 @@ export function PullRequestSummaryTab({
                         comment={comment}
                         editing={commentEditing}
                         label={thread?.isResolved ? "Resolved" : "Approval dismissed"}
+                        quoteButton={quoteReplyButton(comment)}
                         reactionBar={
                           <PullRequestReactionBar
                             className="mt-2"
@@ -780,28 +817,6 @@ export function PullRequestSummaryTab({
                               : fixFindingLabel}
                           </Button>
                         ) : null}
-                        {/* Only where the composer below exists to receive the quote, and only
-                            for comments with something to quote — a review that is all verdict
-                            and no words would quote as an empty block. */}
-                        {canComment && comment.body.trim().length > 0 ? (
-                          <Tooltip>
-                            <TooltipTrigger
-                              render={
-                                <Button
-                                  aria-label="Quote reply"
-                                  size="icon-xs"
-                                  variant="ghost"
-                                  className="-mr-1 -mt-1 shrink-0 text-muted-foreground hover:text-foreground"
-                                  disabled={posting}
-                                  onClick={() => quoteReply(comment.body)}
-                                />
-                              }
-                            >
-                              <ReplyIcon className="size-3" />
-                            </TooltipTrigger>
-                            <TooltipPopup>Quote reply</TooltipPopup>
-                          </Tooltip>
-                        ) : null}
                       </div>
                       {comment.path ? (
                         <p
@@ -811,7 +826,12 @@ export function PullRequestSummaryTab({
                           {comment.path}
                         </p>
                       ) : null}
-                      <CommentBody className="mt-2" comment={comment} editing={commentEditing} />
+                      <CommentBody
+                        className="mt-2"
+                        comment={comment}
+                        editing={commentEditing}
+                        quoteButton={quoteReplyButton(comment)}
+                      />
                       <PullRequestReactionBar
                         className="mt-2"
                         reactions={comment.reactions ?? []}

From 55f9ae3870cfcf9099c907673afeb51ce49ee464 Mon Sep 17 00:00:00 2001
From: Dominic Roy <dominic@sdko.org>
Date: Wed, 12 Aug 2026 21:16:36 -0400
Subject: [PATCH 3/3] fix(web): keep quote buttons hidden while a comment posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disabling them while posting let the Button's disabled:opacity-64
outrank the hover-reveal's opacity-0, ghosting every quote icon into
view for the duration of the request. The button now leaves the tree
for those seconds instead — same protection from the success clear,
nothing fighting the reveal.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/pullRequest/PullRequestSummaryTab.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index 4c463a2780e..5547cc19157 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -423,10 +423,11 @@ export function PullRequestSummaryTab({
 
   // Rides beside the edit pencil on every remark, collapsed conversations included — but only
   // where the composer below exists to receive the quote, and only for comments with something
-  // to quote: a review that is all verdict and no words would quote as an empty block. Disabled
-  // while posting, when the composer is locked and the success clear would eat the quote.
+  // to quote: a review that is all verdict and no words would quote as an empty block. Gone
+  // rather than disabled while posting — the composer is locked and the success clear would eat
+  // the quote, and a disabled button's own opacity would defeat the hover reveal.
   const quoteReplyButton = (comment: PullRequestComment): ReactNode =>
-    canComment && comment.body.trim().length > 0 ? (
+    canComment && !posting && comment.body.trim().length > 0 ? (
       <Tooltip>
         <TooltipTrigger
           render={
@@ -435,7 +436,6 @@ export function PullRequestSummaryTab({
               size="icon-xs"
               variant="ghost"
               className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
-              disabled={posting}
               onClick={() => quoteReply(comment.body)}
             />
           }