Fix: Improve webview rendering robustness and error handling

This change addresses potential grey/blank screen or crashing issues in the webview by:

1.  **Adding an ErrorBoundary:** I introduced an `ErrorBoundary` component at the root of `webview-ui/src/App.tsx`. This component catches JavaScript rendering errors in its children, displaying a user-friendly fallback UI instead of a blank or broken screen. It also logs the error to the console for easier debugging.

2.  **Implementing Loading/Timeout Logic:** I modified `webview-ui/src/App.tsx` to:
    *   Display a "Loading..." message while the initial extension state (`didHydrateState`) is being processed.
    *   Implement a 10-second timeout. If state hydration doesn't complete within this period, an error message is shown, guiding you to try reloading or checking for updates. This provides better feedback than a persistent blank screen.

3.  **Adding Unit Tests:**
    *   I created tests for the `ErrorBoundary` to ensure it correctly catches errors and renders the fallback UI or child components as expected.
    *   I created tests for the `App.tsx` loading and timeout logic to verify that loading indicators and error messages are displayed appropriately under different hydration scenarios.

These changes aim to make the webview more resilient to rendering errors and provide better feedback to you during initialization, improving the overall user experience and aiding in diagnosing future issues.

Author: google-labs-jules[bot]

webview-ui/src/App.tsx

@@ -8,6 +8,7 @@ import TranslationProvider from "./i18n/TranslationContext"
 import { vscode } from "./utils/vscode"
 import { telemetryClient } from "./utils/TelemetryClient"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
+import ErrorBoundary from "./components/common/ErrorBoundary"
 import ChatView, { ChatViewRef } from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
 import SettingsView, { SettingsViewRef } from "./components/settings/SettingsView"
@@ -30,6 +31,8 @@ const App = () => {
 	const { didHydrateState, showWelcome, shouldShowAnnouncement, telemetrySetting, telemetryKey, machineId } =
 		useExtensionState()
 
+	const [isLoading, setIsLoading] = useState(true);
+	const [loadingError, setLoadingError] = useState<string | null>(null);
 	const [showAnnouncement, setShowAnnouncement] = useState(false)
 	const [tab, setTab] = useState<Tab>("chat")
 
@@ -102,16 +105,46 @@ const App = () => {
 	// Tell the extension that we are ready to receive messages.
 	useEffect(() => vscode.postMessage({ type: "webviewDidLaunch" }), [])
 
-	if (!didHydrateState) {
-		return null
+	useEffect(() => {
+		if (didHydrateState) {
+			setIsLoading(false);
+			return;
+		}
+
+		const timer = setTimeout(() => {
+			if (!didHydrateState) {
+				setLoadingError(
+					"The extension is taking longer than expected to load. Please try reloading the VS Code window. If the issue persists, ensure your extension and VS Code are up to date."
+				);
+			}
+		}, 10000); // 10 seconds timeout
+
+		return () => clearTimeout(timer);
+	}, [didHydrateState]);
+
+	if (loadingError) {
+		return (
+			<div style={{ padding: '20px', textAlign: 'center' }}>
+				<h1>Error</h1>
+				<p>{loadingError}</p>
+			</div>
+		);
+	}
+
+	if (isLoading) {
+		return (
+			<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+				<p>Loading...</p>
+			</div>
+		);
 	}
 
 	// Do not conditionally load ChatView, it's expensive and there's state we
 	// don't want to lose (user input, disableInput, askResponse promise, etc.)
 	return showWelcome ? (
 		<WelcomeView />
 	) : (
-		<>
+		<ErrorBoundary>
 			{tab === "prompts" && <PromptsView onDone={() => switchTab("chat")} />}
 			{tab === "mcp" && <McpView onDone={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
@@ -132,7 +165,7 @@ const App = () => {
 				onSubmit={(requestId, text) => vscode.postMessage({ type: "humanRelayResponse", requestId, text })}
 				onCancel={(requestId) => vscode.postMessage({ type: "humanRelayCancel", requestId })}
 			/>
-		</>
+		</ErrorBoundary>
 	)
 }