fix: show properly formatted multi-line commands in preview

Replace Line component with CodeBlock to display complete multi-line
commands with proper formatting and line breaks in the preview.

This fix is important because users must be able to review commands with
correct indentation and structure before execution for safety.

Fixes: #3367
Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

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

@@ -12,6 +12,7 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { cn } from "@src/lib/utils"
 import { Button } from "@src/components/ui"
+import CodeBlock from "../common/CodeBlock"
 
 interface CommandExecutionProps {
 	executionId: string
@@ -86,8 +87,8 @@ export const CommandExecution = ({ executionId, text }: CommandExecutionProps) =
 
 	return (
 		<div className="w-full bg-vscode-editor-background border border-vscode-border rounded-xs p-2">
+			<CodeBlock source={command} language="shell" />
 			<div className="flex flex-row items-center justify-between gap-2 px-1">
-				<Line className="text-sm whitespace-nowrap overflow-hidden text-ellipsis">{command}</Line>
 				<div className="flex flex-row items-center gap-1">
 					{status?.status === "started" && (
 						<div className="flex flex-row items-center gap-2 font-mono text-xs">