Add Tasks panel infrastructure with type-safe IPC protocol (#772)

Build the communication and data-fetching infrastructure for the Tasks
webview panel, gated behind `coder.experimental.tasks` (disabled by
default). Includes shared IPC types, extension backend, React hooks,
and build tooling changes.

- Add `@repo/shared` package with `defineRequest`/`defineCommand`/
  `defineNotification` factories using phantom types for compile-time
  message safety
- Add `TasksApi` namespace defining all messages (init, CRUD,
  pause/resume, viewInCoder, logs, notifications)
- Add `TasksPanel` with typed handler dispatch, template caching
  (5min TTL), log caching for stable states, and 404-based feature
  detection for servers without Tasks support
- Add `useIpc()` hook for request correlation, 30s timeouts, and
  notification subscriptions
- Add `useTasksApi()` typed wrapper over all Tasks operations with
  React Query integration
- Add `coder.experimental.tasks` boolean setting and `coder.tasksEnabled`
  context variable so the sidebar only appears when opted in
- Switch to `@vitejs/plugin-react` with `babel-plugin-react-compiler`
  and `eslint-plugin-react-compiler`
- Add `@tanstack/react-query`, `@vscode/codicons` dependencies
- Add codicon font handling for vscode-elements shadow DOM

Author: EhabY

esbuild.mjs

@@ -27,9 +27,9 @@ 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",
 	},
 	external: ["vscode"],

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: {
@@ -189,7 +191,7 @@ export default defineConfig(
 			},
 		},
 		rules: {
-			// TS rules already applied above; add React-specific rules
+			...reactCompilerPlugin.configs.recommended.rules,
 			...reactPlugin.configs.recommended.rules,
 			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
 			...reactHooksPlugin.configs.recommended.rules,

media/tasks-logo.svg

@@ -140,6 +140,14 @@
 						"experimental"
 					]
 				},
+				"coder.experimental.tasks": {
+					"markdownDescription": "Enable the experimental [Tasks](https://coder.com/docs/ai-coder/tasks) panel in VS Code. When enabled, a sidebar panel lets you run and manage AI coding agents in Coder workspaces. This feature is under active development and may change. Requires a Coder deployment with Tasks support.",
+					"type": "boolean",
+					"default": false,
+					"tags": [
+						"experimental"
+					]
+				},
 				"coder.sshFlags": {
 					"markdownDescription": "Additional flags to pass to the `coder ssh` command when establishing SSH connections. Enter each flag as a separate array item; values are passed verbatim and in order. See the [CLI ssh reference](https://coder.com/docs/reference/cli/ssh) for available flags.\n\nNote: `--network-info-dir` and `--ssh-host-prefix` are ignored (managed internally). Prefer `#coder.proxyLogDirectory#` over `--log-dir`/`-l` for full functionality.",
 					"type": "array",
@@ -182,6 +190,11 @@
 					"id": "coder",
 					"title": "Coder Remote",
 					"icon": "media/logo-white.svg"
+				},
+				{
+					"id": "coderTasks",
+					"title": "Coder Tasks",
+					"icon": "media/tasks-logo.svg"
 				}
 			]
 		},
@@ -199,13 +212,15 @@
 					"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",
+					"icon": "media/tasks-logo.svg",
+					"when": "coder.authenticated && coder.tasksEnabled"
 				}
 			]
 		},
