Todo widget

In review

Live · web

Drive the plan: the count, meter, and glyphs move as one

Refactor retry logic

Read the failing test + the retry helper, done
Extract shared retry logic into lib/retry.ts, in progress
Point both API clients at the shared helper, pendinggateway + dashboard
Add unit tests for the backoff ladder, pending
Run typecheck, lint, and the full test suite, pending

Step 2 of 5 is running. The island is live.

The agent’s running plan as a report. The Stepper is the closest sibling, but a plan is not a wizard (steps don’t navigate, they report), so this is a quiet read-only card:

Header: title + a mono tabular done / total count + a ProgressSegments meter, one cell per step. The meter fill is cyan: progress is progress, not a status.
Steps are shape + color dual-coded glyphs: success check = done · live Spinner = running · warning triangle = blocked · empty muted ring = pending. Done rows dim their ink (the same seen-vs-unseen rule as the job row); a blocked row voices its reason in a warm detail line; the label itself stays neutral (never color alone).
State lives in the glyph, never a rail or a row wash (law §6).

Code

import { NockerlTodoWidget } from '@dizyx/nockerl-react';

<NockerlTodoWidget
  title="Refactor retry logic"
  items={[
    { id: 'read', label: 'Read the failing test', state: 'done' },
    { id: 'extract', label: 'Extract shared retry logic', state: 'running' },
    { id: 'tests', label: 'Add unit tests', state: 'pending' },
    { id: 'gates', label: 'Run the gates', state: 'blocked', detail: 'waiting on a ruling' },
  ]}
/>

Android

This page documents the web card. On Compose the mirror is the same plan card rendered inside the agent transcript, under the same header, glyph and meter rules.

Parameters

Prop	Type	Default	Description
`title`	`string`	`'Plan'`	Card heading.
`items` *	`NockerlTodoItem[]`		The plan steps, in order.
`headerAccessory`	`ReactNode`		The header ACCESSORY seat (the ratified settings-grammar name): a chip, an info tip, a collapse control owned by the host. It trails the title.
`className`	`string`