fix(webview): keep code and buttons visible in contrast themes

Author: roomote

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

@@ -345,15 +345,18 @@ const CodeBlock = memo(
 
 		// Store whether we should scroll after highlighting completes
 		const shouldScrollAfterHighlightRef = useRef(false)
+		const previousSourceRef = useRef(source)
 
 		// Check if we should scroll when source changes
 		useEffect(() => {
-			// Only set the flag if we're at the bottom when source changes
-			if (preRef.current && source && !wasScrolledUpRef.current) {
+			const sourceChanged = previousSourceRef.current !== source
+			// Follow streaming updates when the user was already at the bottom, but keep initial content at the top.
+			if (sourceChanged && preRef.current && source && !wasScrolledUpRef.current) {
 				shouldScrollAfterHighlightRef.current = true
 			} else {
 				shouldScrollAfterHighlightRef.current = false
 			}
+			previousSourceRef.current = source
 		}, [source])
 
 		const updateCodeBlockButtonPosition = useCallback((forceHide = false) => {

webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx

@@ -3,6 +3,7 @@
 import { render, screen, fireEvent, act, waitFor } from "@/utils/test-utils"
 
 import CodeBlock, { getCodeBlockTheme } from "../CodeBlock"
+import { getHighlighter } from "../../../utils/highlighter"
 
 // Mock the translation context
 vi.mock("../../../i18n/TranslationContext", () => ({
@@ -136,6 +137,30 @@ describe("CodeBlock", () => {
 		expect(screen.getByText(/const x = 1/)).toBeInTheDocument()
 	})
 
+	it("starts at the top and follows later source updates when already at the bottom", async () => {
+		const highlighter = await getHighlighter("typescript")
+		let resolveHighlighter: (value: typeof highlighter) => void = () => undefined
+		vi.mocked(getHighlighter).mockImplementationOnce(() => new Promise((resolve) => (resolveHighlighter = resolve)))
+
+		const { container, rerender } = render(<CodeBlock source="const first = 1;" language="typescript" />)
+		const scroller = container.querySelector('[windowshade="true"]') as HTMLDivElement
+		Object.defineProperties(scroller, {
+			scrollHeight: { configurable: true, value: 600 },
+			clientHeight: { configurable: true, value: 100 },
+		})
+
+		await act(async () => resolveHighlighter(highlighter))
+		await waitFor(() => expect(screen.getByText(/const first = 1/)).toBeInTheDocument())
+		expect(scroller.scrollTop).toBe(0)
+
+		scroller.scrollTop = 500
+		fireEvent.scroll(scroller)
+		rerender(<CodeBlock source={"const first = 1;\nconst second = 2;"} language="typescript" />)
+
+		await waitFor(() => expect(screen.getByText(/const second = 2/)).toBeInTheDocument())
+		await waitFor(() => expect(scroller.scrollTop).toBe(600))
+	})
+
 	it("handles theme switching", async () => {
 		const code = "const x = 1;"
 		document.body.className = "light"

webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx

@@ -17,6 +17,8 @@ for (const theme of visualThemes) {
 
 		const code = component.getByTestId("code-block").locator("code")
 		await expect(code).toContainText("Hello, Zoo Code", { timeout: 20_000 })
+		const codeScroller = code.locator("xpath=../..")
+		await expect.poll(() => codeScroller.evaluate((element) => element.scrollTop)).toBe(0)
 		const codeBackground = component.getByTestId("code-block").locator("pre")
 		const syntaxTokens = code.locator("span[style]")
 		for (let index = 0; index < (await syntaxTokens.count()); index++) {

webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png

@@ -9,7 +9,8 @@ const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				primary: "bg-primary text-primary-foreground hover:bg-primary/70",
+				primary:
+					"border border-[var(--vscode-button-border,var(--vscode-contrastBorder,transparent))] bg-primary text-primary-foreground hover:bg-primary/70",
 				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
 				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",

webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png

@@ -18,12 +18,23 @@ for (const theme of visualThemes) {
 
 		const screen = component.locator(".fixed.inset-0")
 		const heading = component.getByRole("heading", { level: 2 })
+		const action = component.getByRole("button", { name: /provider/i }).first()
 		await expect(heading).toBeVisible()
 		await expectContrast(heading, { background: screen, label: `${theme.name} welcome heading` })
-		await expectContrast(component.getByRole("button", { name: /provider/i }).first(), {
-			background: component.getByRole("button", { name: /provider/i }).first(),
+		await expectContrast(action, {
+			background: action,
 			label: `${theme.name} welcome action`,
 		})
+		if (theme.name.startsWith("high-contrast")) {
+			await expect(action).toHaveCSS("border-top-width", "1px")
+			await expect(action).toHaveCSS("border-top-style", "solid")
+			await expectContrast(action, {
+				background: screen,
+				foregroundProperty: "border-color",
+				minimum: 3,
+				label: `${theme.name} welcome action boundary`,
+			})
+		}
 
 		await expect(screen).toHaveScreenshot(`welcome-screen-${theme.name}.png`)
 	})