Fix blank screen issues: Add comprehensive error handling

- Remove hardcoded React chunk names from import map (chunks use relative imports)
- Add error handling for React component mounting in:
  - sidebarPane.ts (main sidebar)
  - cortexideSettingsPane.ts (settings pane)
  - editCodeService.ts (Ctrl+K editor)
- Show user-friendly error messages instead of blank screens
- Prevents module loading failures from causing complete UI failure

This addresses the blank screen issue that occurred when:
1. Hardcoded chunk names didn't match dynamically generated chunks
2. React component mounting failed without error handling

Author: Tajudeen

src/vs/workbench/contrib/cortexide/browser/cortexideSettingsPane.ts

@@ -91,8 +91,16 @@ class CortexideSettingsPane extends EditorPane {
 
 		// Mount React into the scrollable content
 		this.instantiationService.invokeFunction(accessor => {
-			const disposeFn = mountVoidSettings(settingsElt, accessor)?.dispose;
-			this._register(toDisposable(() => disposeFn?.()))
+			try {
+				const result = mountVoidSettings(settingsElt, accessor);
+				if (result?.dispose) {
+					this._register(toDisposable(() => result.dispose()));
+				}
+			} catch (error) {
+				console.error('[CortexideSettingsPane] Failed to mount React settings:', error);
+				// Show error message to user instead of blank screen
+				settingsElt.innerHTML = '<div style="padding: 20px; color: var(--vscode-errorForeground);">Failed to load settings. Please check the console for details.</div>';
+			}
 
 			// setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
 			// 	this._scrollbar?.scanDomNode();

src/vs/workbench/contrib/cortexide/browser/editCodeService.ts

@@ -406,32 +406,39 @@ class EditCodeService extends Disposable implements IEditCodeService {
 			// mount react
 			let disposeFn: (() => void) | undefined = undefined
 			this._instantiationService.invokeFunction(accessor => {
-				disposeFn = mountCtrlK(domNode, accessor, {
+				try {
+					const result = mountCtrlK(domNode, accessor, {
 
-					diffareaid: ctrlKZone.diffareaid,
+						diffareaid: ctrlKZone.diffareaid,
 
-					textAreaRef: (r) => {
-						textAreaRef.current = r
-						if (!textAreaRef.current) return
+						textAreaRef: (r) => {
+							textAreaRef.current = r
+							if (!textAreaRef.current) return
 
-						if (!(ctrlKZone.diffareaid in this.mostRecentTextOfCtrlKZoneId)) { // detect first mount this way (a hack)
-							this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] = undefined
-							setTimeout(() => textAreaRef.current?.focus(), 100)
-						}
-					},
-					onChangeHeight(height) {
-						if (height === 0) return // the viewZone sets this height to the container if it's out of view, ignore it
-						viewZone.heightInPx = height
-						// re-render with this new height
-						editor.changeViewZones(accessor => {
-							if (zoneId) accessor.layoutZone(zoneId)
-						})
-					},
-					onChangeText: (text) => {
-						this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] = text;
-					},
-					initText: this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] ?? null,
-				} satisfies QuickEditPropsType)?.dispose
+							if (!(ctrlKZone.diffareaid in this.mostRecentTextOfCtrlKZoneId)) { // detect first mount this way (a hack)
+								this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] = undefined
+								setTimeout(() => textAreaRef.current?.focus(), 100)
+							}
+						},
+						onChangeHeight(height) {
+							if (height === 0) return // the viewZone sets this height to the container if it's out of view, ignore it
+							viewZone.heightInPx = height
+							// re-render with this new height
+							editor.changeViewZones(accessor => {
+								if (zoneId) accessor.layoutZone(zoneId)
+							})
+						},
+						onChangeText: (text) => {
+							this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] = text;
+						},
+						initText: this.mostRecentTextOfCtrlKZoneId[ctrlKZone.diffareaid] ?? null,
+					} satisfies QuickEditPropsType);
+					disposeFn = result?.dispose;
+				} catch (error) {
+					console.error('[EditCodeService] Failed to mount Ctrl+K React component:', error);
+					// Show error message in the editor instead of blank area
+					domNode.innerHTML = '<div style="padding: 10px; color: var(--vscode-errorForeground); font-size: 12px;">Failed to load editor. Please check the console.</div>';
+				}
 			})
 
 			// cleanup

src/vs/workbench/contrib/cortexide/browser/sidebarPane.ts

@@ -79,9 +79,17 @@ class SidebarViewPane extends ViewPane {
 
 		// gets set immediately
 		this.instantiationService.invokeFunction(accessor => {
-			// mount react
-			const disposeFn: (() => void) | undefined = mountSidebar(parent, accessor)?.dispose;
-			this._register(toDisposable(() => disposeFn?.()));
+			try {
+				// mount react
+				const result = mountSidebar(parent, accessor);
+				if (result?.dispose) {
+					this._register(toDisposable(() => result.dispose()));
+				}
+			} catch (error) {
+				console.error('[SidebarViewPane] Failed to mount React sidebar:', error);
+				// Show error message to user instead of blank screen
+				parent.innerHTML = '<div style="padding: 20px; color: var(--vscode-errorForeground);">Failed to load sidebar. Please check the console for details.</div>';
+			}
 		});
 	}