ui(patches): apply and replace buttons

refact-agent/gui/src/app/middleware.ts

@@ -11,6 +11,8 @@ import {
   restoreChat,
   newIntegrationChat,
   chatResponse,
+  setIsWaitingForResponse,
+  upsertToolCall,
 } from "../features/Chat/Thread";
 import { statisticsApi } from "../services/refact/statistics";
 import { integrationsApi } from "../services/refact/integrations";
@@ -31,7 +33,11 @@ import { resetAttachedImagesSlice } from "../features/AttachedImages";
 import { nextTip } from "../features/TipOfTheDay";
 import { telemetryApi } from "../services/refact/telemetry";
 import { CONFIG_PATH_URL, FULL_PATH_URL } from "../services/refact/consts";
-import { resetConfirmationInteractedState } from "../features/ToolConfirmation/confirmationSlice";
+import {
+  clearPauseReasonsAndHandleToolsStatus,
+  resetConfirmationInteractedState,
+  updateConfirmationAfterIdeToolUse,
+} from "../features/ToolConfirmation/confirmationSlice";
 import {
   getAgentUsageCounter,
   getMaxFreeAgentUsage,
@@ -40,6 +46,8 @@ import {
   updateAgentUsage,
   updateMaxAgentUsageAmount,
 } from "../features/AgentUsage/agentUsageSlice";
+import { ideToolCallResponse } from "../hooks/useEventBusForIDE";
+import { upsertToolCallIntoHistory } from "../features/History/historySlice";
 
 const AUTH_ERROR_MESSAGE =
   "There is an issue with your API key. Check out your API Key or re-login";
@@ -496,3 +504,35 @@ startListening({
     }
   },
 });
+
+// Tool Call results from ide.
+startListening({
+  actionCreator: ideToolCallResponse,
+  effect: (action, listenerApi) => {
+    const state = listenerApi.getState();
+
+    const toolCallUpsertPayload = {
+      ...action.payload,
+      replaceOnly: !!action.payload.accepted,
+    };
+
+    listenerApi.dispatch(upsertToolCallIntoHistory(toolCallUpsertPayload));
+    listenerApi.dispatch(upsertToolCall(toolCallUpsertPayload));
+
+    listenerApi.dispatch(updateConfirmationAfterIdeToolUse(action.payload));
+
+    const pauseReasons = state.confirmation.pauseReasons.filter(
+      (reason) => reason.tool_call_id !== action.payload.toolCallId,
+    );
+
+    if (pauseReasons.length === 0) {
+      listenerApi.dispatch(
+        clearPauseReasonsAndHandleToolsStatus({
+          wasInteracted: true,
+          confirmationStatus: !!action.payload.accepted,
+        }),
+      );
+      listenerApi.dispatch(setIsWaitingForResponse(false));
+    }
+  },
+});

refact-agent/gui/src/components/ChatContent/ChatContent.tsx

@@ -32,6 +32,7 @@ import { popBackTo } from "../../features/Pages/pagesSlice";
 import { ChatLinks, UncommittedChangesWarning } from "../ChatLinks";
 import { telemetryApi } from "../../services/refact/telemetry";
 import { PlaceHolderText } from "./PlaceHolderText";
