Add Tasks panel infrastructure with type-safe IPC protocol by EhabY · Pull Request #772 · coder/vscode-coder

EhabY · 2026-02-04T07:37:20Z

Summary

Adds foundational infrastructure for the Tasks panel: a type-safe IPC protocol for webview-extension communication, the TasksPanel backend, and comprehensive test coverage.

Type-Safe IPC Protocol

The protocol uses phantom types (inspired by tRPC) to carry type information at compile time without runtime overhead:

// Define API with types
const getTask = defineRequest<{ taskId: string }, Task>("getTask");

// Extension: handler params and return type are inferred
requestHandler(TasksApi.getTask, (p) => this.client.getTask("me", p.taskId))

// Webview: params and response are type-checked
const task = await ipc.request(TasksApi.getTask, { taskId: "123" }); // → Task

Three message types with distinct semantics:

Type	Direction	Response	Use Case
Request	webview → extension	Yes	Data fetching, mutations
Command	webview → extension	No	Fire-and-forget actions (open URL, download)
Notification	extension → webview	No	Push updates (task changed, logs appended)

Why this design:

Phantom types provide full type safety with zero runtime cost
Separating requests/commands/notifications makes the communication pattern explicit
Handler wrappers (requestHandler, commandHandler) ensure type safety at definition time, catching errors before they reach call sites
Single TasksApi object serves as the source of truth for all messages

Package Structure

packages/
├── shared/           # Types and API definitions (used by extension + webviews)
├── webview-shared/   # React hooks (useIpc) for webview communication
└── tasks/            # Tasks panel React app

Shared types live in @repo/shared so both the extension (Node.js) and webviews (browser) import the same definitions.

TasksPanel Backend

CRUD operations - Create, delete, pause, resume tasks
Template management - Fetch templates and presets with 5-minute TTL cache
Log fetching - Cached for completed/errored/paused tasks (stable states)
Push notifications - Real-time updates via tasksUpdated notification

Closes #775

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

- Remove unused `scope` feature from IPC protocol (YAGNI) - Remove redundant array spreads in TasksPanel - Make TaskDetails extend TaskActions to reduce duplication - Remove handler fallback in TasksPanel (keep requests/commands separate) - Add notification subscription support to useIpc hook - Add tests for onNotification feature - Remove redundant individual exports from tasks/api.ts (export as group only)

DanielleMaywood

Just some minor nits for now. Still haven't had time to read and digest it all

package.json

src/webviews/tasks/tasksPanel.ts

test/unit/webviews/tasks/tasksPanel.test.ts

mafredri

Mainly focused on the tasks state handling. I read through the full PR but the other parts are a bit too far outside my ballpark to comment on.

mafredri · 2026-02-06T14:01:34Z