Job notification row

In review

Live · web

Inbox list: select an unread row to mark it read

Nightly memory index rebuildVector store · archive · 3,412 documentsnowCI failed on nockerl-dashboardtypecheck · 2 errors in inbox-panel.tsx2m ago2Token-lint ratchet tightenedrawPx 774 → 754 · baseline updated18m agoDashboard deployedDeploy · zero-downtime swap · CDN purged1h agoSession transcript exportqueued behind 2 jobsin queue

Job card: the same row as a standalone dashboard VIEW

Embedding backfillQwen3-Embedding-4B · node 2 · 41% donestarted 6m ago

Opened 0 notifications · 3 unread. The island is live.

One background job or inbox notification as a row (WS4, agent-console epic), a thin shell over the ListItem grammar that invents no new row anatomy:

• Leading = the job state. success / warning / error ride the ListItem’s canonical B20 status mark (shape + color dual-coding); running is a live Spinner; queued is a muted clock: waiting is not a status, so it takes no warm color and no cyan.
• Trailing = the time. The relative label uses the Timeline time idiom (display label + machine dateTime surfaced on the row). An unread group count rides an accent Badge.
• Read vs unread lives in the INK. Unread rows keep the ListItem’s full voice; read rows dim to muted ink at regular weight. Never a left-rail, never a wash; law §6 keeps status in the leading mark, and the selection wash stays reserved for selection.

JobCard is a view

The catalog’s “JobCard” is this same row hosted alone on a lifted card surface (the second example above), a view, not a second component. Same rule as the approval views: presentation contexts are configs.

Code

TypeScript

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

// an inbox list: rows stacked on one card surface
<NockerlJobRow
  title="CI failed on nockerl-dashboard"
  detail="typecheck · 2 errors in inbox-panel.tsx"
  state="error"          // queued | running | success | warning | error
  time="2m ago"          // the Timeline relative-time idiom
  dateTime="2026-07-05T02:08:00Z"
  unread                 // full ink; omit → dimmed read row
  count={2}              // grouped notifications → trailing accent badge
  onSelect={openNotification}
/>

Android

The Compose mirror (the same ListItem-grammar row for the app inbox) rides the compose lane of the agent-console epic.

Parameters

Prop	Type	Default	Description
title *	string	n/a	The job / notification title (the row's accessible name).
detail	string	n/a	Supporting detail line ("finished in 4m 12s · 3,412 documents").
state *	NockerlJobState	n/a	Job state → the leading mark: B20 status icon, a live spinner, or a muted clock.
time	string	n/a	Relative timestamp display label ("2m ago"), the Timeline time idiom.
dateTime	string	n/a	Machine-readable instant for the timestamp (ISO). Surfaces as the row's title attr.
unread	boolean	false	Unread: full-strength ink. Read rows dim. Defaults to read.
count	number	n/a	Grouped-notification count → a trailing accent NockerlBadge (unread only).
trailing	ReactNode	n/a	Extra trailing node (a NockerlChip, an action) rendered after the badge.
onSelect	(() => void) | undefined	n/a
disabled	boolean	false
className	string	n/a