fix(code-review): address PR feedback on batched review comments

- Mock @renderer/trpc/client and @features/sessions/service/service in
  ReviewShell.test.tsx so importing ReviewShell (which now transitively
  pulls in sendPromptToAgent → trpcClient) doesn't initialize the IPC
  link at module load time. Fixes the unit-test CI job.
- Use bullets instead of "1.", "2." enumeration in
  buildBatchedInlineCommentsPrompt to match the team rule about avoiding
  numbered lists in agent prompts.
- Send the batched prompt before clearing drafts in PendingReviewBar so
  drafts aren't lost if sendPromptToAgent throws.
- Extract the duplicated handleEditDraft callback in
  InteractiveFileDiff.tsx into a shared useEditDraftHandler hook so the
  edit flow lives in one place.

Generated-By: PostHog Code
Task-Id: 53f42d57-7308-48a1-996f-836f1c7536eb

Author: adboio

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

@@ -1,7 +1,14 @@
 import { sendPromptToAgent } from "@features/sessions/utils/sendPromptToAgent";
-import { PaperPlaneTilt, X } from "@phosphor-icons/react";
+import { ArrowUp, Trash } from "@phosphor-icons/react";
 import type { AnnotationSide } from "@pierre/diffs";
-import { Button, Checkbox, Flex, IconButton, Text } from "@radix-ui/themes";
+import {
+  Checkbox,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@posthog/quill";
+import { Text, Tooltip } from "@radix-ui/themes";
 import { isSendMessageSubmitKey } from "@utils/sendMessageKey";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useReviewDraftsStore } from "../stores/reviewDraftsStore";
