Pass id to webview on creation (RooCodeInc#3867)

celestial-vault · Elephant Lumps · web-flow · commit 97c25cb35e1c · 2025-06-01T14:06:48.000-07:00
* pass type of webview to webview

* changeset

---------

Co-authored-by: Elephant Lumps &lt;celestial_vault@Elephants-MacBook-Pro.local&gt;
diff --git a/.changeset/short-icons-type.md b/.changeset/short-icons-type.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Pass type of webview (tab or sidebar) to webview so it knows what type it is
diff --git a/src/core/webview/index.ts b/src/core/webview/index.ts
@@ -7,6 +7,7 @@ import { Controller } from "@core/controller/index"
 import { findLast } from "@shared/array"
 import { readFile } from "fs/promises"
 import path from "node:path"
+import { WebviewProviderType } from "@/shared/webview/types"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -24,6 +25,7 @@ export class WebviewProvider implements vscode.WebviewViewProvider {
 	constructor(
 		readonly context: vscode.ExtensionContext,
 		private readonly outputChannel: vscode.OutputChannel,
+		private readonly providerType: WebviewProviderType = WebviewProviderType.TAB, // Default to tab provider
 	) {
 		WebviewProvider.activeInstances.add(this)
 		this.controller = new Controller(context, outputChannel, (message) => this.view?.webview.postMessage(message))
@@ -239,6 +241,10 @@ export class WebviewProvider implements vscode.WebviewViewProvider {
 			<body>
 				<noscript>You need to enable JavaScript to run this app.</noscript>
 				<div id="root"></div>
+				 <script type="text/javascript" nonce="${nonce}">
+                    // Inject the provider type
+                    window.WEBVIEW_PROVIDER_TYPE = ${JSON.stringify(this.providerType)};
+                </script>
 				<script type="module" nonce="${nonce}" src="${scriptUri}"></script>
 			</body>
 		</html>
@@ -348,6 +354,10 @@ export class WebviewProvider implements vscode.WebviewViewProvider {
 				</head>
 				<body>
 					<div id="root"></div>
+					<script type="text/javascript" nonce="${nonce}">
+						// Inject the provider type
+						window.WEBVIEW_PROVIDER_TYPE = ${JSON.stringify(this.providerType)};
+					</script>
 					${reactRefresh}
 					<script type="module" src="${scriptUri}"></script>
 				</body>
diff --git a/src/extension.ts b/src/extension.ts
@@ -15,7 +15,7 @@ import { ErrorService } from "./services/error/ErrorService"
 import { initializeTestMode, cleanupTestMode } from "./services/test/TestMode"
 import { telemetryService } from "./services/posthog/telemetry/TelemetryService"
 import { v4 as uuidv4 } from "uuid"
-
+import { WebviewProviderType } from "./shared/webview/types"
 /*
 Built using https://github.com/microsoft/vscode-webview-ui-toolkit
 
@@ -40,7 +40,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	// Version checking for autoupdate notification
 	const currentVersion = context.extension.packageJSON.version
 	const previousVersion = context.globalState.get<string>("clineVersion")
-	const sidebarWebview = new WebviewProvider(context, outputChannel)
+	const sidebarWebview = new WebviewProvider(context, outputChannel, WebviewProviderType.SIDEBAR)
 
 	// Initialize test mode and add disposables to context
 	context.subscriptions.push(...initializeTestMode(context, sidebarWebview))
@@ -125,7 +125,7 @@ export async function activate(context: vscode.ExtensionContext) {
 		Logger.log("Opening Cline in new tab")
 		// (this example uses webviewProvider activation event which is necessary to deserialize cached webview, but since we use retainContextWhenHidden, we don't need to use that event)
 		// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts
-		const tabWebview = new WebviewProvider(context, outputChannel)
+		const tabWebview = new WebviewProvider(context, outputChannel, WebviewProviderType.TAB)
 		//const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined
 		const lastCol = Math.max(...vscode.window.visibleTextEditors.map((editor) => editor.viewColumn || 0))
 
diff --git a/src/shared/webview/types.ts b/src/shared/webview/types.ts
@@ -0,0 +1,10 @@
+export enum WebviewProviderType {
+	SIDEBAR = "sidebar",
+	TAB = "tab",
+}
+
+declare global {
+	interface Window {
+		WEBVIEW_PROVIDER_TYPE?: WebviewProviderType
+	}
+}
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
@@ -9,6 +9,7 @@ import { UiServiceClient } from "./services/grpc-client"
 import McpView from "./components/mcp/configuration/McpConfigurationView"
 import { Providers } from "./Providers"
 import { Boolean, EmptyRequest } from "@shared/proto/common"
+import { WebviewProviderType } from "@shared/webview/types"
 
 const AppContent = () => {
 	const {
@@ -46,6 +47,11 @@ const AppContent = () => {
 		}
 	}, [shouldShowAnnouncement])
 
+	useEffect(() => {
+		const providerType = window.WEBVIEW_PROVIDER_TYPE || WebviewProviderType.TAB
+		console.log("[DEBUG] webviewProviderType", providerType)
+	}, [])
+
 	if (!didHydrateState) {
 		return null
 	}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"claude-dev": minor
 +---
++
 +Pass type of webview (tab or sidebar) to webview so it knows what type it is