feat: :sparkles: alt+cmd+d to automatically debug terminal!

4 files changed, 57 insertions, 28 deletions

diff --git a/extension/package.json b/extension/package.json
index 0bd09604..388d9b97 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -85,6 +85,11 @@
         "command": "continue.focusContinueInputWithEdit",
         "category": "Continue",
         "title": "Focus Continue Input With Edit"
+      },
+      {
+        "command": "continue.debugTerminal",
+        "category": "Continue",
+        "title": "Debug Terminal"
       }
     ],
     "keybindings": [
@@ -117,6 +122,11 @@
         "command": "continue.toggleAuxiliaryBar",
         "mac": "alt+cmd+m",
         "key": "alt+ctrl+m"
+      },
+      {
+        "command": "continue.debugTerminal",
+        "mac": "alt+cmd+d",
+        "key": "alt+ctrl+d"
       }
     ],
     "menus": {
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 9784a615..fe85c431 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
@@ -8,11 +7,9 @@ import {
   vscForeground,
 } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import { XMarkIcon, PencilIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
-import StyledMarkdownPreview from "./StyledMarkdownPreview";
 import { GUIClientContext } from "../App";
-import { text } from "stream/consumers";
 
 interface UserInputContainerProps {
   onDelete: () => void;
@@ -80,13 +77,19 @@ const UserInputContainer = (props: UserInputContainerProps) => {
   const client = useContext(GUIClientContext);
 
   useEffect(() => {
-    if (isEditing) {
-      textAreaRef.current?.focus();
+    if (isEditing && textAreaRef.current) {
+      textAreaRef.current.focus();
       // Select all text
-      textAreaRef.current?.setSelectionRange(
+      textAreaRef.current.setSelectionRange(
         0,
         textAreaRef.current.value.length
       );
+      // Change the size to match the contents (up to a max)
+      textAreaRef.current.style.height = "auto";
+      textAreaRef.current.style.height =
+        (textAreaRef.current.scrollHeight > 500
+          ? 500
+          : textAreaRef.current.scrollHeight) + "px";
     }
   }, [isEditing]);
 
@@ -130,6 +133,9 @@ const UserInputContainer = (props: UserInputContainerProps) => {
             }
           }}
           defaultValue={props.children}
+          onBlur={() => {
+            setIsEditing(false);
+          }}
         />
       ) : (
         <StyledPre
@@ -155,27 +161,15 @@ const UserInputContainer = (props: UserInputContainerProps) => {
                 <CheckIcon width="1.4em" height="1.4em" />
               </HeaderButtonWithText>
             ) : (
-              <>
-                <HeaderButtonWithText
-                  onClick={(e) => {
-                    setIsEditing((prev) => !prev);
-                    e.stopPropagation();
-                  }}
-                  text="Edit"
-                >
-                  <PencilIcon width="1.4em" height="1.4em" />
-                </HeaderButtonWithText>
-
-                <HeaderButtonWithText
-                  onClick={(e) => {
-                    props.onDelete();
-                    e.stopPropagation();
-                  }}
-                  text="Delete"
-                >
-                  <XMarkIcon width="1.4em" height="1.4em" />
-                </HeaderButtonWithText>
-              </>
+              <HeaderButtonWithText
+                onClick={(e) => {
+                  props.onDelete();
+                  e.stopPropagation();
+                }}
+                text="Delete"
+              >
+                <XMarkIcon width="1.4em" height="1.4em" />
+              </HeaderButtonWithText>
             )}
           </div>
         )}
diff --git a/extension/src/commands.ts b/extension/src/commands.ts
index ea12699e..4761826e 100644
--- a/extension/src/commands.ts
+++ b/extension/src/commands.ts
@@ -63,6 +63,9 @@ const commandsMap: { [command: string]: (...args: any) => any } = {
     const uri = vscode.Uri.file(logFile);
     await vscode.window.showTextDocument(uri);
   },
+  "continue.debugTerminal": async () => {
+    await ideProtocolClient.debugTerminal();
+  },
 };
 
 export function registerAllCommands(context: vscode.ExtensionContext) {
diff --git a/extension/src/continueIdeClient.ts b/extension/src/continueIdeClient.ts
index 5b9e285d..6c107a63 100644
--- a/extension/src/continueIdeClient.ts
+++ b/extension/src/continueIdeClient.ts
@@ -227,6 +227,11 @@ class IdeProtocolClient {
           contents: this.readFile(data.filepath),
         });
         break;
+      case "getTerminalContents":
+        messenger.send("getTerminalContents", {
+          contents: await this.getTerminalContents(),
+        });
+        break;
       case "editFile":
         const fileEdit = await this.editFile(data.edit);
         messenger.send("editFile", {
@@ -491,6 +496,18 @@ class IdeProtocolClient {
     return contents;
   }
 
+  async getTerminalContents(): Promise<string> {
+    await vscode.commands.executeCommand("workbench.action.terminal.selectAll");
+    await vscode.commands.executeCommand(
+      "workbench.action.terminal.copySelection"
+    );
+    await vscode.commands.executeCommand(
+      "workbench.action.terminal.clearSelection"
+    );
+    let terminalContents = await vscode.env.clipboard.readText();
+    return terminalContents;
+  }
+
   editFile(edit: FileEdit): Promise<FileEditWithFullContents> {
     return new Promise((resolve, reject) => {
       openEditorAndRevealRange(
@@ -574,6 +591,11 @@ class IdeProtocolClient {
     this.messenger?.send("mainUserInput", { input });
   }
 
+  async debugTerminal() {
+    const contents = await this.getTerminalContents();
+    this.messenger?.send("debugTerminal", { contents });
+  }
+
   deleteAtIndex(index: number) {
     this.messenger?.send("deleteAtIndex", { index });
   }