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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
data	TasksCardData	—	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:[…] } }`.
value	string[]	—	Controlled selection (task ids; JS property). When set, it wins over local state.
defaultValue	string[]	—	Uncontrolled initial selection (task ids; JS property), overlaying per-task `checked`.
disabled	boolean	false	Freeze the whole list + Confirm. Attribute: `disabled`.
readonly	boolean	false	Display-only: rows can't be toggled and show the default cursor (no pointer, hover, or focus affordances). Keeps the look as-is. Attribute: `readonly`.

Methods

Method	Signature	Notes
select	(taskIds?: string[]): void	Set the checked task ids (local-only, no emit), respecting disabled/max. With no arg, select all toggleable rows.
toggle	(taskId: string, checked?: boolean): void	Toggle one task by id, honoring the max gate (no `checked` = flip).
send	(): void	Confirm the current selection: emits the `submit` CardEvent + resolves (only when the min/max gate passes). Named `send`, not `submit`.
focus	(options?: FocusOptions): void	Focus the task group (select-all checkbox if shown, else the first row).
dismiss	(): void	Trigger the dismiss path (emit `dismiss` + collapse to the re-openable stub).
reopen	(): void	Re-open a dismissed card from its stub (emit `reopen`).

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