Tasks

kai-tasks

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.

• Shadow DOM
• Select-all with indeterminate state
• Min / max gating
• Read-only resolved view

Preview

When to use

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:

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.

Code

Require at Least One

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

Code

Bounded Selection

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

Code

With Descriptions

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

Code

Resolved (Read-Only)

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

Code

Error State

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

Code

Props

Property	Type	Default	Notes
data	Record<string, unknown>	—	The tasks definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import `TasksCardData` from `@kitn.ai/ui` for the full shape.
cardId	string	—	Stable card id correlating every emitted CardEvent. Attribute: `card-id`.
heading	string	—	Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.
resolution	Record<string, unknown>	—	Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'submit', data:{ selected:[…] } }`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

TasksCard

---

Need a hand? Report a bug Ask for help