@@ -218,7 +233,7 @@
 			{
 				"view": "coder.tasksPanel",
 				"contents": "[Login](command:coder.login) to view tasks.",
-				"when": "!coder.authenticated && coder.loaded"
+				"when": "!coder.authenticated && coder.loaded && coder.tasksEnabled"
 			}
 		],
 		"commands": [
@@ -308,6 +323,12 @@
 				"command": "coder.manageCredentials",
 				"title": "Manage Credentials",
 				"category": "Coder"
+			},
+			{
+				"command": "coder.tasks.refresh",
+				"title": "Refresh Tasks",
+				"category": "Coder",
+				"icon": "$(refresh)"
 			}
 		],
 		"menus": {
@@ -370,6 +391,10 @@
 				},
 				{
 					"command": "coder.manageCredentials"
+				},
+				{
+					"command": "coder.tasks.refresh",
+					"when": "false"
 				}
 			],
 			"view/title": [
@@ -404,6 +429,11 @@
 					"command": "coder.searchAllWorkspaces",
 					"when": "coder.authenticated && view == allWorkspaces",
 					"group": "navigation@3"
+				},
+				{
+					"command": "coder.tasks.refresh",
+					"when": "coder.authenticated && coder.tasksEnabled && view == coder.tasksPanel",
+					"group": "navigation@1"
 				}
 			],
 			"view/item/context": [
@@ -448,6 +478,7 @@
 	},
 	"dependencies": {
 		"@peculiar/x509": "^1.14.3",
+		"@repo/shared": "workspace:*",
 		"axios": "1.13.5",
 		"date-fns": "^4.1.0",
 		"eventsource": "^4.1.0",
@@ -478,11 +509,12 @@
 		"@types/ws": "^8.18.1",
 		"@typescript-eslint/eslint-plugin": "^8.54.0",
 		"@typescript-eslint/parser": "^8.54.0",
-		"@vitejs/plugin-react-swc": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
 		"@vitest/coverage-v8": "^4.0.18",
 		"@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",
@@ -495,6 +527,7 @@
 		"eslint-plugin-import-x": "^4.16.1",
 		"eslint-plugin-package-json": "^0.88.2",
 		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-compiler": "catalog:",
 		"eslint-plugin-react-hooks": "^7.0.1",
 		"globals": "^17.3.0",
 		"jsdom": "^28.0.0",

package.json

@@ -0,0 +1,16 @@
+{
+	"name": "@repo/shared",
+	"version": "1.0.0",
+	"description": "Shared types and utilities for extension and webviews",
+	"private": true,
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"default": "./src/index.ts"
+		}
+	},
+	"devDependencies": {
+		"typescript": "catalog:"
+	}
+}

packages/shared/package.json

@@ -0,0 +1,6 @@
+// IPC protocol types
+export * from "./ipc/protocol";
+
+// Tasks types and API
+export * from "./tasks/types";
+export * from "./tasks/api";

packages/shared/src/index.ts

@@ -0,0 +1,100 @@
+/**
+ * Type-safe IPC protocol for VS Code webview communication.
+ *
+ * Inspired by tRPC's approach: types are carried in a phantom `_types` property
+ * that exists only for TypeScript inference, not at runtime.
+ */
+
+// --- Message definitions ---
+
+/** Request definition: params P, response R */
+export interface RequestDef<P = void, R = void> {
+	readonly method: string;
+	/** @internal Phantom types for inference - not present at runtime */
+	readonly _types?: { params: P; response: R };
+}
+
+/** Command definition: params P, no response */
+export interface CommandDef<P = void> {
+	readonly method: string;
+	/** @internal Phantom type for inference - not present at runtime */
+	readonly _types?: { params: P };
+}
+
+/** Notification definition: data D (extension to webview) */
+export interface NotificationDef<D = void> {
+	readonly method: string;
+	/** @internal Phantom type for inference - not present at runtime */
+	readonly _types?: { data: D };
+}
+
+// --- Factory functions ---
+
+/** Define a request with typed params and response */
+export function defineRequest<P = void, R = void>(
+	method: string,
+): RequestDef<P, R> {
+	return { method } as RequestDef<P, R>;
+}
+
+/** Define a fire-and-forget command */
+export function defineCommand<P = void>(method: string): CommandDef<P> {
+	return { method } as CommandDef<P>;
+}
+
+/** Define a push notification (extension to webview) */
+export function defineNotification<D = void>(
+	method: string,
+): NotificationDef<D> {
+	return { method } as NotificationDef<D>;
+}
+
+// --- Wire format ---
+
+/** Request from webview to extension */
+export interface IpcRequest<P = unknown> {
+	readonly requestId: string;
+	readonly method: string;
+	readonly params?: P;
+}
+
+/** Response from extension to webview */
+export interface IpcResponse<T = unknown> {
+	readonly requestId: string;
+	readonly method: string;
+	readonly success: boolean;
+	readonly data?: T;
+	readonly error?: string;
+}
+
+/** Push notification from extension to webview */
+export interface IpcNotification<D = unknown> {
+	readonly type: string;
+	readonly data?: D;
+}
+
+// --- Handler utilities ---
+
+/** Extract params type from a request/command definition */
+export type ParamsOf<T> = T extends { _types?: { params: infer P } } ? P : void;
+
+/** Extract response type from a request definition */
+export type ResponseOf<T> = T extends { _types?: { response: infer R } }
+	? R
+	: void;
+
+/** Type-safe request handler - infers params and return type from definition */
+export function requestHandler<P, R>(
+	_def: RequestDef<P, R>,
+	fn: (params: P) => Promise<R>,
+): (params: unknown) => Promise<unknown> {
+	return fn as (params: unknown) => Promise<unknown>;
+}
+
+/** Type-safe command handler - infers params type from definition */
+export function commandHandler<P>(
+	_def: CommandDef<P>,
+	fn: (params: P) => void | Promise<void>,
+): (params: unknown) => void | Promise<void> {
+	return fn as (params: unknown) => void | Promise<void>;
+}

