# CheckRuns

> The checks on a commit or pull request: one sentence counting them by state ("1 failing, 1 pending and 22 successful checks") that discloses the list, sorted failures first.

```ts
import { CheckRuns } from "@sdxc/ui/app";
```

Renders the summary sentence as the `<summary>` of a `<details>` that lists every run, failed
ones first, opening on its own when a run failed. It is complete as server HTML: the native
disclosure needs no island, and it reads only the theme's shared tokens.

## Examples

```tsx
<CheckRuns
	runs={runs}
	locale="en"
	labels={{
		counts: { failure: (n) => `${n} failing`, pending: (n) => `${n} pending`, success: (n) => `${n} successful`, skipped: (n) => `${n} skipped`, cancelled: (n) => `${n} cancelled` },
		summary: (list, total) => `${list} ${total === 1 ? "check" : "checks"}`,
		states: { failure: "Failed", pending: "In progress", success: "Passed", skipped: "Skipped", cancelled: "Cancelled" },
		details: "Details",
		empty: "No checks",
	}}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `runs` | `readonly Run[]` | Every run in any order; the part sorts them failures first. |
| `labels` | `Labels` | The strings the summary, icons and links show, so the part reads in any language. |
| `locale?` | `string` | Locale the counts are joined in ("1 failing, 1 pending and 22 successful"). |
| `open?` | `boolean` | Whether the list starts open. Unset, it opens exactly when a run failed, so the failure is on screen and a green list stays one line. |

Also accepts everything in `Omit<TagProps<"details">, "children" | "open">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `State` | `"success" \| "failure" \| "pending" \| "skipped" \| "cancelled"` | Where one run stands; `failure` reads danger, `pending` warning, `success` success. |

## Also exported

- `sortCheckRuns`
- `checkRunsSummary`
- `CheckRunIcon`