Add terminal output and diagnostics to relevant details

webview-ui/src/components/ChatRow.tsx

@@ -5,7 +5,7 @@ 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 CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 import Thumbnails from "./Thumbnails"
 
 interface ChatRowProps {
@@ -352,8 +352,8 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							{isExpanded && (
 								<div style={{ marginTop: "10px" }}>
 									<CodeAccordian
-										code={JSON.stringify(JSON.parse(message.text || "{}").request, null, 2)}
-										language="json"
+										code={JSON.parse(message.text || "{}").request}
+										language="markdown"
 										isExpanded={true}
 										onToggleExpand={onToggleExpand}
 									/>
@@ -516,19 +516,32 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 									borderRadius: 3,
 									border: "1px solid var(--vscode-sideBar-border)",
 									overflow: "hidden",
+									backgroundColor: CODE_BLOCK_BG_COLOR,
 								}}>
-								<CodeBlock source={`${"```"}shell\n${command}\n${"```"}`} />
+								<CodeBlock source={`${"```"}shell\n${command}\n${"```"}`} forceWrap={true} />
+								{output.length > 0 && (
+									<div style={{ width: "100%" }}>
+										<div
+											onClick={onToggleExpand}
+											style={{
+												display: "flex",
+												alignItems: "center",
+												gap: "4px",
+												width: "100%",
+												justifyContent: "flex-start",
+												cursor: "pointer",
+												padding: `2px 8px ${isExpanded ? 0 : 8}px 8px`,
+											}}>
+											<span
+												className={`codicon codicon-chevron-${
+													isExpanded ? "down" : "right"
+												}`}></span>
+											<span style={{ fontSize: "0.8em" }}>Command Output</span>
+										</div>
+										{isExpanded && <CodeBlock source={`${"```"}shell\n${output}\n${"```"}`} />}
+									</div>
+								)}
 							</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":

webview-ui/src/components/CodeBlock.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components"
 import { visit } from "unist-util-visit"
 import { useExtensionState } from "../context/ExtensionStateContext"
 
-const BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
+export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
 
 /*
 overflowX: auto + inner div with padding results in an issue where the top/left/bottom padding renders but the right padding inside does not count as overflow as the width of the element is not exceeded. Once the inner div is outside the boundaries of the parent it counts as overflow.
@@ -15,12 +15,27 @@ this fixes the issue of right padding clipped off
 minWidth: "max-content",
 */
 
-const StyledMarkdown = styled.div`
+interface CodeBlockProps {
+	source?: string
+	forceWrap?: boolean
+}
+
+const StyledMarkdown = styled.div<{ forceWrap: boolean }>`
+	${({ forceWrap }) =>
+		forceWrap &&
+		`
+    pre, code {
+      white-space: pre-wrap;
+      word-break: break-all;
+      overflow-wrap: anywhere;
+    }
+  `}
+
 	pre {
-		background-color: ${BG_COLOR};
+		background-color: ${CODE_BLOCK_BG_COLOR};
 		border-radius: 5px;
 		margin: 0;
-		min-width: max-content;
+		min-width: ${({ forceWrap }) => (forceWrap ? "auto" : "max-content")};
 		padding: 10px 10px;
 	}
 
@@ -43,7 +58,7 @@ const StyledMarkdown = styled.div`
 		}
 		word-wrap: break-word;
 		border-radius: 5px;
-		background-color: ${BG_COLOR};
+		background-color: ${CODE_BLOCK_BG_COLOR};
 		font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px));
 		font-family: var(--vscode-editor-font-family);
 	}
@@ -53,7 +68,7 @@ const StyledMarkdown = styled.div`
 		color: #f78383;
 	}
 
-	background-color: ${BG_COLOR};
+	background-color: ${CODE_BLOCK_BG_COLOR};
 	font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 	font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px));
@@ -84,7 +99,7 @@ const StyledPre = styled.pre<{ theme: any }>`
 			.join("")}
 `
 
-const CodeBlock = memo(({ source }: { source?: string }) => {
+const CodeBlock = memo(({ source, forceWrap = false }: CodeBlockProps) => {
 	const { theme } = useExtensionState()
 	const [reactContent, setMarkdownSource] = useRemark({
 		remarkPlugins: [
@@ -121,11 +136,11 @@ const CodeBlock = memo(({ source }: { source?: string }) => {
 	return (
 		<div
 			style={{
-				overflowY: "auto",
-				maxHeight: "100%",
-				backgroundColor: BG_COLOR,
+				overflowY: forceWrap ? "visible" : "auto",
+				maxHeight: forceWrap ? "none" : "100%",
+				backgroundColor: CODE_BLOCK_BG_COLOR,
 			}}>
-			<StyledMarkdown>{reactContent}</StyledMarkdown>
+			<StyledMarkdown forceWrap={forceWrap}>{reactContent}</StyledMarkdown>
 		</div>
 	)
 })

webview-ui/src/components/TaskHeader.tsx

@@ -109,7 +109,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 						justifyContent: "space-between",
 						alignItems: "center",
 					}}>
-					<span style={{ fontWeight: "bold", fontSize: "16px" }}>Task</span>
+					<span style={{ fontWeight: "bold" }}>Task</span>
 					<VSCodeButton
 						appearance="icon"
 						onClick={onClose}