feat(code): show PR comments in review panel

Author: adboio

apps/code/package.json

@@ -177,6 +177,8 @@
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
     "reflect-metadata": "^0.2.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "smol-toml": "^1.6.0",

apps/code/src/main/services/git/schemas.ts

@@ -328,6 +328,48 @@ export const getPrDetailsByUrlOutput = z.object({
 });
 export type PrDetailsByUrlOutput = z.infer<typeof getPrDetailsByUrlOutput>;
 
+// getPrReviewComments schemas
+export const prReviewCommentUserSchema = z.object({
+  login: z.string(),
+  avatar_url: z.string(),
+});
+
+export const prReviewCommentSchema = z.object({
+  id: z.number(),
+  body: z.string(),
+  path: z.string(),
+  line: z.number().nullable(),
+  original_line: z.number().nullable(),
+  side: z.enum(["LEFT", "RIGHT"]),
+  start_line: z.number().nullable(),
+  start_side: z.enum(["LEFT", "RIGHT"]).nullable(),
+  diff_hunk: z.string(),
+  in_reply_to_id: z.number().nullable(),
+  user: prReviewCommentUserSchema,
+  created_at: z.string(),
+  updated_at: z.string(),
+  subject_type: z.enum(["line", "file"]).nullable(),
+});
+
+export type PrReviewComment = z.infer<typeof prReviewCommentSchema>;
+
+export const getPrReviewCommentsInput = z.object({
+  prUrl: z.string(),
+});
+export const getPrReviewCommentsOutput = z.array(prReviewCommentSchema);
+
+// replyToPrComment schemas
+export const replyToPrCommentInput = z.object({
+  prUrl: z.string(),
+  commentId: z.number(),
+  body: z.string(),
+});
+export const replyToPrCommentOutput = z.object({
+  success: z.boolean(),
+  comment: prReviewCommentSchema.nullable(),
+});
+export type ReplyToPrCommentOutput = z.infer<typeof replyToPrCommentOutput>;
+
 // updatePrByUrl schemas
 export const prActionType = z.enum(["close", "reopen", "ready", "draft"]);
 export type PrActionType = z.infer<typeof prActionType>;

apps/code/src/main/services/git/service.ts

@@ -56,10 +56,12 @@ import type {
   OpenPrOutput,
   PrActionType,
   PrDetailsByUrlOutput,
+  PrReviewComment,
   PrStatusOutput,
   PublishOutput,
   PullOutput,
   PushOutput,
+  ReplyToPrCommentOutput,
   SyncOutput,
   UpdatePrByUrlOutput,
 } from "./schemas";
@@ -982,6 +984,139 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     }
   }
 
