Add new vscode shell integration to run commands right in terminal

webview-ui/src/components/ChatRow.tsx

@@ -1,13 +1,12 @@
 import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import deepEqual from "fast-deep-equal"
 import React, { memo, useMemo } from "react"
 import ReactMarkdown from "react-markdown"
 import { ClaudeMessage, ClaudeSayTool } from "../../../src/shared/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING } from "../../../src/shared/combineCommandSequences"
 import CodeAccordian from "./CodeAccordian"
 import CodeBlock from "./CodeBlock"
-import Terminal from "./Terminal"
 import Thumbnails from "./Thumbnails"
-import deepEqual from "fast-deep-equal"
 
 interface ChatRowProps {
 	message: ClaudeMessage
@@ -15,7 +14,6 @@ interface ChatRowProps {
 	onToggleExpand: () => void
 	lastModifiedMessage?: ClaudeMessage
 	isLast: boolean
-	handleSendStdin: (text: string) => void
 }
 
 const ChatRow = memo(
@@ -36,14 +34,7 @@ const ChatRow = memo(
 
 export default ChatRow
 
-const ChatRowContent = ({
-	message,
-	isExpanded,
-	onToggleExpand,
-	lastModifiedMessage,
-	isLast,
-	handleSendStdin,
-}: ChatRowProps) => {
+const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessage, isLast }: ChatRowProps) => {
 	const cost = useMemo(() => {
 		if (message.text != null && message.say === "api_req_started") {
 			return JSON.parse(message.text).cost
@@ -483,7 +474,29 @@ const ChatRowContent = ({
 						}
 						return {
 							command: text.slice(0, outputIndex).trim(),
-							output: text.slice(outputIndex + COMMAND_OUTPUT_STRING.length).trim() + " ",
+							output: text
+								.slice(outputIndex + COMMAND_OUTPUT_STRING.length)
+								.trim()
+								.split("")
+								.map((char) => {
+									switch (char) {
+										case "\n":
+											return "↵\n"
+										case "\r":
+											return "⏎"
+										case "\t":
+											return "→   "
+										case "\b":
+											return "⌫"
+										case "\f":
+											return "⏏"
+										case "\v":
+											return "⇳"
+										default:
+											return char
+									}
+								})
+								.join(""),
 						}
 					}
 
@@ -494,11 +507,28 @@ const ChatRowContent = ({
 								{icon}
 								{title}
 							</div>
-							<Terminal
+							{/* <Terminal
 								rawOutput={command + (output ? "\n" + output : "")}
-								handleSendStdin={handleSendStdin}
 								shouldAllowInput={!!isCommandExecuting && output.length > 0}
-							/>
+							/> */}
+							<div
+								style={{
+									borderRadius: 3,
+									border: "1px solid var(--vscode-sideBar-border)",
+									overflow: "hidden",
+								}}>
+								<CodeBlock source={`${"```"}shell\n${command}\n${"```"}`} />
+							</div>
+							{output.length > 0 && (
+								<div
+									style={{
+										borderRadius: 3,
+										border: "1px solid var(--vscode-sideBar-border)",
+										overflow: "hidden",
+									}}>
+									<CodeBlock source={`${"```"}shell\n${output}\n${"```"}`} />
+								</div>
+							)}
 						</>
 					)
 				case "completion_result":