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 (WS4, agent-console epic). 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

TypeScript

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' },
  ]}
/>

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, task 2657/2686): a chip, an info tip, a collapse control owned by the host. It trails the title.
`className`	`string`