From bf197ebb171c2f7bd3ae36133baa654367671f7e Mon Sep 17 00:00:00 2001
From: Adam Bowker <adam.b@posthog.com>
Date: Tue, 7 Apr 2026 12:16:19 -0700
Subject: [PATCH] refactor sending prompt to agent from UI

---
 .../components/CloudReviewPage.tsx            | 12 ++-
 .../components/CommentAnnotation.tsx          | 80 +++++++++++--------
 .../components/InteractiveFileDiff.tsx        | 54 +++++--------
 .../code-review/components/ReviewPage.tsx     | 18 ++---
 .../code-review/hooks/useReviewComment.ts     | 48 -----------
 .../renderer/features/code-review/types.ts    | 12 +--
 .../code-review/utils/reviewPrompts.ts        | 26 ++++++
 .../git-interaction/hooks/useFixWithAgent.ts  | 16 +---
 .../sessions/utils/sendPromptToAgent.ts       | 27 +++++++
 9 files changed, 136 insertions(+), 157 deletions(-)
 delete mode 100644 apps/code/src/renderer/features/code-review/hooks/useReviewComment.ts
 create mode 100644 apps/code/src/renderer/features/code-review/utils/reviewPrompts.ts
 create mode 100644 apps/code/src/renderer/features/sessions/utils/sendPromptToAgent.ts

diff --git a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx
index 4bbbcc6af..35236aa9d 100644
--- a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx
+++ b/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}
diff --git a/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx b/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx
index 613bc2778..ceea1d640 100644
--- a/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx
+++ b/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>
   );
diff --git a/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx b/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx
index cdd58b877..3f8195b1e 100644
--- a/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx
+++ b/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(
diff --git a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
index 1195c035b..8cb5318fb 100644
--- a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx
+++ b/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}
diff --git a/apps/code/src/renderer/features/code-review/hooks/useReviewComment.ts b/apps/code/src/renderer/features/code-review/hooks/useReviewComment.ts
deleted file mode 100644
index 4060fca0f..000000000
--- a/apps/code/src/renderer/features/code-review/hooks/useReviewComment.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { DEFAULT_TAB_IDS } from "@features/panels/constants/panelConstants";
-import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import { findTabInTree } from "@features/panels/store/panelTree";
-import { getSessionService } from "@features/sessions/service/service";
-import { useCallback } from "react";
-import { useReviewNavigationStore } from "../stores/reviewNavigationStore";
-import type { OnCommentCallback } from "../types";
-
-function escapeXmlAttr(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&apos;");
-}
-
-export function useReviewComment(taskId: string): OnCommentCallback {
-  return useCallback(
-    (filePath, startLine, endLine, side, comment) => {
-      const lineRef =
-        startLine === endLine
-          ? `line ${startLine}`
-          : `lines ${startLine}-${endLine}`;
-      const sideLabel = side === "deletions" ? "old" : "new";
-      const escapedPath = escapeXmlAttr(filePath);
-      const prompt = `In file <file path="${escapedPath}" />, ${lineRef} (${sideLabel}):\n\n${comment}`;
-
-      getSessionService().sendPrompt(taskId, prompt);
-
-      const { getReviewMode, setReviewMode } =
-        useReviewNavigationStore.getState();
-      if (getReviewMode(taskId) === "expanded") {
-        setReviewMode(taskId, "split");
-      }
-
-      const { taskLayouts, setActiveTab } = usePanelLayoutStore.getState();
-      const layout = taskLayouts[taskId];
-      if (layout) {
-        const result = findTabInTree(layout.panelTree, DEFAULT_TAB_IDS.LOGS);
-        if (result) {
-          setActiveTab(taskId, result.panelId, DEFAULT_TAB_IDS.LOGS);
-        }
-      }
-    },
-    [taskId],
-  );
-}
diff --git a/apps/code/src/renderer/features/code-review/types.ts b/apps/code/src/renderer/features/code-review/types.ts
index 521800a9a..bdb63eea1 100644
--- a/apps/code/src/renderer/features/code-review/types.ts
+++ b/apps/code/src/renderer/features/code-review/types.ts
@@ -17,21 +17,13 @@ export type AnnotationMetadata = HunkRevertMetadata | CommentMetadata;
 
 export type DiffOptions = FileDiffOptions<AnnotationMetadata>;
 
-export type OnCommentCallback = (
-  filePath: string,
-  startLine: number,
-  endLine: number,
-  side: AnnotationSide,
-  comment: string,
-) => void;
-
 export type PatchDiffProps = FileDiffProps<AnnotationMetadata> & {
   repoPath?: string;
-  onComment?: OnCommentCallback;
+  taskId?: string;
 };
 
 export type FilesDiffProps = MultiFileDiffProps<AnnotationMetadata> & {
-  onComment?: OnCommentCallback;
+  taskId?: string;
 };
 
 export type InteractiveFileDiffProps = PatchDiffProps | FilesDiffProps;
