Add React webview architecture with pnpm workspaces (#761)

Introduce a webview system for building rich UI panels using React 19, Vite, and @vscode-elements/react-elements. Webviews are organized as pnpm workspace packages under `packages/`.

## Architecture

- `packages/webview-shared`: Shared types and React hooks for VS Code API (@repo/webview-shared)
- `packages/tasks`: Example Tasks panel webview (@repo/tasks)
- `src/webviews/`: Extension-side WebviewViewProvider implementations
- `vite.config.base.ts`: Shared Vite config factory for webviews

## Key Features

- Type-safe message passing between extension and webviews
- CSP-compliant HTML generation with nonce-based script loading
- Vite with SWC for fast development builds

## Build Commands

- `pnpm build` - Build webviews + extension
- `pnpm watch:all` - Watch both extension and webviews concurrently

Closes #771

Author: EhabY

.gitignore

@@ -7,3 +7,8 @@
 *.vsix
 pnpm-debug.log
 .eslintcache
+
+# Webview packages build artifacts
+packages/*/node_modules/
+packages/*/dist/
+packages/*/*.tsbuildinfo

.vscodeignore

@@ -27,6 +27,10 @@ esbuild.mjs
 pnpm-lock.yaml
 pnpm-workspace.yaml
 
+# Webview packages (exclude everything except built output in dist/webviews)
+packages/**
+!dist/webviews/**
+
 # Nix/flake files
 flake.nix
 flake.lock

CONTRIBUTING.md

@@ -66,6 +66,47 @@ workspaces if the user has the required permissions.
 There are also notifications for an outdated workspace and for workspaces that
 are close to shutting down.
 
+## Webviews
+
+The extension uses React-based webviews for rich UI panels, built with Vite and
+organized as a pnpm workspace in `packages/`.
+
+### Project Structure
+
+```text
+packages/
+├── webview-shared/      # Shared types, React hooks, and Vite config
+│   └── extension.d.ts   # Types exposed to extension (excludes React)
+└── tasks/               # Example webview (copy this for new webviews)
+
+src/webviews/
+├── util.ts          # getWebviewHtml() helper
+└── tasks/           # Extension-side provider for tasks panel
+```
+
+Key patterns:
+
+- **Type sharing**: Extension imports types from `@repo/webview-shared` via path mapping
+  to `extension.d.ts`. Webviews import directly from `@repo/webview-shared/react`.
+- **Message passing**: Use `postMessage()`/`useMessage()` hooks for communication.
+- **Lifecycle**: Dispose event listeners properly (see `TasksPanel.ts` for example).
+
+### Development
+
+```bash
+pnpm watch:all  # Rebuild extension and webviews on changes
+```
+
+Press F5 to launch the Extension Development Host. Use "Developer: Reload Webviews"
+to see webview changes.
+
+### Adding a New Webview
+
+1. Copy `packages/tasks` to `packages/<name>` and update the package name
+2. Create a provider in `src/webviews/<name>/` (see `TasksPanel.ts` for reference)
+3. Register the view in `package.json` under `contributes.views`
+4. Register the provider in `src/extension.ts`
+
 ## Testing
 
 There are a few ways you can test the "Open in VS Code" flow:

eslint.config.mjs

@@ -7,6 +7,8 @@ import prettierConfig from "eslint-config-prettier";
 import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
 import { flatConfigs as importXFlatConfigs } from "eslint-plugin-import-x";
 import packageJson from "eslint-plugin-package-json";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
 import globals from "globals";
 
 export default defineConfig(
@@ -15,21 +17,24 @@ export default defineConfig(
 		ignores: [
 			"out/**",
 			"dist/**",
+			"packages/*/dist/**",
 			"**/*.d.ts",
 			"vitest.config.ts",
+			"**/vite.config*.ts",
+			"**/createWebviewConfig.ts",
 			".vscode-test/**",
 		],
 	},
 
