# Engine Details > One protocol engine's own page with its live card, per-day history, record timeline and the fixed protocol it follows. Source: https://docs.nasaqui.com/components/engine-details ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/engine-details.json ``` The page behind an [`EngineCard`](https://docs.nasaqui.com/components/engine-card). It shows the live card, then for the engines that judge days (hydration, caffeine, GERD) a window switch, counts of days on protocol, off protocol and not judged, current and best streaks, a chart and a strip of every day. Then the engine's record as a timeline and the fixed protocol constants. Only counts and verdicts appear, never a rate. A day the engine did not judge is not a failure: it ends a streak without counting against you, and it has its own shape in the strip. ## When to use - The screen a dashboard card links to. ## When not to use - A summary of one day: use [`DailySummary`](https://docs.nasaqui.com/components/daily-summary). ## Import ```tsx import { EngineDetails } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { EngineDetails, type HistoryDay } from "@fadymondy/nasaq/web"; export function HydrationPage({ history }: { history: HistoryDay[] }) { return ( { /* load that window, pass it back through history */ }} records={[{ id: "1", at: "2026-09-29T07:10:00Z", title: "250 mL logged", tone: "success" }]} backHref="/health" /> ); } ``` ## Anatomy ``` EngineDetails data-slot="engine-details" data-engine ├─ header back link (mirrors in RTL), icon, h1, lede ├─ EngineCard hideTitle ├─ history section ToggleGroup, StatGrid, Chart, EngineHistoryStrip, legend ├─ record section Timeline └─ protocol section definition list of constants ``` ## API | Prop | Type | Notes | | --- | --- | --- | | `snapshot` | `EngineSnapshot` | Required. | | `history` | `HistoryDay[]` | Oldest first, one per civil day. | | `historyLoading` / `historyError` / `onRetry` | | Skeleton, the server's message, retry. | | `windows` | `number[]` | Default `[7, 30, 365]`. | | `windowDays` / `onWindowChange` | | Controlled window. | | `records` | `EngineRecordEntry[]` | Newest first. `tone` picks an icon as well as a colour. | | `onAction`, `now` | | Passed to the card. | | `backHref` | `string` | Omit to hide the link. | | `labels` | `Partial` | Override any string. | ## Code ### React ```tsx import { EngineDetails, type HistoryDay } from "@fadymondy/nasaq/web"; export function HydrationPage({ history }: { history: HistoryDay[] }) { return ( { /* load that window, pass it back through history */ }} records={[{ id: "1", at: "2026-09-29T07:10:00Z", title: "250 mL logged", tone: "success" }]} backHref="/health" /> ); } ``` ### shadcn ```tsx import { EngineDetails } from "@/components/ui/engine-details"; import { type HistoryDay } from "@/components/ui/health-engines"; export function HydrationPage({ history }: { history: HistoryDay[] }) { return ( { /* load that window, pass it back through history */ }} records={[{ id: "1", at: "2026-09-29T07:10:00Z", title: "250 mL logged", tone: "success" }]} backHref="/health" /> ); } ``` ### Vue ```vue ``` ### Blade ```blade @php $history = []; for ($i = 0; $i < 7; $i++) { $history[] = ['date' => sprintf('2026-09-%02d', 23 + $i), 'verdict' => $i === 3 ? 'off_protocol' : ($i === 0 ? 'unevaluated' : 'on_protocol'), 'entries' => 4 + $i]; } @endphp ``` ### HTML + Alpine ```html
Back to today

Hydration

What this engine says right now, and what it has recorded.

State
Ready to log
1,500 mL of 5,000 mL
Units today

History

Days on protocol, off it, and days the engine declined to judge. Counts, never a rate.

Days on protocol
5 days
Days off protocol
1 day
Days not judged
1 day
Current streak
3 days
Best streak
3 days

Entries per day

Protocol history for the last 7 days
Every day

September 2026

  1. Sep 23, 2026: Not judged, 4 entries
  2. Sep 24, 2026: On protocol, 5 entries
  3. Sep 25, 2026: On protocol, 6 entries
  4. Sep 26, 2026: Off protocol, 7 entries
  5. Sep 27, 2026: On protocol, 8 entries
  6. Sep 28, 2026: On protocol, 9 entries
  7. Sep 29, 2026: On protocol, 10 entries
  • On protocol
  • Off protocol
  • Not judged

Record

What this engine has written down, newest first.

  1. 250 mL logged

The protocol

The fixed rules this engine follows. They live in the engine, not in this screen.

Loggable unit
250 mL
Daily cap
5,000 mL
Cooldown between entries
30 seconds

Every line on this page is about the protocol and what was logged. None of it is a claim about your body.

```