show exact prompt/completion logs

4 files changed, 23 insertions, 1 deletions

diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 93b90f0d..bc8665fd 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
 import {
   appear,
@@ -13,12 +13,14 @@ import {
   ChevronRight,
   ArrowPath,
   XMark,
+  MagnifyingGlass,
 } from "@styled-icons/heroicons-outline";
 import { StopCircle } from "@styled-icons/heroicons-solid";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util";
+import { GUIClientContext } from "../App";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -32,6 +34,7 @@ interface StepContainerProps {
   onToggle: () => void;
   isFirst: boolean;
   isLast: boolean;
+  index: number;
 }
 
 // #region styled components
@@ -140,6 +143,7 @@ function StepContainer(props: StepContainerProps) {
   const naturalLanguageInputRef = useRef<HTMLTextAreaElement>(null);
   const userInputRef = useRef<HTMLInputElement>(null);
   const isUserInput = props.historyNode.step.name === "UserInputStep";
+  const client = useContext(GUIClientContext);
 
   useEffect(() => {
     if (userInputRef?.current) {
@@ -210,6 +214,17 @@ function StepContainer(props: StepContainerProps) {
             </HeaderButton> */}
 
             <>
+              {(props.historyNode.logs as any)?.length > 0 && (
+                <HeaderButtonWithText
+                  text="Logs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    client?.showLogsAtIndex(props.index);
+                  }}
+                >
+                  <MagnifyingGlass size="1.4em" />
+                </HeaderButtonWithText>
+              )}
               <HeaderButtonWithText
                 onClick={(e) => {
                   e.stopPropagation();
diff --git a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
index a179c2bf..6c0df8fc 100644
--- a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
+++ b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts
@@ -28,6 +28,8 @@ abstract class AbstractContinueGUIClientProtocol {
   abstract setPinnedAtIndices(indices: number[]): void;
 
   abstract toggleAddingHighlightedCode(): void;
+
+  abstract showLogsAtIndex(index: number): void;
 }
 
 export default AbstractContinueGUIClientProtocol;
diff --git a/extension/react-app/src/hooks/useContinueGUIProtocol.ts b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
index 2060dd7f..fef5b2e1 100644
--- a/extension/react-app/src/hooks/useContinueGUIProtocol.ts
+++ b/extension/react-app/src/hooks/useContinueGUIProtocol.ts
@@ -86,6 +86,10 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol {
   toggleAddingHighlightedCode(): void {
     this.messenger.send("toggle_adding_highlighted_code", {});
   }
+
+  showLogsAtIndex(index: number): void {
+    this.messenger.send("show_logs_at_index", { index });
+  }
 }
 
 export default ContinueGUIClientProtocol;
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index c35cf21b..fccc9b4b 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -311,6 +311,7 @@ function GUI(props: GUIProps) {
             )
           ) : (
             <StepContainer
+              index={index}
               isLast={index === history.timeline.length - 1}
               isFirst={index === 0}
               open={stepsOpen[index]}