feat: add experimental workspaces view (#947)

jakehwll · web-flow · commit 3def7480eea1 · 2026-05-27T14:54:27.000+10:00
&gt; 🤖 This PR was modified by Coder Agents on behalf of Jake Howell.

Scaffolds a new experimental Workspaces webview panel behind the
`coder.experimental.workspacesPanel` setting, giving us a blank canvas
to iterate on a redesigned workspaces experience. The feature is fully
gated and hidden from the Settings UI so it won't affect existing users.

- Adds a `packages/workspaces` package with a React + Vite + React Query
entrypoint and Storybook support
- Registers a new `coderExperimentalWorkspaces` activity bar view
container ("Coder Remote (New)") visible only when the flag is enabled
and the user is authenticated
- Introduces `ExperimentalWorkspacesPanelProvider` implementing
`WebviewViewProvider` with IPC dispatch scaffolding and
deployment-change refresh wiring
- Gates everything behind `coder.experimental.workspacesPanel` (boolean,
default `false`) — sets the `coder.experimental.webkitWorkspaces`
context key to control view visibility
- Adds a `coder.workspaces.refresh` command for manual panel refresh
diff --git a/package.json b/package.json
@@ -295,6 +295,11 @@
 					"id": "coderTasks",
 					"title": "Coder Tasks",
 					"icon": "media/tasks-logo.svg"
+				},
+				{
+					"id": "coderExperimentalWorkspaces",
+					"title": "Coder Remote (New)",
+					"icon": "media/shorthand-logo.svg"
 				}
 			]
 		},
@@ -328,6 +333,15 @@
 					"icon": "media/tasks-logo.svg",
 					"when": "coder.authenticated"
 				}
+			],
+			"coderExperimentalWorkspaces": [
+				{
+					"type": "webview",
+					"id": "coder.workspacesPanel",
+					"name": "Workspaces",
+					"icon": "media/shorthand-logo.svg",
+					"when": "coder.authenticated && coder.workspacesPanelEnabled"
+				}
 			]
 		},
 		"viewsWelcome": [
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -16,3 +16,6 @@ export {
 	type SpeedtestInterval,
 	type SpeedtestResult,
 } from "./speedtest/api";
+
+// Workspaces API
+export { WorkspacesApi } from "./workspaces/api";
diff --git a/packages/shared/src/workspaces/api.ts b/packages/shared/src/workspaces/api.ts
@@ -0,0 +1 @@
+export const WorkspacesApi = {} as const;
diff --git a/packages/workspaces/README.md b/packages/workspaces/README.md
@@ -0,0 +1,22 @@
+# Coder Workspaces Webview Panel
+
+This package contains the Workspaces webview panel for the Coder VS Code extension.
+
+## Enabling the Feature
+
+The workspaces panel is controlled by the `coder.experimental.workspacesPanel` configuration setting.
+
+To enable via settings.json:
+
+1. Open your VS Code settings.json (Cmd/Ctrl + Shift + P → "Preferences: Open User Settings (JSON)")
+2. Add the following:
+
+```json
+{
+	"coder.experimental.workspacesPanel": true
+}
+```
+
+3. Reload VS Code
+
+A new activity bar icon labeled **"Coder Remote (New)"** will appear when the setting is enabled.
diff --git a/packages/workspaces/package.json b/packages/workspaces/package.json
@@ -0,0 +1,33 @@
+{
+	"name": "@repo/workspaces",
+	"version": "1.0.0",
+	"description": "Coder Workspaces webview panel",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@repo/shared": "workspace:*",
+		"@repo/webview-shared": "workspace:*",
+		"@tanstack/react-query": "catalog:",
+		"@vscode-elements/react-elements": "catalog:",
+		"@vscode/codicons": "catalog:",
+		"date-fns": "catalog:",
+		"react": "catalog:",
+		"react-dom": "catalog:"
+	},
+	"devDependencies": {
+		"@repo/mocks": "workspace:*",
+		"@repo/storybook-utils": "workspace:*",
+		"@rolldown/plugin-babel": "catalog:",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
+		"babel-plugin-react-compiler": "catalog:",
+		"typescript": "catalog:",
+		"vite": "catalog:"
+	}
+}
diff --git a/packages/workspaces/src/App.tsx b/packages/workspaces/src/App.tsx
@@ -0,0 +1,3 @@
+export default function App() {
+	return <div>TODO</div>;
+}
diff --git a/packages/workspaces/src/css.d.ts b/packages/workspaces/src/css.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/packages/workspaces/src/index.css b/packages/workspaces/src/index.css
@@ -0,0 +1 @@
+/* TODO */
diff --git a/packages/workspaces/src/index.tsx b/packages/workspaces/src/index.tsx
@@ -0,0 +1,26 @@
+import { ErrorBoundary } from "@repo/webview-shared/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+const queryClient = new QueryClient();
+
+const root = document.getElementById("root");
+if (!root) {
+	throw new Error(
+		"Failed to find root element. The webview HTML must contain an element with id='root'.",
+	);
+}
+
+createRoot(root).render(
+	<StrictMode>
+		<QueryClientProvider client={queryClient}>
+			<ErrorBoundary>
+				<App />
+			</ErrorBoundary>
+		</QueryClientProvider>
+	</StrictMode>,
+);
diff --git a/packages/workspaces/storybook.preview.ts b/packages/workspaces/storybook.preview.ts
@@ -0,0 +1 @@
+import "./src/index.css";
diff --git a/packages/workspaces/tsconfig.json b/packages/workspaces/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.packages.json",
+	"compilerOptions": {
+		"paths": {
+			"@repo/shared": ["../shared/src"],
+			"@repo/webview-shared": ["../webview-shared/src"]
+		}
+	},
+	"include": ["src", "storybook.preview.ts"]
+}
diff --git a/packages/workspaces/vite.config.ts b/packages/workspaces/vite.config.ts
@@ -0,0 +1,3 @@
+import { createReactWebviewConfig } from "../webview-shared/createWebviewConfig";
+
+export default createReactWebviewConfig("workspaces", __dirname);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/contextManager.ts b/src/core/contextManager.ts
@@ -6,6 +6,7 @@ const CONTEXT_DEFAULTS = {
 	"coder.loaded": false,
 	"coder.workspace.connected": false,
 	"coder.workspace.updatable": false,
+	"coder.workspacesPanelEnabled": false,
 } as const;
 
 type CoderContext = keyof typeof CONTEXT_DEFAULTS;
