# `WardrikWeb.Components`

Components and formatting helpers for dashboard pages.

Use them in extension pages to match the look of the dashboard.

    import WardrikWeb.Components

    <.head title="Fleet" lead="Runs and cost for each agent." />
    <.status value="parked" />

# `ago`

```elixir
@spec ago(String.t() | nil, DateTime.t()) :: String.t()
```

An ISO 8601 time, shown as time ago, for example `5m ago`.

# `bytes`

```elixir
@spec bytes(integer() | nil) :: String.t()
```

A size in bytes, in the largest unit that keeps it at 1 or more: `512 B`, `1.8 MB`.

# `doing_text`

```elixir
@spec doing_text(map()) :: String.t()
```

Describes what an agent is doing, given the latest event of its current run.

# `events`

A list of events. Each row shows the time, the event type and a short preview. Click a row to
see the full event.

Set `:agent` to show a link to each event's agent. The link needs `:dashboard`.

## Attributes

* `events` (`:list`) (required)
* `empty` (`:string`) - Defaults to `"No events."`.
* `dashboard` (`:any`) - Defaults to `nil`.
* `agent` (`:boolean`) - Defaults to `false`.

# `flash`

```elixir
@spec flash(Phoenix.LiveView.Socket.t(), :info | :error, String.t()) ::
  Phoenix.LiveView.Socket.t()
```

Shows a flash message from a LiveComponent.

LiveView only shows a component's flash when the component navigates. This function sends the
message to the parent LiveView, which shows it.

# `head`

A page heading, with an optional breadcrumb, badge and action buttons.
## Attributes

* `title` (`:string`) (required)
* `lead` (`:string`) - Defaults to `nil`.
## Slots

* `crumb`
* `badge`
* `actions`

# `json`

A JSON value, pretty-printed.
## Attributes

* `value` (`:any`) (required)

# `live`

Shows whether the page is receiving live updates.
## Attributes

* `live` (`:boolean`) (required)
* `stopped` (`:string`) - Defaults to `nil`.

# `message`

```elixir
@spec message(Wardrik.Error.t() | String.t()) :: String.t()
```

Returns an error's message.

# `meter`

A bar that shows `count` as a share of `limit`, with both numbers and the percentage.

At 80% or more the bar turns red and says it's near the limit. Set `:warn` to `false` for a
share that isn't a limit.

## Attributes

* `label` (`:string`) (required)
* `count` (`:integer`) (required)
* `limit` (`:integer`) (required)
* `format` (`:any`) - Defaults to `&WardrikWeb.Components.number/1`.
* `warn` (`:boolean`) - Defaults to `true`.
* `tip` (`:string`) - explains the bar, shown on hover or focus. Defaults to `nil`.

# `micro_usd`

```elixir
@spec micro_usd(non_neg_integer() | nil) :: String.t()
```

A cost given in micro-USD, formatted in dollars.

# `number`

```elixir
@spec number(integer() | nil) :: String.t()
```

A number with thousands separators.

# `off`

Says a settings page is off, and how to turn it on.
## Attributes

* `key` (`:atom`) (required)
* `behaviour` (`:atom`) (required)

# `owner_picker`

A menu for choosing an owner, such as an org or a person. Choosing one sends the `"owner"`
event with `%{"owner" => owner}`.

## Attributes

* `owners` (`:list`) (required)
* `owner` (`:string`) (required)

# `panels`

Renders the extensions' panels for `slot`, passing them `assigns`.
## Attributes

* `dashboard` (`WardrikWeb.Dashboard`) (required)
* `slot` (`:atom`) (required)
* `scope` (`:any`) (required)
* `assigns` (`:map`) - Defaults to `%{}`.

# `preview`

```elixir
@spec preview(term(), String.t() | nil) :: String.t()
```

A one-line preview of event data. It shows the first three plain values, except `except`.

# `spark`

A small line chart of `values`, oldest first. Hover a point to see its value.

`:format` turns a value into the text the tooltip shows. Set `:max` for a fixed scale from 0
to `:max`. Without it, the scale fits the values, so small changes are visible.

## Attributes

* `values` (`:list`) (required)
* `label` (`:string`) (required)
* `format` (`:any`) - Defaults to `nil`.
* `max` (`:any`) - Defaults to `nil`.

# `status`

A status label for an agent or a run.
## Attributes

* `value` (`:string`) (required)

# `tip`

A small ⓘ mark that shows `text` on hover or keyboard focus.
## Attributes

* `text` (`:string`) (required)

# `tokens`

```elixir
@spec tokens(integer() | nil) :: String.t()
```

A token count, abbreviated above a thousand: `8.4k`, `1.2M`.

# `took`

```elixir
@spec took(non_neg_integer() | nil) :: String.t()
```

A duration in milliseconds, shown in its two largest units: `850 ms`, `4.2s`, `3m 10s`, `6d 20h`.

# `usd`

```elixir
@spec usd(number() | nil) :: String.t()
```

A cost in dollars.

---

*Consult [api-reference.md](api-reference.md) for complete listing*