refactor sending prompt to agent from UI

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

@@ -5,8 +5,7 @@ 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 { useReviewComment } from "../hooks/useReviewComment";
-import type { DiffOptions, OnCommentCallback } from "../types";
+import type { DiffOptions } from "../types";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
 import {
   DeferredDiffPlaceholder,
@@ -26,7 +25,6 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
   );
   const { effectiveBranch, prUrl, isRunActive, remoteFiles, isLoading } =
     useCloudChangedFiles(taskId, task, isReviewOpen);
-  const onComment = useReviewComment(taskId);
 
   const allPaths = useMemo(() => remoteFiles.map((f) => f.path), [remoteFiles]);
 
@@ -102,11 +100,11 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
           <div key={file.path} data-file-path={file.path}>
             <CloudFileDiff
               file={file}
+              taskId={taskId}
               prUrl={prUrl}
               options={diffOptions}
               collapsed={isCollapsed}
               onToggle={() => toggleFile(file.path)}
-              onComment={onComment}
             />
           </div>
         );
@@ -117,18 +115,18 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
 
 function CloudFileDiff({
   file,
+  taskId,
   prUrl,
   options,
   collapsed,
   onToggle,
-  onComment,
 }: {
   file: ChangedFile;
+  taskId: string;
   prUrl: string | null;
   options: DiffOptions;
   collapsed: boolean;
   onToggle: () => void;
-  onComment: OnCommentCallback;
 }) {
   const fileDiff = useMemo((): FileDiffMetadata | undefined => {
     if (!file.patch) return undefined;
@@ -158,7 +156,7 @@ function CloudFileDiff({
     <InteractiveFileDiff
       fileDiff={fileDiff}
       options={{ ...options, collapsed }}
-      onComment={onComment}
+      taskId={taskId}
       renderCustomHeader={(fd) => (
         <DiffFileHeader
           fileDiff={fd}

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

@@ -1,13 +1,26 @@
+import { sendPromptToAgent } from "@features/sessions/utils/sendPromptToAgent";
+import { PaperPlaneTilt, X } from "@phosphor-icons/react";
+import type { AnnotationSide } from "@pierre/diffs";
+import { Button, IconButton } from "@radix-ui/themes";
 import { useCallback, useRef } from "react";
+import { buildInlineCommentPrompt } from "../utils/reviewPrompts";
 
 interface CommentAnnotationProps {
-  onSubmit: (text: string) => void;
-  onCancel: () => void;
+  taskId: string;
+  filePath: string;
+  startLine: number;
+  endLine: number;
+  side: AnnotationSide;
+  onDismiss: () => void;
 }
 
 export function CommentAnnotation({
-  onSubmit,
-  onCancel,
+  taskId,
+  filePath,
+  startLine,
+  endLine,
+  side,
+  onDismiss,
 }: CommentAnnotationProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -23,9 +36,13 @@ export function CommentAnnotation({
   const handleSubmit = useCallback(() => {
     const text = textareaRef.current?.value?.trim();
     if (text) {
-      onSubmit(text);
+      onDismiss();
+      sendPromptToAgent(
+        taskId,
+        buildInlineCommentPrompt(filePath, startLine, endLine, side, text),
+      );
     }
-  }, [onSubmit]);
+  }, [taskId, filePath, startLine, endLine, side, onDismiss]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -35,39 +52,34 @@ export function CommentAnnotation({
       }
       if (e.key === "Escape") {
         e.preventDefault();
-        onCancel();
+        onDismiss();
       }
     },
-    [handleSubmit, onCancel],
+    [handleSubmit, onDismiss],
   );
 
   return (
-    <div
-      data-comment-annotation=""
-      className="whitespace-normal rounded-md border border-[var(--gray-5)] bg-[var(--gray-2)] px-2 py-2.5"
-    >
-      <textarea
-        ref={setTextareaRef}
-        placeholder="Describe the changes you'd like..."
-        onKeyDown={handleKeyDown}
-        className="w-full resize-none rounded border border-[var(--gray-6)] bg-[var(--color-background)] p-1.5 font-inherit text-[13px] text-[var(--gray-12)] leading-normal outline-none"
-        style={{ minHeight: 48 }}
-      />
-      <div className="mt-1.5 flex items-center gap-1.5">
-        <button
-          type="button"
-          onClick={handleSubmit}
-          className="cursor-pointer rounded border-none bg-[var(--accent-9)] px-2.5 py-0.5 font-medium text-[var(--gray-1)] text-xs leading-[18px]"
-        >
-          Send to agent
-        </button>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="cursor-pointer border-none bg-transparent px-2 py-0.5 text-[var(--gray-9)] text-xs leading-[18px]"
-        >
-          Cancel
-        </button>
+    <div className="px-3 py-1.5">
+      <div
+        data-comment-annotation=""
+        className="whitespace-normal rounded-md border border-[var(--gray-5)] bg-[var(--gray-2)] px-2.5 py-2 font-sans"
+      >
+        <textarea
+          ref={setTextareaRef}
+          placeholder="Describe the changes you'd like..."
+          onKeyDown={handleKeyDown}
+          className="w-full resize-none rounded border border-[var(--gray-6)] bg-[var(--color-background)] p-1.5 text-[13px] text-[var(--gray-12)] leading-normal outline-none"
+          style={{ minHeight: 48 }}
+        />
+        <div className="mt-1.5 flex items-center gap-3">
+          <Button size="1" onClick={handleSubmit}>
+            <PaperPlaneTilt size={12} weight="fill" />
+            Send to agent
+          </Button>
+          <IconButton size="1" variant="ghost" color="gray" onClick={onDismiss}>
+            <X size={12} />
+          </IconButton>
+        </div>
       </div>
     </div>
   );

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

@@ -37,7 +37,7 @@ function PatchDiffView({
   repoPath,
   options,
   renderCustomHeader,
-  onComment,
+  taskId,
 }: PatchDiffProps) {
   const trpc = useTRPC();
   const queryClient = useQueryClient();
@@ -78,22 +78,6 @@ function PatchDiffView({
     [hunkAnnotations, commentAnnotation],
   );
 
-  const handleCommentSubmit = useCallback(
-    (text: string) => {
-      const meta = commentAnnotation?.metadata;
-      if (!currentFilePath || !meta || meta.kind !== "comment") return;
-      reset();
-      onComment?.(
-        currentFilePath,
-        meta.startLine,
-        meta.endLine,
-        meta.side,
-        text,
-      );
-    },
-    [currentFilePath, commentAnnotation, reset, onComment],
-  );
-
   const handleRevert = useCallback(
     async (hunkIndex: number) => {
       const filePath = filePathRef.current;
@@ -150,8 +134,16 @@ function PatchDiffView({
   const renderAnnotation = useCallback(
     (annotation: DiffLineAnnotation<AnnotationMetadata>) => {
       if (annotation.metadata.kind === "comment") {
+        const { startLine, endLine, side } = annotation.metadata;
         return (
-          <CommentAnnotation onSubmit={handleCommentSubmit} onCancel={reset} />
+          <CommentAnnotation
+            taskId={taskId ?? ""}
+            filePath={currentFilePath}
+            startLine={startLine}
+            endLine={endLine}
+            side={side}
+            onDismiss={reset}
+          />
         );
       }
 
@@ -184,7 +176,7 @@ function PatchDiffView({
         </div>
       );
     },
-    [handleRevert, handleCommentSubmit, reset, revertingHunks],
+    [handleRevert, reset, revertingHunks, taskId, currentFilePath],
   );
 
   const mergedOptions = useMemo(
@@ -214,7 +206,7 @@ function FilesDiffView({
   newFile,
   options,
   renderCustomHeader,
-  onComment,
+  taskId,
 }: FilesDiffProps) {
   const {
     selectedRange,
@@ -231,24 +223,22 @@ function FilesDiffView({
     [commentAnnotation],
   );
 
-  const handleCommentSubmit = useCallback(
-    (text: string) => {
-      const meta = commentAnnotation?.metadata;
-      if (!filePath || !meta || meta.kind !== "comment") return;
-      reset();
-      onComment?.(filePath, meta.startLine, meta.endLine, meta.side, text);
-    },
-    [filePath, commentAnnotation, reset, onComment],
-  );
-
   const renderAnnotation = useCallback(
     (annotation: DiffLineAnnotation<AnnotationMetadata>) => {
       if (annotation.metadata.kind !== "comment") return null;
+      const { startLine, endLine, side } = annotation.metadata;
       return (
-        <CommentAnnotation onSubmit={handleCommentSubmit} onCancel={reset} />
+        <CommentAnnotation
+          taskId={taskId ?? ""}
+          filePath={filePath}
+          startLine={startLine}
+          endLine={endLine}
+          side={side}
+          onDismiss={reset}
+        />
       );
     },
-    [handleCommentSubmit, reset],
+    [reset, taskId, filePath],
   );
 
   const mergedOptions = useMemo(

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

@@ -8,9 +8,8 @@ import { useTRPC } from "@renderer/trpc/client";
 import type { ChangedFile, Task } from "@shared/types";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { useReviewComment } from "../hooks/useReviewComment";
 import { useReviewDiffs } from "../hooks/useReviewDiffs";
-import type { DiffOptions, OnCommentCallback } from "../types";
+import type { DiffOptions } from "../types";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
 import {
   DeferredDiffPlaceholder,
@@ -32,8 +31,6 @@ export function ReviewPage({ task }: ReviewPageProps) {
   const isReviewOpen = useReviewNavigationStore(
     (s) => (s.reviewModes[taskId] ?? "closed") !== "closed",
   );
-  const onComment = useReviewComment(taskId);
-
   const {
     changedFiles,
     changesLoading,
@@ -79,7 +76,6 @@ export function ReviewPage({ task }: ReviewPageProps) {
     revealFile,
     getDeferredReason,
     openFile,
-    onComment,
   };
 
   return (
@@ -118,7 +114,7 @@ export function ReviewPage({ task }: ReviewPageProps) {
               options={diffOptions}
               collapsed={isCollapsed}
               onToggle={() => toggleFile(key)}
-              onComment={onComment}
+              taskId={taskId}
             />
           </div>
         );
@@ -148,7 +144,6 @@ interface FileDiffListProps {
   revealFile: (key: string) => void;
   getDeferredReason: (key: string) => DeferredReason | null;
   openFile: (taskId: string, path: string, preview: boolean) => void;
-  onComment: OnCommentCallback;
 }
 
 function FileDiffList({
@@ -162,7 +157,6 @@ function FileDiffList({
   revealFile,
   getDeferredReason,
   openFile,
-  onComment,
 }: FileDiffListProps) {
   return files.map((fileDiff) => {
     const filePath = fileDiff.name ?? fileDiff.prevName ?? "";
@@ -193,7 +187,7 @@ function FileDiffList({
           fileDiff={fileDiff}
           repoPath={repoPath}
           options={{ ...diffOptions, collapsed: isCollapsed }}
-          onComment={onComment}
+          taskId={taskId}
           renderCustomHeader={(fd) => (
             <DiffFileHeader
               fileDiff={fd}
@@ -213,17 +207,17 @@ function FileDiffList({
 function UntrackedFileDiff({
   file,
   repoPath,
+  taskId,
   options,
   collapsed,
   onToggle,
-  onComment,
 }: {
   file: ChangedFile;
   repoPath: string;
+  taskId: string;
   options: DiffOptions;
   collapsed: boolean;
   onToggle: () => void;
-  onComment: OnCommentCallback;
 }) {
   const trpc = useTRPC();
   const { data: content } = useQuery(
@@ -245,7 +239,7 @@ function UntrackedFileDiff({
       oldFile={oldFile}
       newFile={newFile}
       options={{ ...options, collapsed }}
-      onComment={onComment}
+      taskId={taskId}
       renderCustomHeader={(fd) => (
         <DiffFileHeader
           fileDiff={fd}