diff --git a/apps/code/src/renderer/features/code-review/utils/reviewPrompts.ts b/apps/code/src/renderer/features/code-review/utils/reviewPrompts.ts
new file mode 100644
index 000000000..ed316b81a
--- /dev/null
+++ b/apps/code/src/renderer/features/code-review/utils/reviewPrompts.ts
@@ -0,0 +1,26 @@
+import type { AnnotationSide } from "@pierre/diffs";
+
+function escapeXmlAttr(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+export function buildInlineCommentPrompt(
+  filePath: string,
+  startLine: number,
+  endLine: number,
+  side: AnnotationSide,
+  comment: string,
+): string {
+  const lineRef =
+    startLine === endLine
+      ? `line ${startLine}`
+      : `lines ${startLine}-${endLine}`;
+  const sideLabel = side === "deletions" ? "old" : "new";
+  const escapedPath = escapeXmlAttr(filePath);
+  return `In file <file path="${escapedPath}" />, ${lineRef} (${sideLabel}):\n\n${comment}`;
+}
diff --git a/apps/code/src/renderer/features/git-interaction/hooks/useFixWithAgent.ts b/apps/code/src/renderer/features/git-interaction/hooks/useFixWithAgent.ts
index ae767ddf1..a9e193921 100644
--- a/apps/code/src/renderer/features/git-interaction/hooks/useFixWithAgent.ts
+++ b/apps/code/src/renderer/features/git-interaction/hooks/useFixWithAgent.ts
@@ -1,8 +1,5 @@
-import { DEFAULT_TAB_IDS } from "@features/panels/constants/panelConstants";
-import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
-import { findTabInTree } from "@features/panels/store/panelTree";
-import { getSessionService } from "@features/sessions/service/service";
 import { useSessionForTask } from "@features/sessions/stores/sessionStore";
+import { sendPromptToAgent } from "@features/sessions/utils/sendPromptToAgent";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useCallback } from "react";
 import type { FixWithAgentPrompt } from "../utils/errorPrompts";
@@ -34,16 +31,7 @@ export function useFixWithAgent(
       const { label, context } = buildPrompt(error);
 
       const prompt = `<error_context label="${label}">${context}</error_context>\n\n\`\`\`\n${error}\n\`\`\``;
-      getSessionService().sendPrompt(taskId, prompt);
-
-      const { taskLayouts, setActiveTab } = usePanelLayoutStore.getState();
-      const layout = taskLayouts[taskId];
-      if (layout) {
-        const result = findTabInTree(layout.panelTree, DEFAULT_TAB_IDS.LOGS);
-        if (result) {
-          setActiveTab(taskId, result.panelId, DEFAULT_TAB_IDS.LOGS);
-        }
-      }
+      sendPromptToAgent(taskId, prompt);
     },
     [buildPrompt, taskId, isSessionReady],
   );
diff --git a/apps/code/src/renderer/features/sessions/utils/sendPromptToAgent.ts b/apps/code/src/renderer/features/sessions/utils/sendPromptToAgent.ts
new file mode 100644
index 000000000..b6765b0b9
--- /dev/null
+++ b/apps/code/src/renderer/features/sessions/utils/sendPromptToAgent.ts
@@ -0,0 +1,27 @@
+import { useReviewNavigationStore } from "@features/code-review/stores/reviewNavigationStore";
+import { DEFAULT_TAB_IDS } from "@features/panels/constants/panelConstants";
+import { usePanelLayoutStore } from "@features/panels/store/panelLayoutStore";
+import { findTabInTree } from "@features/panels/store/panelTree";
+import { getSessionService } from "@features/sessions/service/service";
+
+/**
+ * Sends a prompt to the agent session for a task, collapses the review
+ * panel to split mode if expanded, and switches to the logs/chat tab.
+ */
+export function sendPromptToAgent(taskId: string, prompt: string): void {
+  getSessionService().sendPrompt(taskId, prompt);
+
+  const { getReviewMode, setReviewMode } = useReviewNavigationStore.getState();
+  if (getReviewMode(taskId) === "expanded") {
+    setReviewMode(taskId, "split");
+  }
+
+  const { taskLayouts, setActiveTab } = usePanelLayoutStore.getState();
+  const layout = taskLayouts[taskId];
+  if (layout) {
+    const result = findTabInTree(layout.panelTree, DEFAULT_TAB_IDS.LOGS);
+    if (result) {
+      setActiveTab(taskId, result.panelId, DEFAULT_TAB_IDS.LOGS);
+    }
+  }
+}