Add Tasks panel infrastructure with type-safe IPC protocol

Adds foundational infrastructure for the Tasks panel:

Backend (TasksPanel.ts):
- CRUD operations for tasks (create, delete, pause, resume)
- Template and preset management
- Log fetching with caching
- Real-time push notifications to webview

Type-safe IPC Protocol:
- Generic request/response/notification patterns
- Compile-time type safety for webview-extension messages
- useIpc hook for React components
- useTasksApi hook with typed methods

Supporting infrastructure:
- Test setup for jsdom compatibility with Lit elements
- Codicon stylesheet integration for vscode-elements
- React Compiler integration with ESLint plugin
- pnpm catalog for consistent dependency versions

The UI components will be added in subsequent PRs.

Author: EhabY

esbuild.mjs

@@ -27,10 +27,11 @@ const buildOptions = {
 	target: "node20",
 	format: "cjs",
 	mainFields: ["module", "main"],
-	// Force openpgp to use CJS. The ESM version uses import.meta.url which is
-	// undefined when bundled to CJS, causing runtime errors.
 	alias: {
+		// Force openpgp to use CJS. The ESM version uses import.meta.url which is
+		// undefined when bundled to CJS, causing runtime errors.
 		openpgp: "./node_modules/openpgp/dist/node/openpgp.min.cjs",
+		"@repo/webview-shared": "./packages/webview-shared/src/index.ts",
 	},
 	external: ["vscode"],
 	sourcemap: production ? "external" : true,

eslint.config.mjs

@@ -8,6 +8,7 @@ import { createTypeScriptImportResolver } from "eslint-import-resolver-typescrip
 import { flatConfigs as importXFlatConfigs } from "eslint-plugin-import-x";
 import packageJson from "eslint-plugin-package-json";
 import reactPlugin from "eslint-plugin-react";
+import reactCompilerPlugin from "eslint-plugin-react-compiler";
 import reactHooksPlugin from "eslint-plugin-react-hooks";
 import globals from "globals";
 
@@ -181,6 +182,7 @@ export default defineConfig(
 		files: ["**/*.tsx"],
 		plugins: {
 			react: reactPlugin,
+			"react-compiler": reactCompilerPlugin,
 			"react-hooks": reactHooksPlugin,
 		},
 		settings: {
@@ -194,6 +196,7 @@ export default defineConfig(
 			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
 			...reactHooksPlugin.configs.recommended.rules,
 			"react/prop-types": "off", // Using TypeScript
+			"react-compiler/react-compiler": "error",
 		},
 	},
 

package.json

@@ -182,6 +182,11 @@
 					"id": "coder",
 					"title": "Coder Remote",
 					"icon": "media/logo-white.svg"
+				},
+				{
+					"id": "coderTasks",
+					"title": "Coder Tasks",
+					"icon": "media/tasks-logo.svg"
 				}
 			]
 		},
@@ -199,13 +204,14 @@
 					"visibility": "visible",
 					"icon": "media/logo-white.svg",
 					"when": "coder.authenticated && coder.isOwner"
-				},
+				}
+			],
+			"coderTasks": [
 				{
 					"type": "webview",
 					"id": "coder.tasksPanel",
-					"name": "Tasks",
-					"icon": "media/logo-white.svg",
-					"when": "coder.authenticated && coder.devMode"
+					"name": "Coder Tasks",
+					"when": "coder.authenticated"
 				}
 			]
 		},
@@ -308,6 +314,12 @@
 				"command": "coder.manageCredentials",
 				"title": "Manage Credentials",
 				"category": "Coder"
