# Host card
> Card for one demo host with kind, address, live CPU and memory, and each service with its ports and request rate.
- Element: `<sv-host-card>`
- React: `import { SvHostCard } from "@/components/lumesec/sv-host-card"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-host-card.json
- Page: https://elements.lumesec.ai/components/service-map/host-card



Live preview: https://elements.lumesec.ai/view/sv-host-card

```html
<sv-host-card host="db-01"></sv-host-card>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/sv-host-card
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-host-card.json
```

## Usage

React:

```tsx
import { SvHostCard } from "@/components/lumesec/sv-host-card";

export function Example() {
  return (
    <SvHostCard host="db-01" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-host-card.js"></script>

<sv-host-card host="db-01"></sv-host-card>
```

## Behaviour

One host with its kind, address, load and every service it runs, each with its ports and current request rate.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                                                                                                                                                                     |
| --------- | ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `host`    | `host`     | `string` | `db-01` | Host id from the demo inventory: `edge-01`, `app-01`, `app-02`, `auth-01`, `mon-01`, `db-01`, `cache-01`, `gpu-01` or `store-01`. Unknown ids fall back to `db-01`. Read once on first connect. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event     | React prop  | Detail             | Description                                      |
| --------- | ----------- | ------------------ | ------------------------------------------------ |
| `restart` | `onRestart` | `{ host: string }` | Fires when a restart finishes, with the host id. |

### Methods

Call them on the element, for example through a React ref.

| Method      | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------ |
| `restart()` | Simulates a restart: meters and rates show a dash for 2.4 s, then the host reports back and `restart` fires. |

## Accessibility

* Services are a `role="list"` of `role="listitem"` rows.
* A polite live region announces the restart and when the host is back.
* The Restart host button is disabled while the restart runs.
* Reduced motion: the restart finishes after 50 ms instead of 2.4 s, and the meter bars change without a width transition.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--foreground` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-border`, `--ui-fg2`, `--ui-mono` and `--ui-muted`.

## Notes

* Reads the shared demo infrastructure `INFRA`; `host="db-01"` selects the record.
* CPU, memory and request rates are simulated and drift every 1.2 s. A service's rate is the sum of its inbound demo edges; services without any show idle.