packages/shared/src/ipc/protocol.ts

@@ -0,0 +1,82 @@
+/**
+ * Tasks API - Type-safe message definitions for the Tasks webview.
+ *
+ * Usage:
+ * ```tsx
+ * const ipc = useIpc();
+ * const tasks = await ipc.request(TasksApi.getTasks);  // Returns Task[]
+ * ipc.command(TasksApi.viewInCoder, { taskId: "..." }); // Fire-and-forget
+ * ```
+ */
+
+import {
+	defineCommand,
+	defineNotification,
+	defineRequest,
+} from "../ipc/protocol";
+
+import type { Task, TaskDetails, TaskLogEntry, TaskTemplate } from "./types";
+
+export interface InitResponse {
+	tasks: readonly Task[];
+	templates: readonly TaskTemplate[];
+	baseUrl: string;
+	tasksSupported: boolean;
+}
+
+const init = defineRequest<void, InitResponse>("init");
+const getTasks = defineRequest<void, Task[]>("getTasks");
+const getTemplates = defineRequest<void, TaskTemplate[]>("getTemplates");
+const getTask = defineRequest<{ taskId: string }, Task>("getTask");
+const getTaskDetails = defineRequest<{ taskId: string }, TaskDetails>(
+	"getTaskDetails",
+);
+
+export interface CreateTaskParams {
+	templateVersionId: string;
+	prompt: string;
+	presetId?: string;
+}
+const createTask = defineRequest<CreateTaskParams, Task>("createTask");
+
+const deleteTask = defineRequest<{ taskId: string }, void>("deleteTask");
+const pauseTask = defineRequest<{ taskId: string }, void>("pauseTask");
+const resumeTask = defineRequest<{ taskId: string }, void>("resumeTask");
+
+const viewInCoder = defineCommand<{ taskId: string }>("viewInCoder");
+const viewLogs = defineCommand<{ taskId: string }>("viewLogs");
+const downloadLogs = defineCommand<{ taskId: string }>("downloadLogs");
+const sendTaskMessage = defineCommand<{
+	taskId: string;
+	message: string;
+}>("sendTaskMessage");
+
+const taskUpdated = defineNotification<Task>("taskUpdated");
+const tasksUpdated = defineNotification<Task[]>("tasksUpdated");
+const logsAppend = defineNotification<TaskLogEntry[]>("logsAppend");
+const refresh = defineNotification<void>("refresh");
+const showCreateForm = defineNotification<void>("showCreateForm");
+
+export const TasksApi = {
+	// Requests
+	init,
+	getTasks,
+	getTemplates,
+	getTask,
+	getTaskDetails,
+	createTask,
+	deleteTask,
+	pauseTask,
+	resumeTask,
+	// Commands
+	viewInCoder,
+	viewLogs,
+	downloadLogs,
+	sendTaskMessage,
+	// Notifications
+	taskUpdated,
+	tasksUpdated,
+	logsAppend,
+	refresh,
+	showCreateForm,
+} as const;