Overhaul CodeBlock rendering (#3019)

Author: cte

.changeset/five-pumpkins-carry.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Overhaul CodeBlock rendering

src/core/webview/ClineProvider.ts

@@ -748,7 +748,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}' https://us-assets.i.posthog.com; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src ${webview.cspSource} 'wasm-unsafe-eval' 'nonce-${nonce}' https://us-assets.i.posthog.com 'strict-dynamic'; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">

src/core/webview/__tests__/ClineProvider.test.ts

@@ -375,7 +375,14 @@ describe("ClineProvider", () => {
 		expect(mockWebviewView.webview.html).toContain(
 			"connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;",
 		)
-		expect(mockWebviewView.webview.html).toContain("script-src 'nonce-")
+
+		// Extract the script-src directive section and verify required security elements
+		const html = mockWebviewView.webview.html
+		const scriptSrcMatch = html.match(/script-src[^;]*;/)
+		expect(scriptSrcMatch).not.toBeNull()
+		expect(scriptSrcMatch![0]).toContain("'nonce-")
+		// Verify wasm-unsafe-eval is present for Shiki syntax highlighting
+		expect(scriptSrcMatch![0]).toContain("'wasm-unsafe-eval'")
 	})
 
 	test("postMessageToWebview sends message to webview", async () => {

webview-ui/package.json

@@ -57,6 +57,7 @@
 		"remark-gfm": "^4.0.1",
 		"remove-markdown": "^0.6.0",
 		"shell-quote": "^1.8.2",
+		"shiki": "^3.2.1",
 		"styled-components": "^6.1.13",
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss": "^4.0.0",
@@ -91,7 +92,6 @@
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-simple-dot-reporter": "^1.0.5",
-		"shiki": "^2.3.2",
 		"storybook": "^8.5.6",
 		"storybook-dark-mode": "^4.0.2",
 		"ts-jest": "^29.2.5",

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

@@ -357,9 +357,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						<span style={{ fontSize: "0.8em" }}>{t("chat:browser.consoleLogs")}</span>
 					</div>
 					{consoleLogsExpanded && (
-						<CodeBlock
-							source={`${"```"}shell\n${displayState.consoleLogs || t("chat:browser.noNewLogs")}\n${"```"}`}
-						/>
+						<CodeBlock source={displayState.consoleLogs || t("chat:browser.noNewLogs")} language="shell" />
 					)}
 				</div>
 			</div>
@@ -488,7 +486,7 @@ const BrowserSessionRowContent = ({
 									overflow: "hidden",
 									backgroundColor: CODE_BLOCK_BG_COLOR,
 								}}>
-								<CodeBlock source={`${"```"}shell\n${message.text}\n${"```"}`} forceWrap={true} />
+								<CodeBlock source={message.text} language="shell" />
 							</div>
 						</>
 					)

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

@@ -511,7 +511,7 @@ export const ChatRowContent = ({
 						<CodeAccordian
 							code={tool.content!}
 							path={tool.path! + (tool.filePattern ? `/(${tool.filePattern})` : "")}
-							language="plaintext"
+							language="log"
 							isExpanded={isExpanded}
 							onToggleExpand={onToggleExpand}
 						/>
@@ -731,10 +731,7 @@ export const ChatRowContent = ({
 											backgroundColor: "var(--vscode-editor-background)",
 											borderTop: "none",
 										}}>
-										<CodeBlock
-											source={`${"```"}plaintext\n${message.text || ""}\n${"```"}`}
-											forceWrap={true}
-										/>
+										<CodeBlock source={`${"```"}plaintext\n${message.text || ""}\n${"```"}`} />
 									</div>
 								)}
 							</div>
@@ -1111,7 +1108,6 @@ export const ChatRowContent = ({
 													language="json"
 													isExpanded={true}
 													onToggleExpand={onToggleExpand}
-													forceWrap={true}
 												/>
 											</div>
 										)}

webview-ui/src/components/common/CodeAccordian.tsx

@@ -15,7 +15,6 @@ interface CodeAccordianProps {
 	onToggleExpand: () => void
 	isLoading?: boolean
 	progressStatus?: ToolProgressStatus
-	forceWrap?: boolean
 }
 
 /*
@@ -40,7 +39,6 @@ const CodeAccordian = ({
 	onToggleExpand,
 	isLoading,
 	progressStatus,
-	forceWrap,
 }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
 		() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
@@ -126,12 +124,8 @@ const CodeAccordian = ({
 						maxWidth: "100%",
 					}}>
 					<CodeBlock
-						source={`${"```"}${diff !== undefined ? "diff" : inferredLanguage}\n${(
-							code ??
-							diff ??
-							""
-						).trim()}\n${"```"}`}
-						forceWrap={forceWrap}
+						source={(code ?? diff ?? "").trim()}
+						language={diff !== undefined ? "diff" : inferredLanguage}
 					/>
 				</div>
 			)}