feat(client): open PR diffs in a commentable right-panel view

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: sheepbox8646

packages/client/src/renderer/components/file-tree/changed-files-tree.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
   files: GitHubCommitFile[]
   owner: string
   repo: string
+  /** When set, file diffs open as commentable pull-request diffs. */
+  pullRequestNumber?: number
 }>()
 
 const { t } = useI18n()
@@ -81,6 +83,21 @@ function selectNode(node: GitHubRepositoryFileNode): void {
     return
   }
 
+  if (props.pullRequestNumber) {
+    openRightPanel({
+      type: 'pull-request-diff',
+      owner: props.owner,
+      repo: props.repo,
+      number: props.pullRequestNumber,
+      path: file.filename,
+      patch: file.patch,
+      additions: file.additions,
+      deletions: file.deletions,
+      title: file.filename,
+    })
+    return
+  }
+
   openRightPanel({
     type: 'diff',
     patch: file.patch,

packages/client/src/renderer/components/index.ts

@@ -12,6 +12,8 @@ export { default as MermaidRenderer } from "./mermaid/mermaid-renderer.vue";
 export { default as AppPagination } from "./navigation/app-pagination.vue";
 export { default as MultiSelectPicker } from "./navigation/multi-select-picker.vue";
 export { default as SectionSidebar } from "./navigation/section-sidebar.vue";
+export { default as PullRequestReviewDiffPanel } from "./review/pull-request-review-diff-panel.vue";
+export { default as ReviewDiff } from "./review/review-diff.vue";
 export { default as ShikiCode } from "./code/shiki-code.vue";
 export { default as ShikiDiff } from "./code/shiki-diff.vue";
 export { default as ConversationActorLine } from "./conversation/conversation-actor-line.vue";

packages/client/src/renderer/components/review/pull-request-review-diff-panel.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue'
+import { usePullRequestReviewThreadsQuery } from '@/composables/github/use-pull-requests'
+import { useReviewSelection } from '@/composables/use-review-selection'
+import ReviewDiff, { type ReviewDiffMarker } from './review-diff.vue'
+import type { ReviewDiffRange } from './review-diff-selection'
+
+const props = defineProps<{
+  owner: string
+  repo: string
+  number: number
+  path: string
+  patch: string
+}>()
+
+const threadsQuery = usePullRequestReviewThreadsQuery(
+  () => props.owner,
+  () => props.repo,
+  () => props.number,
+  () => true,
+)
+
+const { selection, setSelection, clearSelection, locateThread } = useReviewSelection()
+
+// Outdated threads report line: null and cannot be anchored in the current diff.
+const markers = computed<ReviewDiffMarker[]>(() => {
+  const threads = threadsQuery.data.value?.threads ?? []
+
+  return threads.flatMap((thread) => {
+    if (thread.path !== props.path || thread.line === null) return []
+
+    return [{
+      threadId: thread.id,
+      side: thread.side,
+      line: thread.line,
+      count: thread.comments.length,
+      isResolved: thread.isResolved,
+      isPending: thread.isPending,
+    }]
+  })
+})
+
+const activeSelection = computed<ReviewDiffRange | null>(() => {
+  const value = selection.value
+  if (!value) return null
+  if (
+    value.owner !== props.owner
+    || value.repo !== props.repo
+    || value.number !== props.number
+    || value.path !== props.path
+  ) return null
+
+  return { side: value.side, startLine: value.startLine, line: value.line }
+})
+
+function onSelect(range: ReviewDiffRange): void {
+  setSelection({
+    owner: props.owner,
+    repo: props.repo,
+    number: props.number,
+    path: props.path,
+    side: range.side,
+    startLine: range.startLine,
+    line: range.line,
+  })
+}
+
+watch(
+  () => [props.owner, props.repo, props.number, props.path] as const,
+  () => {
+    clearSelection()
+  },
+)
+
+onBeforeUnmount(() => {
+  clearSelection()
+})
+</script>
+
+<template>
+  <div class="min-h-full overflow-x-auto py-2">
+    <ReviewDiff
+      class="w-max min-w-full"
+      :filename="props.path"
+      :markers="markers"
+      :patch="props.patch"
+      :selection="activeSelection"
+      @locate-thread="locateThread"
+      @select="onSelect"
+    />
+  </div>
+</template>

packages/client/src/renderer/composables/use-right-panel.ts

@@ -17,6 +17,17 @@ export type RightPanelContent =
       deletions?: number
       title?: string
     }
+  | {
+      type: 'pull-request-diff'
+      owner: string
+      repo: string
+      number: number
+      path: string
+      patch: string
+      additions?: number
+      deletions?: number
+      title?: string
+    }
   | {
       type: 'markdown'
       content: string

packages/client/src/renderer/pages/pull-request/components/pull-request-review-tab.vue

@@ -231,6 +231,7 @@ async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void>
         <ChangedFilesTree
           :files="files"
           :owner="owner"
+          :pull-request-number="number"
           :repo="repo"
         />
       </div>

packages/client/src/renderer/pages/workspace/components/workspace-right-panel.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { Download } from 'lucide-vue-next'
 import { Button } from '@oh-my-github/ui'
 import { useRightPanel } from '@/composables/use-right-panel'
-import { GitHubMarkdownRenderer, MarkdownRenderer, ShikiCode } from '@/components'
+import { GitHubMarkdownRenderer, MarkdownRenderer, PullRequestReviewDiffPanel, ShikiCode } from '@/components'
 
 const props = defineProps<{
   expanded: boolean
@@ -101,6 +101,19 @@ function resizeWithKeyboard(event: KeyboardEvent): void {
           />
         </div>
 
+        <div
+          v-else-if="content.type === 'pull-request-diff'"
+          class="min-h-full"
+        >
+          <PullRequestReviewDiffPanel
+            :number="content.number"
+            :owner="content.owner"
+            :patch="content.patch"
+            :path="content.path"
+            :repo="content.repo"
+          />
+        </div>
+
         <div
           v-else-if="content.type === 'markdown'"
           class="p-4"