Strip ansi from output

webview-ui/src/components/ChatRow.tsx

@@ -423,7 +423,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 									{title}
 								</div>
 								<Terminal
-									output={command + (output ? "\n" + output : "")}
+									rawOutput={command + (output ? "\n" + output : "")}
 									handleSendStdin={handleSendStdin}
 									shouldAllowInput={!!isCommandExecuting && output.length > 0}
 								/>

webview-ui/src/components/Terminal.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef } from "react"
+import React, { useState, useEffect, useRef, useMemo } from "react"
 import DynamicTextArea from "react-textarea-autosize"
+import stripAnsi from "strip-ansi"
 
 interface TerminalProps {
-	output: string
+	rawOutput: string
 	handleSendStdin: (text: string) => void
 	shouldAllowInput: boolean
 }
@@ -13,7 +14,7 @@ Inspired by https://phuoc.ng/collection/mirror-a-text-area/create-your-own-custo
 Note: Even though vscode exposes var(--vscode-terminalCursor-foreground) it does not render in front of a color that isn't var(--vscode-terminal-background), and it turns out a lot of themes don't even define some/any of these terminal color variables. Very odd behavior, so try changing themes/color variables if you don't see the caret.
 */
 
-const Terminal: React.FC<TerminalProps> = ({ output, handleSendStdin, shouldAllowInput }) => {
+const Terminal: React.FC<TerminalProps> = ({ rawOutput, handleSendStdin, shouldAllowInput }) => {
 	const [userInput, setUserInput] = useState("")
 	const [isFocused, setIsFocused] = useState(false) // Initially not focused
 	const textAreaRef = useRef<HTMLTextAreaElement>(null)
@@ -22,6 +23,10 @@ const Terminal: React.FC<TerminalProps> = ({ output, handleSendStdin, shouldAllo
 
 	const [lastProcessedOutput, setLastProcessedOutput] = useState("")
 
+	const output = useMemo(() => {
+		return stripAnsi(rawOutput)
+	}, [rawOutput])
+
 	useEffect(() => {
 		if (lastProcessedOutput !== output) {
 			setUserInput("")