# Tasks

Selectable task/plan list that emits a single atomic result when the user confirms — checkboxes, select-all, and gated confirm in one element.

<p class="kai-tag-sub">kai-tasks</p>

Present a list of tasks the user can check off, then confirm in one go — the card stays quiet while the user picks, and only the final confirm fires with the selected ids in a single atomic event.

## Preview

> **tip:** 
Use `<kai-tasks>` whenever an AI needs to hand control back to the user before acting — approving a migration plan, choosing maintenance steps, or picking reviewers. The gated confirm ensures the user explicitly approved exactly the items they wanted.

## Usage

Feed the card via the `data` property (an object, so set it in JavaScript). Listen for the bubbling `kai-card` CustomEvent:

```js
const el = document.querySelector('kai-tasks');

el.data = {
  selectAll: true,
  confirmLabel: 'Run selected',
  tasks: [
    { id: 'lint', label: 'Run linter', checked: true },
    { id: 'test', label: 'Run unit tests', checked: true },
    { id: 'build', label: 'Build production bundle' },
  ],
};

el.addEventListener('kai-card', (e) => {
  if (e.detail.kind === 'submit') {
    console.log('selected ids:', e.detail.data.selected);
  }
});
```

The element emits three verbs on `kai-card`:

| verb | when | payload |
|------|------|---------|
| `ready` | on mount | `{ kind: 'ready', cardId }` |
| `submit` | user clicks confirm | `{ kind: 'submit', cardId, data: { selected: string[] } }` |
| `error` | `data` is malformed | `{ kind: 'error', cardId, message }` |

- **Gating** — confirm is enabled when checked count is `>= (min ?? (allowEmpty ? 0 : 1))` and `<= (max ?? ∞)`. When `max` is reached, unchecked rows disable automatically.
- **Resolved state** — after receiving `submit`, set `el.resolution = { kind: 'submit', data: { selected: [...] } }` to render the read-only summary.

## Examples

### Select a Plan

`selectAll: true` with rows pre-checked; the select-all header goes indeterminate when only some rows are checked.

### Require at Least One

`allowEmpty: false` keeps confirm disabled until the user checks something.

### Bounded Selection

`min` and `max` cap how many rows the user can pick; over-selection is blocked automatically.

### With Descriptions

Each task row accepts an optional `description` — a secondary line for impact notes, caveats, or reversibility hints.

### Resolved (Read-Only)

After confirm, set `el.resolution` to render the chromed summary — checkboxes and confirm button are removed.

### Error State

An empty `tasks` array (or malformed definition) triggers the inline error view and emits an `error` CardEvent.

## Props

## Methods

## Composed from