Health Dashboard Viz

A Kubernetes-style health-probe dashboard. Toggleable dependencies on the left drive three derived probes — liveness (never inspects dependencies), readiness (degrades or fails as critical deps drop), and startup (waits for the model to finish loading). Three modes — scripted explore stages, predict multiple-choice rounds, and deeper challenge diagnostics — walk the visitor from "what does each probe do?" to "where does circuit-breaker state belong?".

Dependencies

Kubernetes Probes

LivenessHealthy

Process alive — never checks dependencies

ReadinessHealthy

ok LLM APIok Vector DBok GPU Memoryok Model Loadingok API Key

All dependencies operational — full capacity

StartupHealthy

Model loaded successfully — startup complete

All dependencies operational. Liveness confirms the process is alive. Readiness confirms the pod can handle traffic. Startup confirms initialization is complete.

1 / 5

Customize

Mode

starting modeexplore

Installation

npx shadcn@latest add https://craftbits.dev/r/health-dashboard-viz.json

Usage

import { HealthDashboardViz } from "@craft-bits/viz/health-dashboard-viz";
 
<HealthDashboardViz />

Swap in your own dependency set and probe derivation:

<HealthDashboardViz
  dependencies={[
    { id: "db",    label: "Postgres", onLabel: "Online", offLabel: "Down" },
    { id: "cache", label: "Redis",    onLabel: "Online", offLabel: "Down" },
  ]}
  deriveProbes={(toggles) => ({
    liveness: { status: "healthy", explanation: "Process alive" },
    readiness: {
      status: toggles.db ? "healthy" : "unhealthy",
      explanation: toggles.db ? "DB connected" : "Postgres offline",
    },
    startup: { status: "healthy", explanation: "Boot complete" },
  })}
/>

React to learner progress:

<HealthDashboardViz
  onModeComplete={(score) => console.log(`${score.mode}: ${score.correct}/${score.total}`)}
/>

Understanding the component

Three-column dashboard. Left column = toggleable dependency switches; right column = three probe cards with live status badges and explanation lines; legend below maps colour → state.
Pure derivation. deriveProbes(toggles) is a pure function returning one ProbeState per probe. Swap it to model different services (DB-backed, queue workers, sidecars) without rewriting the UI.
Explore mode. Scripted stages pin the toggles to canonical failure modes and surface a teaching line. The final stage is unlocked — toggle freely, narration updates via getNarration(toggles).
Predict mode. Multiple-choice "what does the probe do?" rounds. On reveal the dashboard snaps to the relevant toggle state, the discussed probe is outlined with an accent ring, and a tone-tinted narration explains why.
Challenge mode. Pure MCQ — no dashboard reveal. Deeper questions: deep health-check cost, where circuit-breaker state belongs, sizing startup probes, the restart-storm danger of liveness-as-dependency-check.
Status colours. healthy → cb-success, degraded → cb-warning, unhealthy → cb-error, loading → cb-accent. Probe cards glow in their status colour and animate transitions through the configured transition (default SPRINGS.snap).
Highlight + shake. highlightProbe outlines the probe being discussed. When readiness flips to unhealthy, the card shakes once — a teaching cue, not decoration.
Reduced motion. Under prefers-reduced-motion: reduce, every spring collapses to instant, the pulsing readiness dot stops, the startup progress bar holds at a static fill, and the shake / glow loops are suppressed.

Props

Prop	Type	Default	Description
`dependencies`	`HealthDashboardVizDependency[]`	RAG 5-dep set	Toggleable dependencies that drive the probes.
`deriveProbes`	`(toggles) => ProbeSnapshot`	Kubernetes-style	Pure function mapping toggles to the three probe states.
`getNarration`	`(toggles) => string`	built-in copy	Free-exploration narration on the unlocked final stage.
`exploreStages`	`HealthDashboardVizExploreStage[]`	5 scripted stages	Scripted explore stages. Final stage typically `{ locked: false }`.
`predictRounds`	`HealthDashboardVizPredictRound[]`	5 rounds	Multiple-choice prediction rounds.
`challengeRounds`	`HealthDashboardVizChallengeRound[]`	4 rounds	Multiple-choice challenge rounds.
`defaultMode`	`"explore" \| "predict" \| "challenge"`	`"explore"`	Mode visible on first render.
`transition`	`Transition`	`SPRINGS.snap`	Spring used for status / colour transitions.
`onModeChange`	`(mode) => void`	—	Fires when the active mode changes.
`onModeComplete`	`(score) => void`	—	Fires when a `predict` or `challenge` run completes.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

Mode tabs are real <button> elements with aria-pressed, ≥ 32×32 hit area, and visible focus rings.
Dependency switches use <button aria-pressed> and announce the on/off-label via aria-label ("LLM API: Connected" / "LLM API: Down").
Probe cards are tone-tinted but the status word is also rendered as text — colour is never the only signal.
A polite live region (aria-live="polite") narrates the active stage, question, or explanation so screen-reader users stay in sync.
Answer options are buttons with aria-pressed, sequential focus order, and tone-coded feedback after the round is checked.
Motion respects prefers-reduced-motion: reduce — every spring collapses to instant.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/systems/HealthDashboardViz.tsx). The source was a lesson component wrapped in the project's Widget chrome with hard dependencies on ModeStrip, ChallengeBtn, FeedbackBadge, ScoreDots, and STANDARD_MODES from ConstructionPrimitives, plus per-track palette tokens (--color-success-400, --color-warn-400, --color-error-400, --color-accent-400, --color-ink-100, …) and MICRO.tap / SPRINGS.snappy from @/lib/motion. The viz extract replaces every palette reference with var(--cb-*) semantic tokens, re-keys motion to canonical SPRINGS.snap / SPRINGS.smooth and scalar STAGGER from @craft-bits/core/motion, drops the Widget chrome in favour of a token-styled root the user can compose, inlines every chrome primitive (ModeButton, PrimaryButton, SecondaryButton, FeedbackBadge, ScoreDots, OptionList, NarrationBlock, DependencyToggle, ProbeCard, PulsingDot, DoneSummary) so there is no lesson-layer dependency, surfaces the dependency set / probe derivation / narration generator / explore stages / predict rounds / challenge rounds as props, and adds onModeChange / onModeComplete callbacks for lesson hosts to react to visitor progress.