feat(client): anchor review composer to selected diff lines with pending review flow

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

Author: sheepbox8646

packages/client/src/renderer/i18n/locales/en.json

@@ -2311,6 +2311,24 @@
       "reply": "replied",
       "diff": {
         "viewThread": "View review thread"
+      },
+      "anchor": {
+        "commentingOn": "Commenting on {path} · {range}",
+        "oldSide": "(old code)",
+        "clear": "Clear selected lines"
+      },
+      "addSingleComment": "Add single comment",
+      "addToReview": "Add to review",
+      "singleDisabledPending": "You have a pending review; new comments join it.",
+      "threadError": "The comment could not be added. Reselect the lines and try again.",
+      "pending": {
+        "count": "{count} pending review comments",
+        "discard": "Discard review",
+        "discardTitle": "Discard pending review?",
+        "discardDescription": "All pending review comments will be deleted. This cannot be undone.",
+        "discardConfirm": "Discard",
+        "discardCancel": "Cancel",
+        "discardError": "The pending review could not be discarded."
       }
     },
     "reviewDecision": {

packages/client/src/renderer/i18n/locales/zh.json

@@ -2311,6 +2311,24 @@
       "reply": "回复了",
       "diff": {
         "viewThread": "查看评论线程"
+      },
+      "anchor": {
+        "commentingOn": "评论 {path} · {range}",
+        "oldSide": "（旧代码）",
+        "clear": "清除所选行"
+      },
+      "addSingleComment": "单条评论",
+      "addToReview": "加入 Review",
+      "singleDisabledPending": "存在待提交的 review，新评论将加入其中。",
+      "threadError": "评论添加失败，请重新选择行后重试。",
+      "pending": {
+        "count": "{count} 条待提交评论",
+        "discard": "丢弃 Review",
+        "discardTitle": "丢弃待提交的 review？",
+        "discardDescription": "所有待提交的 review 评论都会被删除，且无法恢复。",
+        "discardConfirm": "丢弃",
+        "discardCancel": "取消",
+        "discardError": "待提交的 review 丢弃失败。"
       }
     },
     "reviewDecision": {

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

@@ -4,18 +4,30 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
   Skeleton,
 } from '@oh-my-github/ui'
-import { AlertCircle, FileDiff } from 'lucide-vue-next'
+import { AlertCircle, FileDiff, MessageSquarePlus, X } from 'lucide-vue-next'
 import { ChangedFilesTree, ConversationCommentComposer } from '@/components'
