3 files changed, 43 insertions, 8 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index f962cbc9..903f9b94 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -18,6 +18,7 @@ import {
   ChevronDown,
   ChevronRight,
   Backward,
+  ArrowPath,
 } from "@styled-icons/heroicons-outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
@@ -29,6 +30,7 @@ interface StepContainerProps {
   inFuture: boolean;
   onRefinement: (input: string) => void;
   onUserInput: (input: string) => void;
+  onRetry: () => void;
 }
 
 const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>`
@@ -135,19 +137,44 @@ function StepContainer(props: StepContainerProps) {
             >
               <Backward size="1.6em" onClick={props.onReverse}></Backward>
             </HeaderButton> */}
+
+            {props.historyNode.observation?.error ? (
+              <HeaderButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.onRetry();
+                }}
+              >
+                <ArrowPath size="1.6em" onClick={props.onRetry}></ArrowPath>
+              </HeaderButton>
+            ) : (
+              <></>
+            )}
           </HeaderDiv>
 
           {open && (
-            <pre>
-              Step Details:
-              <br />
-              {JSON.stringify(props.historyNode.step, null, 2)}
-            </pre>
+            <>
+              <pre className="overflow-scroll">
+                Step Details:
+                <br />
+                {JSON.stringify(props.historyNode.step, null, 2)}
+              </pre>
+            </>
           )}
 
-          <ReactMarkdown key={1} className="overflow-scroll">
-            {props.historyNode.step.description as any}
-          </ReactMarkdown>
+          {props.historyNode.observation?.error ? (
+            <>
+              Error while running step:
+              <br />
+              <pre className="overflow-scroll">
+                {props.historyNode.observation.error as string}
+              </pre>
+            </>
+          ) : (
+            <ReactMarkdown key={1} className="overflow-scroll">
+              {props.historyNode.step.description as any}
+            </ReactMarkdown>
+          )}
 
           {props.historyNode.step.name === "Waiting for user input" && (
             <input
diff --git a/extension/react-app/src/hooks/useContinueGUIProtocol.ts b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
index a3a1d0c9..f27895fb 100644
--- a/extension/react-app/src/hooks/useContinueGUIProtocol.ts
+++ b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
@@ -44,6 +44,10 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol {
       }
     });
   }
+
+  retryAtIndex(index: number) {
+    this.messenger.send("retry_at_index", { index });
+  }
 }
 
 export default ContinueGUIClientProtocol;
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 42ad4ed5..a08698a4 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -231,6 +231,10 @@ function GUI(props: GUIProps) {
             onReverse={() => {
               client?.reverseToIndex(index);
             }}
+            onRetry={() => {
+              client?.retryAtIndex(index);
+              setWaitingForSteps(true);
+            }}
           />
         );
       })}