Run inbox

Background runs in one list, with a Needs input filter and static unread dots. Arrow keys move through the rows.

Markdown

On this page

Background runs with a Needs input filter and unread dots. Opening a run marks it read.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/run-inbox.json

Usage

tsx

import { RunInbox } from "@/components/ui/chatcn/run-inbox"

<RunInbox
  runs={runs}
  selectedId={openRunId}
  onOpen={(run) => openRun(run.id)}
  onMarkAllRead={markAllRead}
/>

Rows keep the order you pass. Mark a run read in onOpen. Filters are All, Needs input with a count, Running and Done.

Examples

Empty and loading

The empty state and skeleton rows.

Props

Prop	Type	Notes
`runs`	`BackgroundRunData[]`	Same shape as Background run
`filter`, `defaultFilter`, `onFilterChange`	`all \| needs-input \| running \| done`
`selectedId`	`string`	Highlights the open run
`onOpen`	`(run) => void`
`onMarkAllRead`	`() => void`	Shown while anything is unread
`loading`	`boolean`	Skeleton rows

Keyboard

Key	Action
`ArrowUp`, `ArrowDown`	Previous or next run
`Home`, `End`	First or last run
`Enter`	Open the run

Accessibility

Filters are toggle buttons with aria-pressed. Unread rows add unread to their name; the open run has aria-current.
The unread dot is static. A pulsing dot would only repeat what the dot already says.

Motion

Filter changes and keyboard movement are instant. Row hover changes background over 150 ms.