-	// Base ESLint recommended rules (for JS/TS files only)
+	// Base ESLint recommended rules (for JS/TS/TSX files only)
 	{
-		files: ["**/*.ts", "**/*.js", "**/*.mjs"],
+		files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.mjs"],
 		...eslint.configs.recommended,
 	},
 
 	// TypeScript configuration with type-checked rules
 	{
-		files: ["**/*.ts"],
+		files: ["**/*.ts", "**/*.tsx"],
 		extends: [
 			...tseslint.configs.recommendedTypeChecked,
 			...tseslint.configs.stylisticTypeChecked,
@@ -64,7 +69,7 @@ export default defineConfig(
 			],
 			"@typescript-eslint/no-unused-vars": [
 				"error",
-				{ varsIgnorePattern: "^_" },
+				{ varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
 			],
 			"@typescript-eslint/array-type": ["error", { default: "array-simple" }],
 			"@typescript-eslint/prefer-nullish-coalescing": [
@@ -96,6 +101,7 @@ export default defineConfig(
 					"newlines-between": "always",
 					alphabetize: { order: "asc", caseInsensitive: true },
 					sortTypesGroup: true,
+					warnOnUnassignedImports: true,
 				},
 			],
 			"no-duplicate-imports": "off",
@@ -160,6 +166,37 @@ export default defineConfig(
 		},
 	},
 
+	// Webview packages - browser globals
+	{
+		files: ["packages/*/src/**/*.ts", "packages/*/src/**/*.tsx"],
+		languageOptions: {
+			globals: {
+				...globals.browser,
+			},
+		},
+	},
+
+	// TSX files - React rules
+	{
+		files: ["**/*.tsx"],
+		plugins: {
+			react: reactPlugin,
+			"react-hooks": reactHooksPlugin,
+		},
+		settings: {
+			react: {
+				version: "detect",
+			},
+		},
+		rules: {
+			// TS rules already applied above; add React-specific rules
+			...reactPlugin.configs.recommended.rules,
+			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
+			...reactHooksPlugin.configs.recommended.rules,
+			"react/prop-types": "off", // Using TypeScript
+		},
+	},
+
 	// Package.json linting
 	packageJson.configs.recommended,
 

package.json

@@ -18,8 +18,9 @@
 	"type": "commonjs",
 	"main": "./dist/extension.js",
 	"scripts": {
-		"build": "tsc --noEmit && node esbuild.mjs",
-		"build:production": "tsc --noEmit && node esbuild.mjs --production",
+		"build": "pnpm build:webviews && tsc --noEmit && node esbuild.mjs",
+		"build:production": "NODE_ENV=production pnpm build:webviews && tsc --noEmit && node esbuild.mjs --production",
+		"build:webviews": "pnpm -r --filter \"./packages/*\" build",
 		"fmt": "prettier --write --cache --cache-strategy content .",
 		"fmt:check": "prettier --check --cache --cache-strategy content .",
 		"lint": "eslint --cache --cache-strategy content .",
@@ -31,7 +32,9 @@
 		"test:ci": "CI=true pnpm test",
 		"test:integration": "tsc -p test --outDir out && node esbuild.mjs && vscode-test",
 		"vscode:prepublish": "pnpm build:production",
-		"watch": "node esbuild.mjs --watch"
+		"watch:all": "concurrently -n extension,webviews \"pnpm watch:extension\" \"pnpm watch:webviews\"",
+		"watch:extension": "node esbuild.mjs --watch",
+		"watch:webviews": "pnpm -r --filter \"./packages/*\" --parallel dev"
 	},
 	"contributes": {
 		"configuration": {
@@ -194,6 +197,13 @@
 					"visibility": "visible",
 					"icon": "media/logo-white.svg",
 					"when": "coder.authenticated && coder.isOwner"
+				},
+				{
+					"type": "webview",
+					"id": "coder.tasksPanel",
+					"name": "Tasks",
+					"icon": "media/logo-white.svg",
+					"when": "coder.authenticated && coder.devMode"
 				}
 			]
 		},
@@ -202,6 +212,11 @@
 				"view": "myWorkspaces",
 				"contents": "Coder is a platform that provisions remote development environments. \n[Login](command:coder.login)",
 				"when": "!coder.authenticated && coder.loaded"
+			},
+			{
+				"view": "coder.tasksPanel",
+				"contents": "[Login](command:coder.login) to view tasks.",
+				"when": "!coder.authenticated && coder.loaded"
 			}
 		],
 		"commands": [
@@ -458,12 +473,14 @@
 		"@types/ws": "^8.18.1",
 		"@typescript-eslint/eslint-plugin": "^8.53.0",
 		"@typescript-eslint/parser": "^8.53.1",
+		"@vitejs/plugin-react-swc": "^3.8.0",
 		"@vitest/coverage-v8": "^4.0.16",
 		"@vscode/test-cli": "^0.0.12",
 		"@vscode/test-electron": "^2.5.2",
 		"@vscode/vsce": "^3.7.1",
 		"bufferutil": "^4.1.0",
 		"coder": "github:coder/coder#main",
+		"concurrently": "^9.2.1",
 		"dayjs": "^1.11.19",
 		"electron": "^40.0.0",
 		"esbuild": "^0.27.2",
@@ -472,13 +489,16 @@
 		"eslint-import-resolver-typescript": "^4.4.4",
 		"eslint-plugin-import-x": "^4.16.1",
 		"eslint-plugin-package-json": "^0.88.1",
+		"eslint-plugin-react": "^7.37.0",
+		"eslint-plugin-react-hooks": "^5.0.0",
 		"globals": "^17.0.0",
 		"jsonc-eslint-parser": "^2.4.2",
 		"memfs": "^4.56.4",
 		"prettier": "^3.7.4",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.53.1",
 		"utf-8-validate": "^6.0.6",
+		"vite": "^6.0.0",
 		"vitest": "^4.0.16"
 	},
 	"extensionPack": [

packages/tasks/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "@repo/tasks",
+	"version": "1.0.0",
+	"description": "Coder Tasks webview panel",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "tsc -b && vite build",
+		"dev": "vite build --watch"
+	},
+	"dependencies": {
+		"@repo/webview-shared": "workspace:*",
+		"@vscode-elements/react-elements": "^2.4.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react-swc": "^3.8.0",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.0"
+	}
+}

