trying to reliably capture terminal output in vsc

2 files changed, 46 insertions, 7 deletions

diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index dab5a752..a150e370 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -22,6 +22,7 @@ import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
 import ContinueButton from "./ContinueButton";
 import InputAndButton from "./InputAndButton";
+import ToggleErrorDiv from "./ToggleErrorDiv";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -170,13 +171,10 @@ function StepContainer(props: StepContainerProps) {
           )}
 
           {props.historyNode.observation?.error ? (
-            <>
-              Error while running step:
-              <br />
-              <pre className="overflow-scroll">
-                {props.historyNode.observation.error as string}
-              </pre>
-            </>
+            <ToggleErrorDiv
+              title={"Error while running step:"}
+              error={props.historyNode.observation.error as string}
+            />
           ) : (
             <ReactMarkdown key={1} className="overflow-scroll">
               {props.historyNode.step.description as any}
diff --git a/extension/react-app/src/components/ToggleErrorDiv.tsx b/extension/react-app/src/components/ToggleErrorDiv.tsx
new file mode 100644
index 00000000..69112ef7
--- /dev/null
+++ b/extension/react-app/src/components/ToggleErrorDiv.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { defaultBorderRadius } from ".";
+
+// Should be a toggleable div with red border and light red background that displays a main message and detail inside
+
+interface ToggleErrorDivProps {
+  title: string;
+  error: string;
+}
+
+const TopDiv = styled.div`
+  border: 1px solid red;
+  background-color: #ff000020;
+  padding: 8px;
+
+  border-radius: ${defaultBorderRadius};
+  cursor: pointer;
+`;
+
+const ToggleErrorDiv = (props: ToggleErrorDivProps) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <TopDiv
+      onClick={() => {
+        setOpen(!open);
+      }}
+    >
+      <div className="flex flex-row">
+        <div className="flex-grow">
+          <p>
+            {open ? "▼" : "▶"} {props.title}
+          </p>
+        </div>
+      </div>
+      {open && <pre className="overflow-scroll">{props.error}</pre>}
+    </TopDiv>
+  );
+};
+
+export default ToggleErrorDiv;