refactor: migrate from CRA to Vite and improve testing

Replace Create React App with Vite build system
Add ESLint configuration and improve TypeScript types
Create VSCode UI component mocks for better testing
Update test files with proper async handling
Add Tailwind CSS integration
Fix accessibility by adding ARIA roles

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

@@ -37,9 +37,9 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	const isLastApiReqInterrupted = useMemo(() => {
 		// Check if last api_req_started is cancelled
 		const lastApiReqStarted = [...messages].reverse().find((m) => m.say === "api_req_started")
-		if (lastApiReqStarted?.text != null) {
-			const info = JSON.parse(lastApiReqStarted.text)
-			if (info.cancelReason != null) {
+		if (lastApiReqStarted?.text) {
+			const info = JSON.parse(lastApiReqStarted.text) as { cancelReason: string | null }
+			if (info && info.cancelReason !== null) {
 				return true
 			}
 		}

webview-ui/src/components/chat/__tests__/AutoApproveMenu.test.tsx

@@ -2,6 +2,7 @@ import { render, fireEvent, screen } from "@testing-library/react"
 import { useExtensionState } from "../../../context/ExtensionStateContext"
 import AutoApproveMenu from "../AutoApproveMenu"
 import { defaultModeSlug, defaultPrompts } from "../../../../../src/shared/modes"
+import { experimentDefault } from "../../../../../src/shared/experiments"
 
 // Mock the ExtensionStateContext hook
 jest.mock("../../../context/ExtensionStateContext")
@@ -41,6 +42,8 @@ describe("AutoApproveMenu", () => {
 		openAiModels: [],
 		mcpServers: [],
 		filePaths: [],
+		experiments: experimentDefault,
+		customModes: [],
 
 		// Auto-approve specific properties
 		alwaysAllowReadOnly: false,
@@ -49,6 +52,7 @@ describe("AutoApproveMenu", () => {
 		alwaysAllowBrowser: false,
 		alwaysAllowMcp: false,
 		alwaysApproveResubmit: false,
+		alwaysAllowModeSwitch: false,
 		autoApprovalEnabled: false,
 
 		// Required setter functions
@@ -59,6 +63,7 @@ describe("AutoApproveMenu", () => {
 		setAlwaysAllowExecute: jest.fn(),
 		setAlwaysAllowBrowser: jest.fn(),
 		setAlwaysAllowMcp: jest.fn(),
+		setAlwaysAllowModeSwitch: jest.fn(),
 		setShowAnnouncement: jest.fn(),
 		setAllowedCommands: jest.fn(),
 		setSoundEnabled: jest.fn(),
@@ -77,9 +82,13 @@ describe("AutoApproveMenu", () => {
 		setListApiConfigMeta: jest.fn(),
 		onUpdateApiConfig: jest.fn(),
 		setMode: jest.fn(),
-		setCustomPrompts: jest.fn(),
+		setCustomModePrompts: jest.fn(),
+		setCustomSupportPrompts: jest.fn(),
 		setEnhancementApiConfigId: jest.fn(),
 		setAutoApprovalEnabled: jest.fn(),
+		setExperimentEnabled: jest.fn(),
+		handleInputChange: jest.fn(),
+		setCustomModes: jest.fn(),
 	}
 
 	beforeEach(() => {

webview-ui/src/components/chat/__tests__/ChatTextArea.test.tsx

@@ -16,7 +16,6 @@ jest.mock("../../../components/common/MarkdownBlock")
 
 // Get the mocked postMessage function
 const mockPostMessage = vscode.postMessage as jest.Mock
-/* eslint-enable import/first */
 
 // Mock ExtensionStateContext
 jest.mock("../../../context/ExtensionStateContext")

webview-ui/src/components/history/HistoryView.tsx

@@ -202,6 +202,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						<VSCodeRadioGroup
 							style={{ display: "flex", flexWrap: "wrap" }}
 							value={sortOption}
+							role="radiogroup"
 							onChange={(e) => setSortOption((e.target as HTMLInputElement).value as SortOption)}>
 							<VSCodeRadio value="newest">Newest</VSCodeRadio>
 							<VSCodeRadio value="oldest">Oldest</VSCodeRadio>

webview-ui/src/components/prompts/__tests__/PromptsView.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 import "@testing-library/jest-dom"
 import PromptsView from "../PromptsView"
 import { ExtensionStateContext } from "../../../context/ExtensionStateContext"
@@ -98,20 +98,14 @@ describe("PromptsView", () => {
 		expect(codeTab).toHaveAttribute("data-active", "false")
 	})
 
-	it("handles prompt changes correctly", () => {
+	it("handles prompt changes correctly", async () => {
 		renderPromptsView()
 
-		const textarea = screen.getByTestId("code-prompt-textarea")
-		fireEvent(
-			textarea,
-			new CustomEvent("change", {
-				detail: {
-					target: {
-						value: "New prompt value",
-					},
-				},
-			}),
-		)
+		// Get the textarea
+		const textarea = await waitFor(() => screen.getByTestId("code-prompt-textarea"))
+		fireEvent.change(textarea, {
+			target: { value: "New prompt value" },
+		})
 
 		expect(vscode.postMessage).toHaveBeenCalledWith({
 			type: "updatePrompt",
@@ -163,24 +157,18 @@ describe("PromptsView", () => {
 		expect(screen.queryByTestId("role-definition-reset")).not.toBeInTheDocument()
 	})
 
-	it("handles API configuration selection", () => {
+	it("handles API configuration selection", async () => {
 		renderPromptsView()
 
 		// Click the ENHANCE tab first to show the API config dropdown
 		const enhanceTab = screen.getByTestId("ENHANCE-tab")
 		fireEvent.click(enhanceTab)
 
-		const dropdown = screen.getByTestId("api-config-dropdown")
-		fireEvent(
-			dropdown,
-			new CustomEvent("change", {
-				detail: {
-					target: {
-						value: "config1",
-					},
-				},
-			}),
-		)
+		// Wait for the ENHANCE tab click to take effect
+		const dropdown = await waitFor(() => screen.getByTestId("api-config-dropdown"))
+		fireEvent.change(dropdown, {
+			target: { value: "config1" },
+		})
 
 		expect(mockExtensionState.setEnhancementApiConfigId).toHaveBeenCalledWith("config1")
 		expect(vscode.postMessage).toHaveBeenCalledWith({
@@ -198,13 +186,9 @@ describe("PromptsView", () => {
 		})
 
 		const textarea = screen.getByTestId("global-custom-instructions-textarea")
-		const changeEvent = new CustomEvent("change", {
-			detail: { target: { value: "" } },
+		fireEvent.change(textarea, {
+			target: { value: "" },
 		})
-		Object.defineProperty(changeEvent, "target", {
-			value: { value: "" },
-		})
-		await fireEvent(textarea, changeEvent)
 
 		expect(setCustomInstructions).toHaveBeenCalledWith(undefined)
 		expect(vscode.postMessage).toHaveBeenCalledWith({

webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx

@@ -41,7 +41,10 @@ describe("ApiConfigManager", () => {
 
 	const defaultProps = {
 		currentApiConfigName: "Default Config",
-		listApiConfigMeta: [{ name: "Default Config" }, { name: "Another Config" }],
+		listApiConfigMeta: [
+			{ id: "default", name: "Default Config" },
+			{ id: "another", name: "Another Config" },
+		],
 		onSelectConfig: mockOnSelectConfig,
 		onDeleteConfig: mockOnDeleteConfig,
 		onRenameConfig: mockOnRenameConfig,
@@ -120,7 +123,7 @@ describe("ApiConfigManager", () => {
 	})
 
 	it("disables delete button when only one config exists", () => {
-		render(<ApiConfigManager {...defaultProps} listApiConfigMeta={[{ name: "Default Config" }]} />)
+		render(<ApiConfigManager {...defaultProps} listApiConfigMeta={[{ id: "default", name: "Default Config" }]} />)
 
 		const deleteButton = screen.getByTitle("Cannot delete the only profile")
 		expect(deleteButton).toHaveAttribute("disabled")