# Tasks

`tasks` adds a Tasks pane to the activity bar: one row per task any registered provider offers,
each with its source and detail line, and a click to run it or stop it.

```ts
import { Workbench, FileSystem } from "codelet/workbench";
import { tasks } from "codelet/extensions/tasks";
import { npm } from "codelet/extensions/npm";
import { terminal } from "codelet/extensions/terminal";
import { justBash } from "codelet/extensions/terminal/just-bash";

new Workbench({
  parent: document.getElementById("app")!,
  fs: new FileSystem({ "/package.json": '{ "scripts": { "build": "tsc" } }' }),
  extensions: [tasks, npm(), terminal(), justBash()],
});
```

::note
The Tasks icon only appears in the activity bar while there is at least one task to run. Mount
`tasks` on its own with no task provider, and the icon never shows up — that's expected, not a
bug: the pane pulls its list from whatever providers are registered, and an empty list means
nothing to draw an icon for. Add [`npm`](/extensions/npm) or register a provider of your own and
the icon appears with the first task it offers.
::

## What it adds

- **A Tasks pane**, rows grouped by source (the provider — `pnpm`, `gulp`, whatever a task's
  `source` says), name and detail per row.
- **Run and stop on the same row**: click an idle task to run it, click it again while it's
  running to stop it. Stopping ends the task by closing its terminal.
- **A badge on the activity bar icon**, the count of tasks currently running across the whole
  workbench — visible even with the pane folded away.
- **A refresh button** in the pane's header, for a provider that doesn't tell the pane its list
  changed.

The pane re-checks its list on its own whenever something is likely to have changed it — an
extension starting or stopping, the workspace switching, files being written while the pane isn't
showing — so pressing refresh is rarely necessary, but it's there.

## Where tasks come from

`tasks` draws whatever `vscode.tasks.fetchTasks()` returns. It ships no provider of its own.
[`codelet/extensions/npm`](/extensions/npm) is the built-in one, reading the workspace's
`package.json` scripts. An extension of yours can register another with
`vscode.tasks.registerTaskProvider` — see [Tasks, source control and terminals](/api/integrations)
for the provider API and how a task actually runs.

:read-more{to="/guide/extensions"}