Visual tweaks

webview-ui/src/components/chat/ChatRow.tsx

@@ -665,7 +665,12 @@ export const ChatRowContent = ({
 									}}>
 									Response
 								</div>
-								<CodeBlock source={`${"```"}json\n${message.text}\n${"```"}`} />
+								<CodeAccordian
+									code={message.text}
+									language="json"
+									isExpanded={true}
+									onToggleExpand={onToggleExpand}
+								/>
 							</div>
 						</>
 					)
@@ -825,8 +830,11 @@ export const ChatRowContent = ({
 													}}>
 													Arguments
 												</div>
-												<CodeBlock
-													source={`${"```"}json\n${useMcpServer.arguments}\n${"```"}`}
+												<CodeAccordian
+													code={useMcpServer.arguments}
+													language="json"
+													isExpanded={true}
+													onToggleExpand={onToggleExpand}
 												/>
 											</div>
 										)}

webview-ui/src/components/mcp/McpResourceRow.tsx

@@ -12,7 +12,7 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
 		<div
 			key={uri}
 			style={{
-				padding: "8px 0",
+				padding: "3px 0 8px 0",
 			}}>
 			<div
 				style={{

webview-ui/src/components/mcp/McpToolRow.tsx

@@ -1,5 +1,4 @@
 import { McpTool } from "../../../../src/shared/mcp"
-import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 
 type McpToolRowProps = {
 	tool: McpTool
@@ -10,7 +9,7 @@ const McpToolRow = ({ tool }: McpToolRowProps) => {
 		<div
 			key={tool.name}
 			style={{
-				padding: "8px 0",
+				padding: "3px 0 8px 0",
 			}}>
 			<div style={{ display: "flex" }}>
 				<span className="codicon codicon-symbol-method" style={{ marginRight: "6px" }}></span>
@@ -32,7 +31,7 @@ const McpToolRow = ({ tool }: McpToolRowProps) => {
 					style={{
 						marginTop: "8px",
 						fontSize: "12px",
-						background: CODE_BLOCK_BG_COLOR,
+						border: "1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 30%, transparent)",
 						borderRadius: "3px",
 						padding: "8px",
 					}}>

webview-ui/src/components/mcp/McpView.tsx

@@ -217,7 +217,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 							<VSCodePanelView id="tools-view">
 								{server.tools && server.tools.length > 0 ? (
 									<div
-										style={{ display: "flex", flexDirection: "column", gap: "3px", width: "100%" }}>
+										style={{ display: "flex", flexDirection: "column", gap: "6px", width: "100%" }}>
 										{server.tools.map((tool) => (
 											<McpToolRow key={tool.name} tool={tool} />
 										))}