@@ -39,6 +46,7 @@ export function CommentAnnotation({
   const [batch, setBatch] = useState(
     editingDraftId ? true : initialBatchEnabled,
   );
+  const [isEmpty, setIsEmpty] = useState(!initialText?.trim());
 
   const setTextareaRef = useCallback(
     (el: HTMLTextAreaElement | null) => {
@@ -112,53 +120,62 @@ export function CommentAnnotation({
     [handleSubmit, onDismiss],
   );
 
-  const submitLabel = editingDraftId
-    ? "Update comment"
-    : batch
-      ? "Add to review"
-      : "Send to agent";
+  const submitTooltip = isEmpty
+    ? "Enter a comment"
+    : editingDraftId
+      ? "Save"
+      : batch
+        ? "Add to review"
+        : "Send to agent";
 
   return (
-    <div className="px-3 py-1.5">
-      <div
-        data-comment-annotation=""
-        className="whitespace-normal rounded-md border border-(--gray-5) bg-(--gray-2) px-2.5 py-2 font-sans"
-      >
-        <textarea
+    <div data-comment-annotation="" className="px-3 py-1.5 font-sans">
+      <InputGroup>
+        <InputGroupTextarea
           ref={setTextareaRef}
           placeholder="Describe the changes you'd like..."
           onKeyDown={handleKeyDown}
-          className="min-h-[48px] w-full resize-none rounded border border-(--gray-6) bg-(--color-background) p-1.5 text-(--gray-12) text-[13px] leading-normal outline-none"
+          onChange={(e) => setIsEmpty(!e.currentTarget.value.trim())}
+          className="min-h-[48px] resize-none text-[13px]"
         />
-        <Flex align="center" justify="between" gap="3" className="mt-1.5">
-          <Flex align="center" gap="3">
-            <Button size="1" onClick={handleSubmit}>
-              <PaperPlaneTilt size={12} weight="fill" />
-              {submitLabel}
-            </Button>
-            <IconButton
-              size="1"
-              variant="ghost"
-              color="gray"
+        <InputGroupAddon align="block-end">
+          <Tooltip content="Discard">
+            <InputGroupButton
+              size="icon-sm"
+              variant="default"
               onClick={onDismiss}
+              aria-label="Discard"
             >
-              <X size={12} />
-            </IconButton>
-          </Flex>
-          {!editingDraftId && (
-            <Text as="label" size="1" color="gray">
-              <Flex align="center" gap="1.5" className="cursor-pointer">
-                <Checkbox
-                  size="1"
-                  checked={batch}
-                  onCheckedChange={(value) => setBatch(value === true)}
-                />
-                Add to review
-              </Flex>
-            </Text>
-          )}
-        </Flex>
-      </div>
+              <Trash size={14} />
+            </InputGroupButton>
+          </Tooltip>
+          <div className="ml-auto flex items-center gap-3">
+            {!editingDraftId && (
+              <Text as="label" size="1" color="gray">
+                <span className="flex cursor-pointer items-center gap-2">
+                  <Checkbox
+                    size="sm"
+                    checked={batch}
+                    onCheckedChange={(value) => setBatch(value === true)}
+                  />
+                  Add to review
+                </span>
+              </Text>
+            )}
+            <Tooltip content={submitTooltip}>
+              <InputGroupButton
+                size="icon-sm"
+                variant="primary"
+                onClick={handleSubmit}
+                disabled={isEmpty}
+                aria-label={editingDraftId ? "Save" : "Submit"}
+              >
+                <ArrowUp size={14} weight="bold" />
+              </InputGroupButton>
+            </Tooltip>
+          </div>
+        </InputGroupAddon>
+      </InputGroup>
     </div>
   );
 }

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

@@ -130,6 +130,27 @@ function useFileDrafts(taskId: string | undefined, filePath: string) {
   );
 }
 
+function useEditDraftHandler(
+  fileDrafts: ReturnType<typeof useFileDrafts>,
+  openCommentForEdit: (seed: CommentEditSeed) => void,
+) {
+  return useCallback(
+    (draftId: string) => {
+      const draft = fileDrafts.find((d) => d.id === draftId);
+      if (!draft) return;
+      openCommentForEdit({
+        draftId: draft.id,
+        text: draft.text,
+        filePath: draft.filePath,
+        startLine: draft.startLine,
+        endLine: draft.endLine,
+        side: draft.side,
+      });
+    },
+    [fileDrafts, openCommentForEdit],
+  );
+}
+
 function PatchDiffView({
   fileDiff: patchFileDiff,
   repoPath,
@@ -180,22 +201,7 @@ function PatchDiffView({
   filePathRef.current = currentFilePath;
 
   const fileDrafts = useFileDrafts(taskId, currentFilePath);
-
-  const handleEditDraft = useCallback(
-    (draftId: string) => {
-      const draft = fileDrafts.find((d) => d.id === draftId);
-      if (!draft) return;
-      openCommentForEdit({
-        draftId: draft.id,
-        text: draft.text,
-        filePath: draft.filePath,
-        startLine: draft.startLine,
-        endLine: draft.endLine,
-        side: draft.side,
-      });
-    },
-    [fileDrafts, openCommentForEdit],
-  );
+  const handleEditDraft = useEditDraftHandler(fileDrafts, openCommentForEdit);
 
   const hunkAnnotations = useMemo(
     () => (repoPath ? buildHunkAnnotations(fileDiff) : []),
@@ -350,22 +356,7 @@ function FilesDiffView({
   const filePath = newFile.name || oldFile.name;
 
   const fileDrafts = useFileDrafts(taskId, filePath);
-
-  const handleEditDraft = useCallback(
-    (draftId: string) => {
-      const draft = fileDrafts.find((d) => d.id === draftId);
-      if (!draft) return;
-      openCommentForEdit({
-        draftId: draft.id,
-        text: draft.text,
-        filePath: draft.filePath,
-        startLine: draft.startLine,
-        endLine: draft.endLine,
-        side: draft.side,
-      });
-    },
-    [fileDrafts, openCommentForEdit],
-  );
+  const handleEditDraft = useEditDraftHandler(fileDrafts, openCommentForEdit);
 
   const prAnnotations = useMemo(
     () =>

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

@@ -1,142 +1,47 @@
 import { sendPromptToAgent } from "@features/sessions/utils/sendPromptToAgent";
-import {
-  CaretDown,
-  CaretUp,
-  PaperPlaneTilt,
-  Trash,
-} from "@phosphor-icons/react";
-import { Badge, Button, Flex, IconButton, Text } from "@radix-ui/themes";
-import { useState } from "react";
-import {
-  type DraftComment,
-  useReviewDraftsStore,
-} from "../stores/reviewDraftsStore";
-import { useReviewNavigationStore } from "../stores/reviewNavigationStore";
+import { PaperPlaneTilt } from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
+import { Badge, Flex } from "@radix-ui/themes";
+import { useReviewDraftsStore } from "../stores/reviewDraftsStore";
 import { buildBatchedInlineCommentsPrompt } from "../utils/reviewPrompts";
 
 interface PendingReviewBarProps {
   taskId: string;
 }
 
-function formatLineRef(d: DraftComment): string {
-  const sideLabel = d.side === "deletions" ? "old" : "new";
-  return d.startLine === d.endLine
-    ? `L${d.startLine} ${sideLabel}`
-    : `L${d.startLine}-${d.endLine} ${sideLabel}`;
-}
-
 export function PendingReviewBar({ taskId }: PendingReviewBarProps) {
   const drafts = useReviewDraftsStore((s) => s.drafts[taskId] ?? []);
   const clearDrafts = useReviewDraftsStore((s) => s.clearDrafts);
-  const removeDraft = useReviewDraftsStore((s) => s.removeDraft);
-  const requestScrollToFile = useReviewNavigationStore(
-    (s) => s.requestScrollToFile,
-  );
-
-  const [collapsed, setCollapsed] = useState(false);
 
   if (drafts.length === 0) return null;
 
   const handleSend = () => {
     const prompt = buildBatchedInlineCommentsPrompt(drafts);
     if (!prompt) return;
-    clearDrafts(taskId);
     sendPromptToAgent(taskId, prompt);
+    clearDrafts(taskId);
   };
 
-  const countLabel = `${drafts.length} pending comment${drafts.length === 1 ? "" : "s"}`;
-
   return (
     <div className="shrink-0 border-(--gray-5) border-t bg-(--gray-2)">
       <Flex align="center" justify="between" gap="3" className="px-3 py-2">
-        <Flex align="center" gap="2">
-          <IconButton
-            size="1"
-            variant="ghost"
-            color="gray"
-            onClick={() => setCollapsed((v) => !v)}
-            aria-label={
-              collapsed ? "Expand pending review" : "Collapse pending review"
-            }
-          >
-            {collapsed ? <CaretUp size={12} /> : <CaretDown size={12} />}
-          </IconButton>
-          <Badge color="iris" variant="soft" size="1">
-            Pending review
-          </Badge>
-          <Text size="1" color="gray">
-            {countLabel}
-          </Text>
-        </Flex>
+        <Badge color="iris" variant="soft" size="1">
+          Pending review · {drafts.length}
+        </Badge>
         <Flex align="center" gap="2">
           <Button
-            size="1"
-            variant="ghost"
-            color="gray"
+            size="sm"
+            variant="outline"
             onClick={() => clearDrafts(taskId)}
           >
             Discard all
           </Button>
-          <Button size="1" onClick={handleSend}>
+          <Button size="sm" variant="primary" onClick={handleSend}>
             <PaperPlaneTilt size={12} weight="fill" />
             Send to agent
           </Button>
         </Flex>
       </Flex>
-      {!collapsed && (
-        <div className="max-h-48 overflow-auto border-(--gray-5) border-t">
-          {drafts.map((d) => (
-            <Flex
-              key={d.id}
-              align="start"
-              justify="between"
-              gap="2"
-              className="border-(--gray-4) border-b px-3 py-1.5 last:border-b-0"
-            >
-              <button
-                type="button"
-                onClick={() => requestScrollToFile(taskId, d.filePath)}
-                className="min-w-0 flex-1 cursor-pointer border-0 bg-transparent p-0 text-left"
-              >
-                <Flex align="center" gap="2" className="mb-0.5">
-                  <Text
-                    size="1"
-                    weight="medium"
-                    className="truncate text-(--gray-12)"
-                    title={d.filePath}
-                  >
-                    {d.filePath}
-                  </Text>
-                  <Text
-                    size="1"
-                    color="gray"
-                    className="shrink-0 font-mono text-[11px]"
-                  >
-                    {formatLineRef(d)}
-                  </Text>
-                </Flex>
-                <Text
-                  as="div"
-                  size="1"
-                  color="gray"
-                  className="line-clamp-2 whitespace-pre-wrap"
-                >
-                  {d.text}
-                </Text>
-              </button>
-              <IconButton
-                size="1"
-                variant="ghost"
-                color="gray"
-                onClick={() => removeDraft(taskId, d.id)}
-                aria-label="Delete draft comment"
-              >
-                <Trash size={12} />
-              </IconButton>
-            </Flex>
-          ))}
-        </div>
-      )}
     </div>
   );
 }

apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx

@@ -24,6 +24,13 @@ vi.mock("@pierre/diffs/worker/worker.js?worker&url", () => ({ default: "" }));
 vi.mock("@components/ui/FileIcon", () => ({
   FileIcon: () => <span data-testid="file-icon" />,
 }));
+vi.mock("@renderer/trpc/client", () => ({
+  trpcClient: {},
+  useTRPC: vi.fn(),
+}));
+vi.mock("@features/sessions/service/service", () => ({
+  getSessionService: vi.fn(),
+}));
 
 import { DeferredDiffPlaceholder, DiffFileHeader } from "./ReviewShell";
 

apps/code/src/renderer/features/code-review/utils/reviewPrompts.ts

@@ -53,15 +53,15 @@ export function buildBatchedInlineCommentsPrompt(
     );
   }
   const items = drafts
-    .map((d, idx) => {
+    .map((d) => {
       const lineRef = formatLineRef(d.startLine, d.endLine);
       const sideLabel = formatSideLabel(d.side);
       const escapedPath = escapeXmlAttr(d.filePath);
       const indented = d.text
         .split("\n")
-        .map((line) => `   ${line}`)
+        .map((line) => `  ${line}`)
         .join("\n");
-      return `${idx + 1}. In file <file path="${escapedPath}" />, ${lineRef} (${sideLabel}):\n${indented}`;
+      return `- In file <file path="${escapedPath}" />, ${lineRef} (${sideLabel}):\n${indented}`;
     })
     .join("\n\n");
   return `Please address these review comments:\n\n${items}`;