# Engine Card
> One Health Debug protocol engine's live state as a card, with a state badge, the engine's readout and its log action. Seven engines, one component.
Source: https://docs.nasaqui.com/components/engine-card
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/engine-card.json
```
A card that shows what one protocol engine says right now. The server decides the state; the card draws it and
never re-derives a rule. It covers seven engines through one discriminated `EngineSnapshot`: hydration, caffeine
block, GERD window, medication grace, trigger families, cycle and contraceptive.
Two opinions are built in. A state always shows an icon and words next to its colour. An engine that has not
enough data says so and shows nothing, instead of guessing.
## When to use
- A dashboard of the protocol engines, one card each.
- Anywhere a single engine's state, countdown and log action belong together.
## When not to use
- A per-day summary of what was logged: use [`DailySummary`](https://docs.nasaqui.com/components/daily-summary).
- An engine's history and record: use [`EngineDetails`](https://docs.nasaqui.com/components/engine-details).
- A number that is not a protocol engine: use [`StatCard`](https://docs.nasaqui.com/components/stat-card).
## Import
```tsx
import { EngineCard, EngineCardGrid } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```
## Quick start
```tsx
import { EngineCard, EngineCardGrid, type EngineSnapshot } from "@fadymondy/nasaq/web";
const hydration: EngineSnapshot = {
engine: "hydration",
state: "idle",
totalMl: 1500,
dailyCapMl: 5000,
unitMl: 250,
unitsLogged: 6,
unitsTotal: 20,
};
export function Today() {
return (
{
const res = await fetch("/api/engines/log", { method: "POST", body: JSON.stringify(action) });
if (!res.ok) return { error: (await res.json()).message };
}}
/>
);
}
```
## Anatomy
```
EngineCard data-slot="engine-card" data-engine, data-state
├─ header icon, title (h3), subtitle, state Badge (tone icon + words)
├─ body per engine: Meter, countdown, window, doses, counts, prediction, schedule
├─ error role="alert", the server's message as it is
└─ footer the log action and the details link
```
## API
| Prop | Type | Notes |
| --- | --- | --- |
| `snapshot` | `EngineSnapshot` | Required. Discriminated by `engine`. |
| `now` | `Date \| string \| number` | Fixed clock for countdowns. Omit to follow the clock. |
| `live` | `boolean` | Tick every second. Default `true`. |
| `onAction` | `(action: EngineAction) => Promise` | Log unit, log wake, log dose, record dose. The error is shown as is. |
| `detailHref` | `string` | Link to the engine's page. |
| `headingAs` | `"h2" \| "h3" \| "h4"` | Default `"h3"`. |
| `loading` | `boolean` | Skeleton. |
| `hideTitle` | `boolean` | For pages that already name the engine. |
| `labels` | `Partial` | Override any string. |
Units come from `Measure` (millilitres, minutes, hours, days) in an LTR isolate, so they keep their order in Arabic.
The pure helpers (`summariseDays`, `bucketDays`, `engineTone`, `summariseMedication`, `splitDuration`) are exported too.
## Examples
### Caffeine while blocked
```tsx
```
Check the exact snapshot shapes in `health-engines.ts`.
## Code
### React
```tsx
import { EngineCard, EngineCardGrid, type EngineSnapshot } from "@fadymondy/nasaq/web";
const hydration: EngineSnapshot = {
engine: "hydration",
state: "idle",
totalMl: 1500,
dailyCapMl: 5000,
unitMl: 250,
unitsLogged: 6,
unitsTotal: 20,
};
export function Today() {
return (
{
const res = await fetch("/api/engines/log", { method: "POST", body: JSON.stringify(action) });
if (!res.ok) return { error: (await res.json()).message };
}}
/>
);
}
```
### shadcn
```tsx
import { EngineCard, EngineCardGrid } from "@/components/ui/engine-card";
import { type EngineSnapshot } from "@/components/ui/health-engines";
const hydration: EngineSnapshot = {
engine: "hydration",
state: "idle",
totalMl: 1500,
dailyCapMl: 5000,
unitMl: 250,
unitsLogged: 6,
unitsTotal: 20,
};
export function Today() {
return (
{
const res = await fetch("/api/engines/log", { method: "POST", body: JSON.stringify(action) });
if (!res.ok) return { error: (await res.json()).message };
}}
/>
);
}
```
### Vue
```vue
```
### Blade
```blade
```
### HTML + Alpine
```html