fix(browser): make page.keyboard.press type-safe via KeyInput; UI: show action icon/text and remove unused vars to satisfy lint

Author: hannesrudolph

src/services/browser/BrowserSession.ts

@@ -2,6 +2,7 @@ import * as vscode from "vscode"
 import * as fs from "fs/promises"
 import * as path from "path"
 import { Browser, Page, ScreenshotOptions, TimeoutError, launch, connect } from "puppeteer-core"
+import type { KeyInput } from "puppeteer-core"
 // @ts-ignore
 import PCR from "puppeteer-chromium-resolver"
 import pWaitFor from "p-wait-for"
@@ -570,7 +571,7 @@ export class BrowserSession {
 	async press(key: string): Promise<BrowserActionResult> {
 		return this.doAction(async (page) => {
 			// Allow common aliases
-			const mapping: Record<string, string> = {
+			const mapping: Partial<Record<string, KeyInput>> = {
 				esc: "Escape",
 				return: "Enter",
 				escape: "Escape",
@@ -583,7 +584,7 @@ export class BrowserSession {
 				arrowright: "ArrowRight",
 			}
 			const normalized = key.trim()
-			const mapped = mapping[normalized.toLowerCase()] ?? key
+			const mapped = (mapping[normalized.toLowerCase()] ?? (normalized as KeyInput)) as KeyInput
 			await page.keyboard.press(mapped)
 		})
 	}

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

@@ -38,11 +38,10 @@ interface BrowserSessionRowProps {
 }
 
 const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
-	const { messages, isLast, onHeightChange, lastModifiedMessage, isStreaming } = props
+	const { messages, isLast, onHeightChange, lastModifiedMessage } = props
 	const { t } = useTranslation()
 	const prevHeightRef = useRef(0)
-	const [maxActionHeight, setMaxActionHeight] = useState(0)
-	const [consoleLogsExpanded, setConsoleLogsExpanded] = useState(false)
+	const [, setMaxActionHeight] = useState(0)
 	// Collapse the pre-action details (reasoning, api request, text) by default
 	const [nextActionsExpanded, setNextActionsExpanded] = useState(false)
 
@@ -202,7 +201,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 			}
 
 	// Separate "pre-action details" from the final browser_action so we can collapse details by default
-	const nextActions = currentPage?.nextAction?.messages || []
+	const nextActions = useMemo(() => currentPage?.nextAction?.messages ?? [], [currentPage])
 	const lastIsBrowserAction = nextActions.length > 0 && nextActions[nextActions.length - 1].say === "browser_action"
 	const preActionMessages = lastIsBrowserAction ? nextActions.slice(0, -1) : nextActions
 	const lastActionMessage = lastIsBrowserAction ? nextActions[nextActions.length - 1] : undefined
@@ -512,6 +511,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 					)}
 				</div>
 
+				{actionContent}
 				{/* Combined Details Accordion (Console Logs + Action Details) */}
 				<div
 					onClick={() => {
@@ -778,6 +778,7 @@ const BrowserActionBox = ({
 						justifyContent: "space-between",
 						flexWrap: "wrap",
 						padding: "9px 10px",
+						opacity: isActive ? 1 : 0.9,
 					}}>
 					<div
 						style={{
@@ -788,7 +789,10 @@ const BrowserActionBox = ({
 							minHeight: 20,
 						}}>
 						<span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
-							<MousePointerIcon className="w-4 h-4 opacity-80" />
+							{getActionIcon(action)}
+						</span>
+						<span style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
+							{customText ?? getBrowserActionText(action, coordinate, text)}
 						</span>
 					</div>
 					<div style={{ display: "flex", alignItems: "center", gap: 8 }}>