chore: pass the VS Code (and extension) version to App Inspector (#143)

peter-smith-phd · web-flow · commit 5d68876214db · 2026-04-23T08:57:26.000+02:00
diff --git a/src/app-inspector/index.html b/src/app-inspector/index.html
@@ -14,6 +14,7 @@
   </head>
   <body style="height: 100vh; margin: 0">
     <div id="root" style="height: 100%; display: flex; flex-direction: column"></div>
+    <script>window.__APP_INSPECTOR_CONTEXT__ = null;</script>
     <script type="module" src="./main.tsx"></script>
   </body>
 </html>
diff --git a/src/app-inspector/main.tsx b/src/app-inspector/main.tsx
@@ -1,3 +1,4 @@
+import type { DeploymentContainer } from "@localstack/appinspector-ui";
 import {
 	AppInspectorContextProvider,
 	pages,
@@ -14,8 +15,26 @@ import {
 	Routes,
 } from "react-router-dom";
 
+/* Passed by the VS Code extension when App Inspector is launched. */
+declare global {
+	interface Window {
+		__APP_INSPECTOR_CONTEXT__: {
+			source: "vscode";
+			ideVersion: string;
+			extensionVersion: string;
+		} | null;
+	}
+}
+
 const APPINSPECTOR_ROUTE_PREFIX = "/appinspector";
 
+const deploymentContainer: DeploymentContainer =
+	window.__APP_INSPECTOR_CONTEXT__ ?? {
+		source: "vscode",
+		ideVersion: "unknown",
+		extensionVersion: "unknown",
+	};
+
 render(
 	<StrictMode>
 		<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
@@ -29,6 +48,7 @@ render(
 			>
 				<LocalStackThemeProvider useExtensionLayout={false}>
 					<AppInspectorContextProvider
+						deploymentContainer={deploymentContainer}
 						linkComponent={(props) => (
 							<Link to={props.to}>{props.children}</Link>
 						)}
diff --git a/src/plugins/app-inspector-webview.ts b/src/plugins/app-inspector-webview.ts
@@ -11,6 +11,8 @@ import {
 	TreeItem,
 	TreeItemCollapsibleState,
 	Uri,
+	extensions,
+	version as vscodeVersion,
 } from "vscode";
 import type {
 	ProviderResult,
@@ -61,9 +63,15 @@ export default createPlugin(
 					"utf-8",
 				);
 				outputChannel.debug(`html=${html}`);
-				panel.webview.html = html.replaceAll(
-					/"(\/.*?\.(?:js|css))"/g,
-					(_, asset: string) => {
+				const extensionVersion =
+					(
+						extensions.getExtension("localstack.localstack")?.packageJSON as {
+							version?: string;
+						}
+					)?.version ?? "unknown";
+
+				panel.webview.html = html
+					.replaceAll(/"(\/.*?\.(?:js|css))"/g, (_, asset: string) => {
 						return JSON.stringify(
 							panel.webview
 								.asWebviewUri(
@@ -75,8 +83,15 @@ export default createPlugin(
 								)
 								.toString(),
 						);
-					},
-				);
+					})
+					.replace(
+						"window.__APP_INSPECTOR_CONTEXT__ = null;",
+						`window.__APP_INSPECTOR_CONTEXT__ = ${JSON.stringify({
+							source: "vscode",
+							ideVersion: vscodeVersion,
+							extensionVersion,
+						})};`,
+					);
 				outputChannel.debug(`html=${panel.webview.html}`);
 			}),
 		);