packages/tasks/src/App.tsx

@@ -0,0 +1,39 @@
+import { postMessage, useMessage } from "@repo/webview-shared/react";
+import {
+	VscodeButton,
+	VscodeProgressRing,
+} from "@vscode-elements/react-elements";
+import { useCallback, useEffect, useState } from "react";
+
+import type { WebviewMessage } from "@repo/webview-shared";
+
+export default function App() {
+	const [ready, setReady] = useState(false);
+
+	const handleMessage = useCallback((message: WebviewMessage) => {
+		switch (message.type) {
+			case "init":
+				setReady(true);
+				break;
+		}
+	}, []);
+
+	useMessage(handleMessage);
+
+	useEffect(() => {
+		postMessage({ type: "ready" });
+	}, []);
+
+	if (!ready) {
+		return <VscodeProgressRing />;
+	}
+
+	return (
+		<div>
+			<h2>Coder Tasks</h2>
+			<VscodeButton onClick={() => postMessage({ type: "refresh" })}>
+				Refresh
+			</VscodeButton>
+		</div>
+	);
+}

packages/tasks/src/index.css

@@ -0,0 +1 @@
+/* Webview styles */

packages/tasks/src/index.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+const root = document.getElementById("root");
+if (root) {
+	createRoot(root).render(
+		<StrictMode>
+			<App />
+		</StrictMode>,
+	);
+}

packages/tasks/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.webview.json",
+	"compilerOptions": {
+		"paths": {
+			"@repo/webview-shared": ["../webview-shared/src"]
+		}
+	},
+	"include": ["src"],
+	"references": [{ "path": "../webview-shared" }]
+}