+import { getConfirmationPauseStatus } from "../../features/ToolConfirmation/confirmationSlice";
 
 export type ChatContentProps = {
   onRetry: (index: number, question: UserMessage["content"]) => void;
@@ -52,6 +53,7 @@ export const ChatContent: React.FC<ChatContentProps> = ({
   const [sendTelemetryEvent] =
     telemetryApi.useLazySendTelemetryChatEventQuery();
   const integrationMeta = useAppSelector(selectIntegration);
+  const isWaitingForConfirmation = useAppSelector(getConfirmationPauseStatus);
 
   const {
     handleScroll,
@@ -115,7 +117,7 @@ export const ChatContent: React.FC<ChatContentProps> = ({
         <UncommittedChangesWarning />
 
         <Container py="4">
-          <Spinner spinning={isWaiting} />
+          <Spinner spinning={isWaiting && !isWaitingForConfirmation} />
         </Container>
       </Flex>
       {showFollowButton && (

refact-agent/gui/src/components/ChatForm/ToolConfirmation.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import {
   PATCH_LIKE_FUNCTIONS,
   useAppDispatch,
@@ -88,6 +88,10 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
     confirmToolUsage();
   };
 
+  const handleReject = useCallback(() => {
+    rejectToolUsage(toolCallIds);
+  }, [rejectToolUsage, toolCallIds]);
+
   const message = getConfirmationMessage(
     commands,
     rules,
@@ -101,7 +105,7 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
     return (
       <PatchConfirmation
         handleAllowForThisChat={handleAllowForThisChat}
-        rejectToolUsage={rejectToolUsage}
+        rejectToolUsage={handleReject}
         confirmToolUsage={confirmToolUsage}
       />
     );
@@ -167,9 +171,9 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
               color="red"
               variant="surface"
               size="1"
-              onClick={rejectToolUsage}
+              onClick={handleReject}
             >
-              Deny
+              Stop
             </Button>
           )}
         </Flex>
@@ -258,7 +262,7 @@ const PatchConfirmation: React.FC<PatchConfirmationProps> = ({
             size="1"
             onClick={rejectToolUsage}
           >
-            Deny
+            Stop
           </Button>
         </Flex>
       </Flex>

refact-agent/gui/src/components/Tools/Texdoc.module.css

@@ -18,15 +18,9 @@
   margin-top: 0;
 }
 
-:global(.radix-themes) .textdoc.textdoc__update :global(.hljs.language-diff) {
+/* :global(.radix-themes) .textdoc.textdoc__update :global(.hljs.language-diff) {
   --hlbg: var(--gray-3);
   --hlcolor1: var(--gray-12);
-  /* --hlcolor2: #000000;
-  --hlcolor3: #000080;
-  --hlcolor4: #800080;
-  --hlcolor5: #808000;
-  --hlcolor6: #800000;
-  --hlcolor7: #0055af; */
   --hlcolor8: var(--green-9);
   --hlcolor9: var(--red-9);
 }
@@ -44,4 +38,4 @@
 
 .textdoc__update .textdoc__diffbox {
   box-shadow: var(--shadow-1);
-}
+} */

refact-agent/gui/src/components/Tools/Textdoc.tsx

@@ -12,17 +12,17 @@ import {
   isUpdateTextDocToolCall,
   parseRawTextDocToolCall,
 } from "./types";
-import { Box, Button, Card, Flex } from "@radix-ui/themes";
+import { Box, Card, Flex, Button } from "@radix-ui/themes";
 import { TruncateLeft } from "../Text";
 import { Link } from "../Link";
 import { useEventsBusForIDE } from "../../hooks/useEventBusForIDE";
 import { Markdown } from "../Markdown";
 import { filename } from "../../utils/filename";
 import styles from "./Texdoc.module.css";
-import { createPatch } from "diff";
-import classNames from "classnames";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
+import { Reveal } from "../Reveal";
 import { useAppSelector } from "../../hooks";
-import { selectCanPaste } from "../../features/Chat";
+import { selectCanPaste, selectChatId } from "../../features/Chat";
 import { toolsApi } from "../../services/refact";
 import { ErrorCallout } from "../Callout";
 import { isRTKResponseErrorWithDetailMessage } from "../../utils";
@@ -56,12 +56,14 @@ export const TextDocTool: React.FC<{ toolCall: RawTextDocTool }> = ({
 const TextDocHeader: React.FC<{
   toolCall: TextDocToolCall;
 }> = ({ toolCall }) => {
-  const { openFile, diffPasteBack, sendToolEditToIde } = useEventsBusForIDE();
+  const { openFile, diffPasteBack, sendToolCallToIde } = useEventsBusForIDE();
   const [requestDryRun, dryRunResult] = toolsApi.useDryRunForEditToolMutation();
   const [errorMessage, setErrorMessage] = useState<string>("");
   const canPaste = useAppSelector(selectCanPaste);
+  const chatId = useAppSelector(selectChatId);
 
   const clearErrorMessage = useCallback(() => setErrorMessage(""), []);
+
   // move this
   const handleOpenFile = useCallback(() => {
     if (!toolCall.function.arguments.path) return;
@@ -70,9 +72,9 @@ const TextDocHeader: React.FC<{
 
   const handleReplace = useCallback(
     (content: string) => {
-      diffPasteBack(content);
+      diffPasteBack(content, chatId, toolCall.id);
     },
-    [diffPasteBack],
+    [chatId, diffPasteBack, toolCall.id],
   );
 
   const replaceContent = useMemo(() => {
@@ -90,7 +92,7 @@ const TextDocHeader: React.FC<{
     })
       .then((results) => {
         if (results.data) {
-          sendToolEditToIde(toolCall.function.arguments.path, results.data);
+          sendToolCallToIde(toolCall, results.data, chatId);
         } else if (isRTKResponseErrorWithDetailMessage(results)) {
           setErrorMessage(results.error.data.detail);
         }
@@ -107,12 +109,7 @@ const TextDocHeader: React.FC<{
           setErrorMessage("Error with patch: " + JSON.stringify(error));
         }
       });
-  }, [
-    requestDryRun,
-    sendToolEditToIde,
-    toolCall.function.arguments,
-    toolCall.function.name,
-  ]);
+  }, [chatId, requestDryRun, sendToolCallToIde, toolCall]);
 
   return (
     <Card size="1" variant="surface" mt="4" className={styles.textdoc__header}>
@@ -166,11 +163,17 @@ const CreateTextDoc: React.FC<{
       "```" + extension + "\n" + toolCall.function.arguments.content + "\n```"
     );
   }, [toolCall.function.arguments.content, toolCall.function.arguments.path]);
+  const handleCopy = useCopyToClipboard();
+
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
+
   return (
     // TODO: move this box up a bit, or make it generic
     <Box className={styles.textdoc}>
       <TextDocHeader toolCall={toolCall} />
-      <Markdown>{code}</Markdown>
+      <Reveal isRevealingCode defaultOpen={lineCount < 9}>
+        <Markdown onCopyClick={handleCopy}>{code}</Markdown>
+      </Reveal>
     </Box>
   );
 };
@@ -191,11 +194,20 @@ const ReplaceTextDoc: React.FC<{
     toolCall.function.arguments.path,
     toolCall.function.arguments.replacement,
   ]);
+
+  const copyToClipBoard = useCopyToClipboard();
+  const handleCopy = useCallback(() => {
+    copyToClipBoard(toolCall.function.arguments.replacement);
+  }, [copyToClipBoard, toolCall.function.arguments.replacement]);
+
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
   return (
     // TODO: move this box up a bit, or make it generic
     <Box className={styles.textdoc}>
       <TextDocHeader toolCall={toolCall} />
-      <Markdown>{code}</Markdown>
+      <Reveal isRevealingCode defaultOpen={lineCount < 9}>
+        <Markdown onCopyClick={handleCopy}>{code}</Markdown>
+      </Reveal>
     </Box>
   );
 };
@@ -219,37 +231,48 @@ const UpdateRegexTextDoc: React.FC<{
     toolCall.function.arguments.replacement,
   ]);
 
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
+
   return (
     <Box className={styles.textdoc}>
       <TextDocHeader toolCall={toolCall} />
-      <Markdown>{code}</Markdown>
+      <Reveal isRevealingCode defaultOpen={lineCount < 9}>
+        <Markdown>{code}</Markdown>
+      </Reveal>
     </Box>
   );
 };
 
 const UpdateTextDoc: React.FC<{
   toolCall: UpdateTextDocToolCall;
 }> = ({ toolCall }) => {
-  const diff = useMemo(() => {
-    const patch = createPatch(
-      toolCall.function.arguments.path,
-      toolCall.function.arguments.old_str,
-      toolCall.function.arguments.replacement,
+  const code = useMemo(() => {
+    const extension = getFileExtension(toolCall.function.arguments.path);
+    return (
+      "```" +
+      extension +
+      "\n" +
+      toolCall.function.arguments.replacement +
+      "\n```"
     );
-
-    return "```diff\n" + patch + "\n```";
   }, [
-    toolCall.function.arguments.replacement,
-    toolCall.function.arguments.old_str,
     toolCall.function.arguments.path,
+    toolCall.function.arguments.replacement,
   ]);
-  // TODO: don't use markdown for this, it's two bright
+
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
+
+  const copyToClipBoard = useCopyToClipboard();
+  const handleCopy = useCallback(() => {
+    copyToClipBoard(toolCall.function.arguments.replacement);
+  }, [copyToClipBoard, toolCall.function.arguments.replacement]);
+
   return (
-    <Box className={classNames(styles.textdoc, styles.textdoc__update)}>
+    <Box className={styles.textdoc}>
       <TextDocHeader toolCall={toolCall} />
-      <Box className={classNames(styles.textdoc__diffbox)}>
-        <Markdown useInlineStyles={false}>{diff}</Markdown>
-      </Box>
+      <Reveal isRevealingCode defaultOpen={lineCount < 9}>
+        <Markdown onCopyClick={handleCopy}>{code}</Markdown>
+      </Reveal>
     </Box>
   );
 };

refact-agent/gui/src/contexts/AbortControllers.tsx

@@ -35,7 +35,7 @@ export const AbortControllerProvider: React.FC<{
   const abort = (key: string, reason?: string) => {
     if (key in abortControllers) {
       const fn = abortControllers[key];
-      fn(reason);
+      fn(reason ?? "aborted");
       removeController(key);
     }
   };

refact-agent/gui/src/events/index.ts

@@ -32,6 +32,7 @@ export {
   setCurrentProjectInfo,
   type CurrentProjectInfo,
 } from "../features/Chat/currentProject";
+export type { TextDocToolCall } from "../components/Tools/types";
 
 export type {
   ToolCommand,
@@ -73,7 +74,8 @@ export {
   ideEscapeKeyPressed,
   ideIsChatStreaming,
   ideIsChatReady,
-  ideToolEdit,
+  ideToolCall,
+  ideToolCallResponse,
 } from "../hooks/useEventBusForIDE";
 
 export const fim = {

refact-agent/gui/src/features/Chat/Thread/actions.ts

@@ -34,6 +34,7 @@ import { ToolCommand } from "../../../services/refact/tools";
 import { scanFoDuplicatesWith, takeFromEndWhile } from "../../../utils";
 import { debugApp } from "../../../debugConfig";
 import { ChatHistoryItem } from "../../History/historySlice";
+import { ideToolCallResponse } from "../../../hooks/useEventBusForIDE";
 
 export const newChatAction = createAction("chatThread/new");
 
@@ -144,6 +145,10 @@ export const fixBrokenToolMessages = createAction<PayloadWithId>(
   "chatThread/fixBrokenToolMessages",
 );
 
+export const upsertToolCall = createAction<
+  Parameters<typeof ideToolCallResponse>[0] & { replaceOnly?: boolean }
+>("chatThread/upsertToolCall");
+
 // TODO: This is the circular dep when imported from hooks :/
 const createAppAsyncThunk = createAsyncThunk.withTypes<{
   state: RootState;