+import { useReviewSelection } from '@/composables/use-review-selection'
 import {
+  addPullRequestReviewThread,
+  discardPendingPullRequestReview,
+  submitPendingPullRequestReview,
   submitPullRequestReview,
   usePullRequestFilesQuery,
+  usePullRequestReviewThreadsQuery,
+  useReviewThreadsInvalidation,
 } from '@/composables/github/use-pull-requests'
 
 const props = defineProps<{
@@ -45,10 +57,38 @@ const showFilesEmpty = computed(() =>
   && files.value.length === 0
 )
 
+const threadsQuery = usePullRequestReviewThreadsQuery(
+  () => props.owner,
+  () => props.repo,
+  () => props.number,
+  () => props.active,
+)
+const pendingReview = computed(() => threadsQuery.data.value?.pendingReview ?? null)
+const { invalidateReviewThreads } = useReviewThreadsInvalidation()
+const { selection, clearSelection } = useReviewSelection()
+
 const reviewBody = ref('')
 const reviewError = ref<string | null>(null)
 const submittingEvent = ref<GitHubPullRequestReviewEvent | null>(null)
 const viewerLogin = ref<string | null>(null)
+const isSubmittingThread = ref<'single' | 'review' | null>(null)
+const isDiscardDialogOpen = ref(false)
+const isDiscardingPending = ref(false)
+
+const activeSelection = computed(() => {
+  const value = selection.value
+  if (!value) return null
+  if (value.owner !== props.owner || value.repo !== props.repo || value.number !== props.number) return null
+  return value
+})
+
+const anchorLabel = computed(() => {
+  const anchor = activeSelection.value
+  if (!anchor) return ''
+  const range = anchor.startLine === null ? `L${anchor.line}` : `L${anchor.startLine}–L${anchor.line}`
+  const label = t('pullRequest.review.anchor.commentingOn', { path: anchor.path, range })
+  return anchor.side === 'LEFT' ? `${label} ${t('pullRequest.review.anchor.oldSide')}` : label
+})
 
 const isOwnPullRequest = computed(() =>
   viewerLogin.value !== null
@@ -77,27 +117,87 @@ function retryFiles(): void {
 }
 
 async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void> {
-  if (submittingEvent.value) return
+  if (submittingEvent.value || isSubmittingThread.value) return
 
+  const pending = pendingReview.value
   const body = reviewBody.value.trim()
-  if (!body && event !== 'APPROVE') return
+  if (!body && event !== 'APPROVE' && !pending) return
 
   submittingEvent.value = event
   reviewError.value = null
 
   try {
-    await submitPullRequestReview(props.owner, props.repo, props.number, {
-      event,
-      ...(body ? { body } : {}),
-    })
+    if (pending) {
+      await submitPendingPullRequestReview(props.owner, props.repo, props.number, {
+        reviewId: pending.id,
+        event,
+        ...(body ? { body } : {}),
+      })
+    } else {
+      await submitPullRequestReview(props.owner, props.repo, props.number, {
+        event,
+        ...(body ? { body } : {}),
+      })
+    }
     reviewBody.value = ''
+    invalidateReviewThreads(props.owner, props.repo, props.number)
     emit('refetch')
   } catch {
     reviewError.value = t('pullRequest.review.error')
   } finally {
     submittingEvent.value = null
   }
 }
+
+async function submitLineComment(mode: 'single' | 'review'): Promise<void> {
+  const anchor = activeSelection.value
+  const body = reviewBody.value.trim()
+  if (!anchor || !body || isSubmittingThread.value || submittingEvent.value) return
+
+  isSubmittingThread.value = mode
+  reviewError.value = null
+
+  try {
+    await addPullRequestReviewThread(props.owner, props.repo, props.number, {
+      pullRequestId: props.pullRequest.nodeId,
+      pendingReviewId: pendingReview.value?.id ?? null,
+      mode,
+      path: anchor.path,
+      side: anchor.side,
+      line: anchor.line,
+      startLine: anchor.startLine,
+      startSide: anchor.startLine === null ? null : anchor.side,
+      body,
+    })
+    reviewBody.value = ''
+    clearSelection()
+    invalidateReviewThreads(props.owner, props.repo, props.number)
+    emit('refetch')
+  } catch {
+    reviewError.value = t('pullRequest.review.threadError')
+  } finally {
+    isSubmittingThread.value = null
+  }
+}
+
+async function discardPendingReview(): Promise<void> {
+  const pending = pendingReview.value
+  if (!pending || isDiscardingPending.value) return
+
+  isDiscardingPending.value = true
+  reviewError.value = null
+
+  try {
+    await discardPendingPullRequestReview(props.owner, props.repo, pending.id)
+    isDiscardDialogOpen.value = false
+    invalidateReviewThreads(props.owner, props.repo, props.number)
+    emit('refetch')
+  } catch {
+    reviewError.value = t('pullRequest.review.pending.discardError')
+  } finally {
+    isDiscardingPending.value = false
+  }
+}
 </script>
 
 <template>
@@ -108,13 +208,36 @@ async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void>
           {{ t('pullRequest.review.title') }}
         </h2>
         <span
-          v-if="isOwnPullRequest"
+          v-if="pendingReview"
+          class="select-none text-body text-muted-foreground"
+        >
+          {{ t('pullRequest.review.pending.count', { count: pendingReview.commentCount }) }}
+        </span>
+        <span
+          v-else-if="isOwnPullRequest"
           class="text-body text-muted-foreground"
         >
           {{ t('pullRequest.review.ownPullRequest') }}
         </span>
       </div>
 
+      <div
+        v-if="activeSelection"
+        class="flex min-w-0 items-center gap-2 rounded-lg border border-border bg-card px-3 py-2"
+      >
+        <MessageSquarePlus class="size-4 shrink-0 text-muted-foreground" />
+        <span class="min-w-0 flex-1 truncate text-body text-foreground">{{ anchorLabel }}</span>
+        <Button
+          :aria-label="t('pullRequest.review.anchor.clear')"
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+          @click="clearSelection"
+        >
+          <X class="size-3.5" />
+        </Button>
+      </div>
+
       <ConversationCommentComposer
         v-model="reviewBody"
         :error="reviewError"
@@ -124,9 +247,49 @@ async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void>
         :repo="repo"
       >
         <template #actions>
-          <div class="flex shrink-0 items-center gap-2">
+          <div
+            v-if="activeSelection"
+            class="flex shrink-0 items-center gap-2"
+          >
+            <Button
+              :disabled="!hasBody || Boolean(pendingReview) || Boolean(isSubmittingThread)"
+              :loading="isSubmittingThread === 'single'"
+              loading-mode="leading"
+              size="sm"
+              :title="pendingReview ? t('pullRequest.review.singleDisabledPending') : undefined"
+              type="button"
+              variant="outline"
+              @click="submitLineComment('single')"
+            >
+              {{ t('pullRequest.review.addSingleComment') }}
+            </Button>
+            <Button
+              :disabled="!hasBody || Boolean(isSubmittingThread)"
+              :loading="isSubmittingThread === 'review'"
+              loading-mode="leading"
+              size="sm"
+              type="button"
+              @click="submitLineComment('review')"
+            >
+              {{ t('pullRequest.review.addToReview') }}
+            </Button>
+          </div>
+          <div
+            v-else
+            class="flex shrink-0 items-center gap-2"
+          >
+            <Button
+              v-if="pendingReview"
+              :disabled="Boolean(submittingEvent) || isDiscardingPending"
+              size="sm"
+              type="button"
+              variant="ghost"
+              @click="isDiscardDialogOpen = true"
+            >
+              {{ t('pullRequest.review.pending.discard') }}
+            </Button>
             <Button
-              :disabled="!hasBody || Boolean(submittingEvent)"
+              :disabled="(!hasBody && !pendingReview) || Boolean(submittingEvent)"
               :loading="submittingEvent === 'COMMENT'"
               loading-mode="leading"
               size="sm"
@@ -137,7 +300,7 @@ async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void>
               {{ t('pullRequest.review.comment') }}
             </Button>
             <Button
-              :disabled="isOwnPullRequest || !hasBody || Boolean(submittingEvent)"
+              :disabled="isOwnPullRequest || (!hasBody && !pendingReview) || Boolean(submittingEvent)"
               :loading="submittingEvent === 'REQUEST_CHANGES'"
               loading-mode="leading"
               size="sm"
@@ -236,5 +399,33 @@ async function submitReview(event: GitHubPullRequestReviewEvent): Promise<void>
         />
       </div>
     </section>
+
+    <Dialog v-model:open="isDiscardDialogOpen">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{{ t('pullRequest.review.pending.discardTitle') }}</DialogTitle>
+          <DialogDescription>{{ t('pullRequest.review.pending.discardDescription') }}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            :disabled="isDiscardingPending"
+            type="button"
+            variant="ghost"
+            @click="isDiscardDialogOpen = false"
+          >
+            {{ t('pullRequest.review.pending.discardCancel') }}
+          </Button>
+          <Button
+            :loading="isDiscardingPending"
+            loading-mode="leading"
+            type="button"
+            variant="destructive"
+            @click="discardPendingReview"
+          >
+            {{ t('pullRequest.review.pending.discardConfirm') }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>