+			},
+			{
+				"command": "coder.tasks.refresh",
+				"title": "Refresh Tasks",
+				"category": "Coder",
+				"icon": "$(refresh)"
 			}
 		],
 		"menus": {
@@ -370,6 +382,10 @@
 				},
 				{
 					"command": "coder.manageCredentials"
+				},
+				{
+					"command": "coder.tasks.refresh",
+					"when": "false"
 				}
 			],
 			"view/title": [
@@ -404,6 +420,11 @@
 					"command": "coder.searchAllWorkspaces",
 					"when": "coder.authenticated && view == allWorkspaces",
 					"group": "navigation@3"
+				},
+				{
+					"command": "coder.tasks.refresh",
+					"when": "coder.authenticated && view == coder.tasksPanel",
+					"group": "navigation@1"
 				}
 			],
 			"view/item/context": [
@@ -463,52 +484,54 @@
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.39.2",
-		"@eslint/markdown": "^7.5.1",
-		"@testing-library/react": "^16.3.2",
-		"@tsconfig/node20": "^20.1.8",
-		"@types/mocha": "^10.0.10",
-		"@types/node": "^20",
-		"@types/proper-lockfile": "^4.1.4",
-		"@types/react": "catalog:",
-		"@types/react-dom": "catalog:",
-		"@types/semver": "^7.7.1",
-		"@types/ua-parser-js": "0.7.39",
-		"@types/vscode": "^1.95.0",
-		"@types/ws": "^8.18.1",
-		"@typescript-eslint/eslint-plugin": "^8.53.1",
-		"@typescript-eslint/parser": "^8.53.1",
-		"@vitejs/plugin-react-swc": "catalog:",
-		"@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",
-		"eslint": "^9.39.2",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-import-resolver-typescript": "^4.4.4",
-		"eslint-plugin-import-x": "^4.16.1",
-		"eslint-plugin-package-json": "^0.88.2",
-		"eslint-plugin-react": "^7.37.0",
-		"eslint-plugin-react-hooks": "^5.0.0",
-		"globals": "^17.0.0",
-		"jsdom": "^27.4.0",
-		"jsonc-eslint-parser": "^2.4.2",
-		"memfs": "^4.56.10",
-		"prettier": "^3.7.4",
-		"react": "catalog:",
-		"react-dom": "catalog:",
-		"typescript": "catalog:",
-		"typescript-eslint": "^8.53.1",
-		"utf-8-validate": "^6.0.6",
-		"vite": "catalog:",
-		"vitest": "^4.0.16"
-	},
+    "@eslint/js": "^9.39.2",
+    "@eslint/markdown": "^7.5.1",
+    "@testing-library/react": "^16.3.2",
+    "@tsconfig/node20": "^20.1.8",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20",
+    "@types/proper-lockfile": "^4.1.4",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/semver": "^7.7.1",
+    "@types/ua-parser-js": "0.7.39",
+    "@types/vscode": "^1.95.0",
+    "@types/ws": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vscode/test-cli": "^0.0.12",
+    "@vscode/test-electron": "^2.5.2",
+    "@vscode/vsce": "^3.7.1",
+    "babel-plugin-react-compiler": "catalog:",
+    "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",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-package-json": "^0.88.2",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-compiler": "catalog:",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^17.0.0",
+    "jsdom": "^27.4.0",
+    "jsonc-eslint-parser": "^2.4.2",
+    "memfs": "^4.56.10",
+    "prettier": "^3.7.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "typescript-eslint": "^8.53.1",
+    "utf-8-validate": "^6.0.6",
+    "vite": "catalog:",
+    "vitest": "^4.0.16"
+  },
 	"extensionPack": [
 		"ms-vscode-remote.remote-ssh"
 	],

packages/tasks/package.json

@@ -11,13 +11,15 @@
 	"dependencies": {
 		"@repo/webview-shared": "workspace:*",
 		"@vscode-elements/react-elements": "catalog:",
+		"@vscode/codicons": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:"
 	},
 	"devDependencies": {
 		"@types/react": "catalog:",
 		"@types/react-dom": "catalog:",
-		"@vitejs/plugin-react-swc": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
+		"babel-plugin-react-compiler": "catalog:",
 		"typescript": "catalog:",
 		"vite": "catalog:"
 	}

packages/tasks/src/App.tsx

@@ -1,41 +1,62 @@
-import { logger } from "@repo/webview-shared/logger";
-import { useMessage } from "@repo/webview-shared/react";
-import {
-	VscodeButton,
-	VscodeProgressRing,
-} from "@vscode-elements/react-elements";
+import { useTasksApi } from "@repo/webview-shared/react";
+import { VscodeProgressRing } from "@vscode-elements/react-elements";
 import { useEffect, useState } from "react";
 
