feat: enhance settings import functionality for remote workspaces

- Added options for importing settings from either remote or local JSON files in remote workspaces.
- Implemented a file picker in the webview for selecting local JSON files.
- Introduced a new message type 'requestLocalSettingsFile' to facilitate local file selection.
- Updated the import logic to handle local file content and clean up temporary files after import.

This improves user experience by providing flexibility in settings management across different environments.

Author: jqknono

src/core/webview/webviewMessageHandler.ts

@@ -680,13 +680,67 @@ export const webviewMessageHandler = async (
 			provider.exportTaskWithId(message.text!)
 			break
 		case "importSettings": {
-			await importSettingsWithFeedback({
-				providerSettingsManager: provider.providerSettingsManager,
-				contextProxy: provider.contextProxy,
-				customModesManager: provider.customModesManager,
-				provider: provider,
-			})
+			// In remote workspaces, offer two options:
+			// 1) Pick a JSON file from the remote/workspace filesystem (VS Code Open Dialog)
+			// 2) Pick a JSON file from the local machine via the webview (browser file picker)
+			const isRemote = !!vscode.env.remoteName
+			if (!isRemote) {
+				await importSettingsWithFeedback({
+					providerSettingsManager: provider.providerSettingsManager,
+					contextProxy: provider.contextProxy,
+					customModesManager: provider.customModesManager,
+					provider: provider,
+				})
+			} else {
+				const selection = await vscode.window.showQuickPick(
+					[
+						{
+							label: "Import from remote file (JSON)",
+							description: "Pick from remote/workspace filesystem",
+							id: "remote",
+						},
+						{
+							label: "Import from local file (JSON)",
+							description: "Pick on this machine via webview",
+							id: "local",
+						},
+					],
+					{ placeHolder: "Choose import source" },
+				)
+				if (!selection) break
 
+				if (selection.id === "remote") {
+					await importSettingsWithFeedback({
+						providerSettingsManager: provider.providerSettingsManager,
+						contextProxy: provider.contextProxy,
+						customModesManager: provider.customModesManager,
+						provider: provider,
+					})
+				} else {
+					// Ask the webview to trigger a local file picker
+					await provider.postMessageToWebview({ type: "requestLocalSettingsFile" })
+				}
+			}
+			break
+		}
+		case "importSettingsFromLocal": {
+			const content = message.text || ""
+			if (!content) {
+				vscode.window.showErrorMessage("No local settings file content received")
+				break
+			}
+			const tmpPath = path.join(os.tmpdir(), `roo-code-settings-local-import-${Date.now()}.json`)
+			await fs.writeFile(tmpPath, content, "utf-8")
+			await importSettingsWithFeedback(
+				{
+					providerSettingsManager: provider.providerSettingsManager,
+					contextProxy: provider.contextProxy,
+					customModesManager: provider.customModesManager,
+					provider: provider,
+				},
+				tmpPath,
+			)
+			await fs.unlink(tmpPath)
 			break
 		}
 		case "exportSettings":

src/shared/ExtensionMessage.ts

@@ -123,6 +123,7 @@ export interface ExtensionMessage {
 		| "showEditMessageDialog"
 		| "commands"
 		| "insertTextIntoTextarea"
+		| "requestLocalSettingsFile"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
 	action?:

src/shared/WebviewMessage.ts

@@ -62,6 +62,7 @@ export interface WebviewMessage {
 		| "deleteTaskWithId"
 		| "exportTaskWithId"
 		| "importSettings"
+		| "importSettingsFromLocal"
 		| "exportSettings"
 		| "resetState"
 		| "flushRouterModels"

webview-ui/src/App.tsx

@@ -185,6 +185,27 @@ const App = () => {
 			if (message.type === "acceptInput") {
 				chatViewRef.current?.acceptInput()
 			}
+
+			// Handle extension request to pick a local settings file
+			if (message.type === "requestLocalSettingsFile") {
+				const input = document.createElement("input")
+				input.type = "file"
+				input.accept = ".json,application/json"
+				input.onchange = () => {
+					const file = input.files?.[0]
+					if (!file) return
+					const reader = new FileReader()
+					reader.onload = () => {
+						const text = typeof reader.result === "string" ? reader.result : ""
+						if (text) {
+							vscode.postMessage({ type: "importSettingsFromLocal", text })
+						}
+					}
+					reader.readAsText(file)
+				}
+				// Trigger the native file picker in the webview context
+				input.click()
+			}
 		},
 		[switchTab],
 	)