feat(code): show PR comments in review panel

Author: adboio

apps/code/package.json

@@ -186,6 +186,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,71 @@ 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 PrReviewComment[][];
+      return pages.flat();
+    } 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 PrReviewComment;
+      return { success: true, comment: data };
+    } 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,3 +1,5 @@
+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 { processFile } from "@pierre/diffs";
@@ -6,6 +8,7 @@ import { useReviewNavigationStore } from "@renderer/features/code-review/stores/
 import type { ChangedFile, Task } from "@shared/types";
 import { useMemo } from "react";
 import type { DiffOptions } from "../types";
+import type { PrCommentThread } from "../utils/prCommentAnnotations";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
 import {
   DeferredDiffPlaceholder,
@@ -23,8 +26,12 @@ 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 { commentThreads } = usePrDetails(prUrl, {
+    includeComments: isReviewOpen && showReviewComments,
+  });
 
   const allPaths = useMemo(() => remoteFiles.map((f) => f.path), [remoteFiles]);
 
@@ -44,23 +51,20 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
   if (!prUrl && !effectiveBranch && remoteFiles.length === 0) {
     if (isRunActive) {
       return (
-        <Flex align="center" justify="center" height="100%">
-          <Flex align="center" gap="2">
-            <Spinner size="1" />
-            <Text size="2" color="gray">
-              Waiting for changes...
-            </Text>
+        <Flex
+          align="center"
+          justify="center"
+          height="100%"
+          className="text-gray-10"
+        >
+          <Flex direction="column" align="center" gap="2">
+            <Spinner size="2" />
+            <Text size="2">Waiting for changes...</Text>
           </Flex>
         </Flex>
       );
     }
-    return (
-      <Flex align="center" justify="center" height="100%">
-        <Text size="2" color="gray">
-          No file changes yet
-        </Text>
-      </Flex>
-    );
+    return null;
   }
 
   return (
@@ -105,6 +109,7 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
               options={diffOptions}
               collapsed={isCollapsed}
               onToggle={() => toggleFile(file.path)}
+              commentThreads={showReviewComments ? commentThreads : undefined}
             />
           </div>
         );
@@ -120,13 +125,15 @@ function CloudFileDiff({
   options,
   collapsed,
   onToggle,
+  commentThreads,
 }: {
   file: ChangedFile;
   taskId: string;
   prUrl: string | null;
   options: DiffOptions;
   collapsed: boolean;
   onToggle: () => void;
+  commentThreads?: Map<number, PrCommentThread>;
 }) {
   const fileDiff = useMemo((): FileDiffMetadata | undefined => {
     if (!file.patch) return undefined;
@@ -157,6 +164,8 @@ function CloudFileDiff({
       fileDiff={fileDiff}
       options={{ ...options, collapsed }}
       taskId={taskId}
+      prUrl={prUrl}
+      commentThreads={commentThreads}
       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>
   );