+  public async getPrReviewComments(prUrl: string): Promise<PrReviewComment[]> {
+    const pr = parsePrUrl(prUrl);
+    if (!pr) return [];
+
+    const { owner, repo, number } = pr;
+
+    try {
+      const result = await execGh([
+        "api",
+        `repos/${owner}/${repo}/pulls/${number}/comments`,
+        "--paginate",
+        "--slurp",
+      ]);
+
+      if (result.exitCode !== 0) {
+        throw new Error(
+          `Failed to fetch PR review comments: ${result.stderr || result.error || "Unknown error"}`,
+        );
+      }
+
+      const pages = JSON.parse(result.stdout) as Array<
+        Array<{
+          id: number;
+          body: string;
+          path: string;
+          line: number | null;
+          original_line: number | null;
+          side: "LEFT" | "RIGHT";
+          start_line: number | null;
+          start_side: "LEFT" | "RIGHT" | null;
+          diff_hunk: string;
+          in_reply_to_id: number | null;
+          user: { login: string; avatar_url: string };
+          created_at: string;
+          updated_at: string;
+          subject_type: "line" | "file" | null;
+        }>
+      >;
+      const comments = pages.flat();
+
+      return comments.map((c) => ({
+        id: c.id,
+        body: c.body,
+        path: c.path,
+        line: c.line ?? null,
+        original_line: c.original_line ?? null,
+        side: c.side,
+        start_line: c.start_line ?? null,
+        start_side: c.start_side ?? null,
+        diff_hunk: c.diff_hunk,
+        in_reply_to_id: c.in_reply_to_id ?? null,
+        user: { login: c.user.login, avatar_url: c.user.avatar_url },
+        created_at: c.created_at,
+        updated_at: c.updated_at,
+        subject_type: c.subject_type ?? null,
+      }));
+    } catch (error) {
+      log.warn("Failed to fetch PR review comments", { prUrl, error });
+      throw error;
+    }
+  }
+
+  public async replyToPrComment(
+    prUrl: string,
+    commentId: number,
+    body: string,
+  ): Promise<ReplyToPrCommentOutput> {
+    const pr = parsePrUrl(prUrl);
+    if (!pr) {
+      return { success: false, comment: null };
+    }
+
+    try {
+      const result = await execGh([
+        "api",
+        `repos/${pr.owner}/${pr.repo}/pulls/${pr.number}/comments/${commentId}/replies`,
+        "-X",
+        "POST",
+        "-f",
+        `body=${body}`,
+      ]);
+
+      if (result.exitCode !== 0) {
+        log.warn("Failed to reply to PR comment", {
+          prUrl,
+          commentId,
+          error: result.stderr || result.error,
+        });
+        return { success: false, comment: null };
+      }
+
+      const data = JSON.parse(result.stdout) as {
+        id: number;
+        body: string;
+        path: string;
+        line: number | null;
+        original_line: number | null;
+        side: "LEFT" | "RIGHT";
+        start_line: number | null;
+        start_side: "LEFT" | "RIGHT" | null;
+        diff_hunk: string;
+        in_reply_to_id: number | null;
+        user: { login: string; avatar_url: string };
+        created_at: string;
+        updated_at: string;
+        subject_type: "line" | "file" | null;
+      };
+
+      return {
+        success: true,
+        comment: {
+          id: data.id,
+          body: data.body,
+          path: data.path,
+          line: data.line ?? null,
+          original_line: data.original_line ?? null,
+          side: data.side,
+          start_line: data.start_line ?? null,
+          start_side: data.start_side ?? null,
+          diff_hunk: data.diff_hunk,
+          in_reply_to_id: data.in_reply_to_id ?? null,
+          user: { login: data.user.login, avatar_url: data.user.avatar_url },
+          created_at: data.created_at,
+          updated_at: data.updated_at,
+          subject_type: data.subject_type ?? null,
+        },
+      };
+    } catch (error) {
+      log.warn("Failed to reply to PR comment", { prUrl, commentId, error });
+      return { success: false, comment: null };
+    }
+  }
+
   public async getBranchChangedFiles(
     repo: string,
     branch: string,

apps/code/src/main/trpc/routers/git.ts

@@ -44,6 +44,8 @@ import {
   getPrChangedFilesOutput,
   getPrDetailsByUrlInput,
   getPrDetailsByUrlOutput,
+  getPrReviewCommentsInput,
+  getPrReviewCommentsOutput,
   getPrTemplateInput,
   getPrTemplateOutput,
   ghStatusOutput,
@@ -58,6 +60,8 @@ import {
   pullOutput,
   pushInput,
   pushOutput,
+  replyToPrCommentInput,
+  replyToPrCommentOutput,
   searchGithubIssuesInput,
   searchGithubIssuesOutput,
   stageFilesInput,
@@ -315,6 +319,18 @@ export const gitRouter = router({
       getService().updatePrByUrl(input.prUrl, input.action),
     ),
 
+  getPrReviewComments: publicProcedure
+    .input(getPrReviewCommentsInput)
+    .output(getPrReviewCommentsOutput)
+    .query(({ input }) => getService().getPrReviewComments(input.prUrl)),
+
+  replyToPrComment: publicProcedure
+    .input(replyToPrCommentInput)
+    .output(replyToPrCommentOutput)
+    .mutation(({ input }) =>
+      getService().replyToPrComment(input.prUrl, input.commentId, input.body),
+    ),
+
   getBranchChangedFiles: publicProcedure
     .input(getBranchChangedFilesInput)
     .output(getBranchChangedFilesOutput)

apps/code/src/renderer/features/code-editor/stores/diffViewerStore.ts

@@ -11,6 +11,7 @@ interface DiffViewerStoreState {
   loadFullFiles: boolean;
   wordDiffs: boolean;
   hideWhitespaceChanges: boolean;
+  showReviewComments: boolean;
 }
 
 interface DiffViewerStoreActions {
@@ -20,6 +21,7 @@ interface DiffViewerStoreActions {
   toggleLoadFullFiles: () => void;
   toggleWordDiffs: () => void;
   toggleHideWhitespaceChanges: () => void;
+  toggleShowReviewComments: () => void;
 }
 
 type DiffViewerStore = DiffViewerStoreState & DiffViewerStoreActions;
@@ -32,6 +34,7 @@ export const useDiffViewerStore = create<DiffViewerStore>()(
       loadFullFiles: false,
       wordDiffs: true,
       hideWhitespaceChanges: false,
+      showReviewComments: true,
       setViewMode: (mode) =>
         set((state) => {
           if (state.viewMode === mode) {
@@ -64,6 +67,8 @@ export const useDiffViewerStore = create<DiffViewerStore>()(
       toggleWordDiffs: () => set((s) => ({ wordDiffs: !s.wordDiffs })),
       toggleHideWhitespaceChanges: () =>
         set((s) => ({ hideWhitespaceChanges: !s.hideWhitespaceChanges })),
+      toggleShowReviewComments: () =>
+        set((s) => ({ showReviewComments: !s.showReviewComments })),
     }),
     {
       name: "diff-viewer-storage",

apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx

@@ -1,12 +1,24 @@
+import { useDiffViewerStore } from "@features/code-editor/stores/diffViewerStore";
+import { usePrDetails } from "@features/git-interaction/hooks/usePrDetails";
 import { useCloudChangedFiles } from "@features/task-detail/hooks/useCloudChangedFiles";
-import type { FileDiffMetadata } from "@pierre/diffs";
+import type { DiffLineAnnotation, FileDiffMetadata } from "@pierre/diffs";
 import { processFile } from "@pierre/diffs";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { useReviewNavigationStore } from "@renderer/features/code-review/stores/reviewNavigationStore";
 import type { ChangedFile, Task } from "@shared/types";
 import { useMemo } from "react";
+import { usePrCommentActions } from "../hooks/usePrCommentActions";
 import { useReviewComment } from "../hooks/useReviewComment";
-import type { DiffOptions, OnCommentCallback } from "../types";
+import type {
+  AnnotationMetadata,
+  DiffOptions,
+  OnCommentCallback,
+} from "../types";
+import {
+  buildPrCommentAnnotations,
+  getFileCommentThreads,
+  groupCommentsIntoThreads,
+} from "../utils/prCommentAnnotations";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
 import {
   DeferredDiffPlaceholder,
@@ -24,9 +36,19 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
   const isReviewOpen = useReviewNavigationStore(
     (s) => (s.reviewModes[taskId] ?? "closed") !== "closed",
   );
+  const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
   const { effectiveBranch, prUrl, isRunActive, remoteFiles, isLoading } =
     useCloudChangedFiles(taskId, task, isReviewOpen);
   const onComment = useReviewComment(taskId);
+  const { comments } = usePrDetails(prUrl, {
+    includeComments: isReviewOpen && showReviewComments,
+  });
+  const prCommentActions = usePrCommentActions(taskId, prUrl);
+
+  const commentThreads = useMemo(
+    () => groupCommentsIntoThreads(comments.data),
+    [comments.data],
+  );
 
   const allPaths = useMemo(() => remoteFiles.map((f) => f.path), [remoteFiles]);
 
@@ -108,6 +130,16 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
               collapsed={isCollapsed}
               onToggle={() => toggleFile(file.path)}
               onComment={onComment}
+              prCommentAnnotations={
+                showReviewComments
+                  ? buildPrCommentAnnotations(
+                      getFileCommentThreads(commentThreads, file.path),
+                    )
+                  : undefined
+              }
+              prCommentActions={
+                showReviewComments ? prCommentActions : undefined
+              }
             />
           </div>
         );
@@ -123,13 +155,17 @@ function CloudFileDiff({
   collapsed,
   onToggle,
   onComment,
+  prCommentAnnotations,
+  prCommentActions,
 }: {
   file: ChangedFile;
   prUrl: string | null;
   options: DiffOptions;
   collapsed: boolean;
   onToggle: () => void;
   onComment: OnCommentCallback;
+  prCommentAnnotations?: DiffLineAnnotation<AnnotationMetadata>[];
+  prCommentActions?: ReturnType<typeof usePrCommentActions>;
 }) {
   const fileDiff = useMemo((): FileDiffMetadata | undefined => {
     if (!file.patch) return undefined;
@@ -160,6 +196,8 @@ function CloudFileDiff({
       fileDiff={fileDiff}
       options={{ ...options, collapsed }}
       onComment={onComment}
+      prCommentAnnotations={prCommentAnnotations}
+      prCommentActions={prCommentActions}
       renderCustomHeader={(fd) => (
         <DiffFileHeader
           fileDiff={fd}

apps/code/src/renderer/features/code-review/components/DiffSettingsMenu.tsx

@@ -13,6 +13,10 @@ export function DiffSettingsMenu() {
   const toggleHideWhitespaceChanges = useDiffViewerStore(
     (s) => s.toggleHideWhitespaceChanges,
   );
+  const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
+  const toggleShowReviewComments = useDiffViewerStore(
+    (s) => s.toggleShowReviewComments,
+  );
 
   return (
     <DropdownMenu.Root>
@@ -42,6 +46,14 @@ export function DiffSettingsMenu() {
             {hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
           </Text>
         </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onSelect={toggleShowReviewComments}>
+          <Text size="1">
+            {showReviewComments
+              ? "Hide review comments"
+              : "Show review comments"}
+          </Text>
+        </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   );