-import { sendReady, sendRefresh } from "./messages";
-
-import type { TasksExtensionMessage } from "@repo/webview-shared";
+import type { Task, TaskTemplate } from "@repo/webview-shared";
 
 export default function App() {
-	const [ready, setReady] = useState(false);
-
-	useMessage<TasksExtensionMessage>((message) => {
-		switch (message.type) {
-			case "init":
-				setReady(true);
-				break;
-			case "error":
-				logger.error("Tasks panel error:", message.data);
-				break;
-		}
-	});
+	const api = useTasksApi();
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [tasks, setTasks] = useState<Task[]>([]);
+	const [templates, setTemplates] = useState<TaskTemplate[]>([]);
+	const [tasksSupported, setTasksSupported] = useState(true);
 
 	useEffect(() => {
-		sendReady();
-	}, []);
+		api
+			.init()
+			.then((data) => {
+				setTasks(data.tasks);
+				setTemplates(data.templates);
+				setTasksSupported(data.tasksSupported);
+				setLoading(false);
+			})
+			.catch((err) => {
+				setError(err instanceof Error ? err.message : "Failed to initialize");
+				setLoading(false);
+			});
+	}, [api]);
+
+	if (loading) {
+		return (
+			<div className="loading-container">
+				<VscodeProgressRing />
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="error-container">
+				<p>Error: {error}</p>
+			</div>
+		);
+	}
 
-	if (!ready) {
-		return <VscodeProgressRing />;
+	if (!tasksSupported) {
+		return (
+			<div className="not-supported">
+				<p>Tasks are not supported on this Coder server.</p>
+			</div>
+		);
 	}
 
 	return (
-		<div>
-			<h2>Coder Tasks</h2>
-			<VscodeButton onClick={sendRefresh}>Refresh</VscodeButton>
+		<div className="tasks-panel">
+			<h3>Tasks Infrastructure Ready</h3>
+			<p>Templates: {templates.length}</p>
+			<p>Tasks: {tasks.length}</p>
+			<p>Full UI coming in next PR...</p>
 		</div>
 	);
 }

packages/tasks/src/messages.ts

@@ -1,4 +1,4 @@
-import react from "@vitejs/plugin-react-swc";
+import react from "@vitejs/plugin-react";
 import { resolve } from "node:path";
 import { defineConfig, type UserConfig } from "vite";
 
@@ -14,7 +14,15 @@ export function createWebviewConfig(
 	const production = process.env.NODE_ENV === "production";
 
 	return defineConfig({
-		plugins: [react()],
+		plugins: [
+			react({
+				babel: {
+					plugins: [["babel-plugin-react-compiler", {}]],
+				},
+			}),
+		],
+		// Use relative paths for assets (required for VS Code webviews)
+		base: "./",
 		build: {
 			outDir: resolve(dirname, `../../dist/webviews/${webviewName}`),
 			emptyOutDir: true,

packages/webview-shared/createWebviewConfig.ts

@@ -1,6 +1,21 @@
 // Types exposed to the extension (react/ subpath is excluded).
 export type {
+	LogsStatus,
+	TaskActions,
+	TaskDetails,
 	TasksExtensionMessage,
+	TasksPushMessage,
+	TasksRequest,
+	TasksResponse,
 	TasksWebviewMessage,
+	TaskTemplate,
+	TaskUIState,
 	WebviewMessage,
 } from "./src/index";
+
+export {
+	getTaskActions,
+	getTaskUIState,
+	isTasksRequest,
+	isTasksResponse,
+} from "./src/index";

packages/webview-shared/extension.d.ts

@@ -10,7 +10,11 @@ function getVsCodeApi(): WebviewApi<unknown> {
 	return vscodeApi;
 }
 
-export function postMessage(message: WebviewMessage): void {
+/**
+ * Post a message to the extension.
+ * Accepts legacy WebviewMessage format or any object for the new IPC protocol.
+ */
+export function postMessage(message: WebviewMessage | Record<string, unknown>): void {
 	getVsCodeApi().postMessage(message);
 }