ServiceCard

Service status row with latency + sparkline.

A clickable service tile showing name, host, status tone, latency, and an optional sparkline.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

svelte

<script>
  import { ServiceCard } from 'dssoca';
</script>

<ServiceCard name="movies-api" host="movies.home"
  status="up" latency="4ms" />

Prop	Type	Default	Description
`name`	`string`	—	Required. Service name.
`host`	`string`	—	Required. Host string.
`status`	`'up' \| 'deg' \| 'down'`	`'up'`	Status tone.
`latency`	`string`	—	Latency text (e.g. "4ms").
`spark`	`number[]`	—	Optional sparkline series.
`onclick`	`() => void`	—	Click handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.