diff --git a/src/extension.ts b/src/extension.ts
@@ -24,6 +24,7 @@ import { getRemoteSshExtension } from "./remote/sshExtension";
 import { registerUriHandler } from "./uri/uriHandler";
 import { initVscodeProposed } from "./vscodeProposed";
 import { TasksPanelProvider } from "./webviews/tasks/tasksPanelProvider";
+import { WorkspacesPanelProvider } from "./webviews/workspaces/workspacesPanelProvider";
 import {
 	WorkspaceProvider,
 	WorkspaceQuery,
@@ -247,6 +248,31 @@ async function doActivate(
 		),
 	);
 
+	const workspacesPanelEnabled = vscode.workspace
+		.getConfiguration("coder")
+		.get<boolean>("experimental.workspacesPanel", false);
+
+	contextManager.set("coder.workspacesPanelEnabled", workspacesPanelEnabled);
+
+	if (workspacesPanelEnabled) {
+		const workspacesPanelProvider = new WorkspacesPanelProvider(
+			ctx.extensionUri,
+			output,
+		);
+
+		ctx.subscriptions.push(
+			workspacesPanelProvider,
+			vscode.window.registerWebviewViewProvider(
+				WorkspacesPanelProvider.viewType,
+				workspacesPanelProvider,
+				{ webviewOptions: { retainContextWhenHidden: true } },
+			),
+			secretsManager.onDidChangeCurrentDeployment(() =>
+				workspacesPanelProvider.refresh(),
+			),
+		);
+	}
+
 	ctx.subscriptions.push(
 		registerUriHandler({
 			serviceContainer,
diff --git a/src/webviews/workspaces/workspacesPanelProvider.ts b/src/webviews/workspaces/workspacesPanelProvider.ts
@@ -0,0 +1,102 @@
+import * as vscode from "vscode";
+
+import {
+	buildCommandHandlers,
+	buildRequestHandlers,
+	WorkspacesApi,
+} from "@repo/shared";
+
+import {
+	dispatchCommand,
+	dispatchRequest,
+	isIpcCommand,
+	isIpcRequest,
+} from "../dispatch";
+import { getWebviewHtml } from "../html";
+
+import type { Logger } from "../../logging/logger";
+
+export class WorkspacesPanelProvider
+	implements vscode.WebviewViewProvider, vscode.Disposable
+{
+	public static readonly viewType = "coder.workspacesPanel";
+
+	private view?: vscode.WebviewView;
+	private disposables: vscode.Disposable[] = [];
+
+	private readonly requestHandlers = buildRequestHandlers(WorkspacesApi, {});
+	private readonly commandHandlers = buildCommandHandlers(WorkspacesApi, {});
+
+	constructor(
+		private readonly extensionUri: vscode.Uri,
+		private readonly logger: Logger,
+	) {}
+
+	public refresh(): void {
+		this.logger.debug("Workspaces panel refresh requested");
+	}
+
+	resolveWebviewView(
+		webviewView: vscode.WebviewView,
+		_context: vscode.WebviewViewResolveContext,
+		_token: vscode.CancellationToken,
+	): void {
+		this.view = webviewView;
+
+		webviewView.webview.options = {
+			enableScripts: true,
+			localResourceRoots: [
+				vscode.Uri.joinPath(
+					this.extensionUri,
+					"dist",
+					"webviews",
+					"workspaces",
+				),
+			],
+		};
+
+		this.disposeView();
+
+		this.disposables.push(
+			webviewView.webview.onDidReceiveMessage((message: unknown) => {
+				this.handleMessage(message).catch((err: unknown) => {
+					this.logger.error("Unhandled error in message handler", err);
+				});
+			}),
+		);
+
+		webviewView.webview.html = getWebviewHtml(
+			webviewView.webview,
+			this.extensionUri,
+			"workspaces",
+			"Coder Workspaces",
+		);
+
+		webviewView.onDidDispose(() => this.disposeView());
+	}
+
+	private async handleMessage(message: unknown): Promise<void> {
+		if (isIpcRequest(message)) {
+			await dispatchRequest(message, this.requestHandlers, this.view?.webview, {
+				logger: this.logger,
+			});
+		} else if (isIpcCommand(message)) {
+			await dispatchCommand(message, this.commandHandlers, {
+				logger: this.logger,
+			});
+		} else {
+			this.logger.warn("Unexpected webview message", message);
+		}
+	}
+
+	private disposeView(): void {
+		for (const d of this.disposables) {
+			d.dispose();
+		}
+		this.disposables = [];
+	}
+
+	dispose(): void {
+		this.disposeView();
+	}
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const WorkspacesApi = {} as const;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function App() {`
	`2`	`+ return <div>TODO</div>;`
	`3`	`+}`