Fix BrowserSessionRow crash on non-string inputs

.changeset/early-rice-guess.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Fix BrowserSessionRow crash on non-string inputs

src/shared/browserUtils.ts

@@ -36,6 +36,7 @@ export function scaleCoordinate(coordinate: string, viewportWidth: number, viewp
  */
 export function prettyKey(k?: string): string {
 	if (!k) return ""
+	if (typeof k !== "string") return String(k)
 	return k
 		.split("+")
 		.map((part) => {
@@ -69,7 +70,8 @@ export function prettyKey(k?: string): string {
 			if (keyMatch) return keyMatch[1].toUpperCase()
 			const digitMatch = /^Digit([0-9])$/.exec(p)
 			if (digitMatch) return digitMatch[1]
-			const spaced = p.replace(/([a-z])([A-Z])/g, "$1 $2")
+			// Guard against non-string p (though unlikely from split) to be safe
+			const spaced = typeof p === "string" ? p.replace(/([a-z])([A-Z])/g, "$1 $2") : String(p || "") // kilocode_change
 			return spaced.charAt(0).toUpperCase() + spaced.slice(1)
 		})
 		.join(" + ")

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

@@ -69,7 +69,9 @@ const getBrowserActionText = (
 				coordinate: executedCoordinate || getViewportCoordinate(coordinate),
 			})
 		case "resize":
-			return t("chat:browser.actions.resized", { size: size?.split(/[x,]/).join(" x ") })
+			return t("chat:browser.actions.resized", {
+				size: typeof size === "string" ? size.split(/[x,]/).join(" x ") : String(size || ""), // kilocode_change
+			})
 		case "screenshot":
 			return t("chat:browser.actions.screenshotSaved")
 		case "close":

webview-ui/src/components/chat/__tests__/BrowserSessionRowCrash.spec.tsx

@@ -0,0 +1,145 @@
+import { render } from "@testing-library/react"
+import BrowserSessionRow from "../BrowserSessionRow"
+import { ClineMessage } from "@roo-code/types"
+import { TooltipProvider } from "@src/components/ui/tooltip"
+
+// Mock dependencies
+vi.mock("react-i18next", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("react-i18next")>()
+	return {
+		...actual,
+		useTranslation: () => ({
+			t: (key: string, options?: any) => {
+				if (key === "chat:browser.actions.clicked" && options?.coordinate) {
+					return `Clicked ${options.coordinate}`
+				}
+				if (key === "chat:browser.actions.pressed" && options?.key) {
+					return `Pressed ${options.key}`
+				}
+				if (key === "chat:browser.actions.typed" && options?.text) {
+					return `Typed ${options.text}`
+				}
+				if (key === "chat:browser.actions.resized" && options?.size) {
+					return `Resized to ${options.size}` // Changed to expect formatted size
+				}
+
+				return key
+			},
+		}),
+		initReactI18next: {
+			type: "3rdParty",
+			init: () => {},
+		},
+	}
+})
+
+vi.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: vi.fn(),
+	},
+}))
+
+vi.mock("@src/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		browserViewportSize: "900x600",
+		isBrowserSessionActive: true,
+	}),
+}))
+
+vi.mock("../kilocode/common/CodeBlock", () => ({
+	default: ({ source }: { source: string }) => <div>{source}</div>,
+}))
+
+describe("BrowserSessionRow Crash Reproduction", () => {
+	it("should handle non-string text in press action", () => {
+		const invalidPressPayload = {
+			action: "press",
+			// @ts-expect-error - Simulating invalid type
+			text: 12345,
+		} satisfies { action: "press"; text: string }
+
+		const messages: ClineMessage[] = [
+			{
+				ts: 1234567890,
+				type: "say",
+				say: "browser_action",
+				text: JSON.stringify({
+					...invalidPressPayload,
+				}),
+			},
+			{
+				ts: 1234567891,
+				type: "say",
+				say: "browser_action_result",
+				text: JSON.stringify({
+					currentUrl: "http://example.com",
+					logs: "",
+					screenshot: "",
+					currentMousePosition: "",
+					viewportWidth: 900,
+					viewportHeight: 600,
+				}),
+			},
+		]
+
+		expect(() => {
+			render(
+				<TooltipProvider>
+					<BrowserSessionRow
+						messages={messages}
+						isExpanded={() => true}
+						onToggleExpand={() => {}}
+						isLast={true}
+						isStreaming={false}
+					/>
+				</TooltipProvider>,
+			)
+		}).not.toThrow()
+	})
+
+	it("should handle non-string size in resize action", () => {
+		const invalidResizePayload = {
+			action: "resize",
+			// @ts-expect-error - Simulating invalid type
+			size: 12345,
+		} satisfies { action: "resize"; size: string }
+
+		const messages: ClineMessage[] = [
+			{
+				ts: 1234567892,
+				type: "say",
+				say: "browser_action",
+				text: JSON.stringify({
+					...invalidResizePayload,
+				}),
+			},
+			{
+				ts: 1234567893,
+				type: "say",
+				say: "browser_action_result",
+				text: JSON.stringify({
+					currentUrl: "http://example.com",
+					logs: "",
+					screenshot: "",
+					currentMousePosition: "",
+					viewportWidth: 900,
+					viewportHeight: 600,
+				}),
+			},
+		]
+
+		expect(() => {
+			render(
+				<TooltipProvider>
+					<BrowserSessionRow
+						messages={messages}
+						isExpanded={() => true}
+						onToggleExpand={() => {}}
+						isLast={true}
+						isStreaming={false}
+					/>
+				</TooltipProvider>,
+			)
+		}).not.toThrow()
+	})
+})