Cluster status grid

In review

Live · web

Load preset: node-3 walks the gauge band ladder

IdleBusyCritical

node-1 · GB10onlineLLM · prod

Mem87 / 119 GB

GPU77%

3 modelstensor ×2

node-2 · GB10onlineLLM · sandbox

Mem62 / 119 GB

GPU16%

embeddings

node-3 · GB10onlinecreative

Mem86 / 119 GB

Jobs2 queued

8 models

node-4 · GB10downcreative

Last seen41m ago

unreachable

Node-3 memory 86 / 119 GB. The pressure bar re-tones by the shared thresholds (<.60 cyan · <.85 amber · ≥.85 red). The island is live.

The fleet at a glance (WS4, agent-console epic): NockerlClusterGrid is a pure layout shell (a responsive auto-fill mosaic), and NockerlNodeCell is the tile, a composition of shipped parts with no new visual grammar:

• Health lives in the StatusDot: success = online, warning = degraded, error = down. The card surface stays neutral (law §6: never a tinted card, never a rail).
• Metrics read mono + tabular so a scanning wall doesn’t jitter. Each row can carry a Sparkline trend or a ProgressBar pressure bar toned by the ratified gauge band ladder, the same thresholds as the context gauge (cyan < .60 → amber < .85 → red). ProgressTrack gained the warning tone for the amber step (additive).
• Roles and counts ride soft Badges in the header and the open footer slot.

Web-only by scope

The cluster wall is a web surface. Native consoles have no equivalent. Web-first on the shared tokens and laws.

Code

TypeScript

import { NockerlClusterGrid, NockerlNodeCell, NockerlBadge } from '@dizyx/nockerl-react';

<NockerlClusterGrid ariaLabel="compute cluster">
  <NockerlNodeCell
    name="node-1 · GB10"
    status="success"          // the shared StatusDot ladder, health in the dot
    statusLabel="online"
    badge="LLM · prod"
    metrics={[
      { label: 'Mem', value: '87 / 119 GB', ratio: 0.73 },  // pressure bar, gauge-band toned
      { label: 'GPU', value: '77%', series: gpuTrend },      // sparkline trend
    ]}
    footer={<NockerlBadge label="3 models" tone="neutral" variant="soft" />}
  />
  {/* …one cell per node */}
</NockerlClusterGrid>

Parameters

Prop	Type	Default	Description
children *	ReactNode	n/a	The node tiles (NockerlNodeCell children).
ariaLabel	string	'Cluster status'	Accessible name for the mosaic (role="group").
className	string	n/a

Prop	Type	Default	Description
name *	string	n/a	The node name ("node-1 · GB10").
status *	StatusKind	n/a	Node health on the shared status ladder, lives in the DOT, never the card.
statusLabel	string	n/a	Accessible health label ("online", "degraded"). Also shown beside the dot.
badge	string	n/a	Optional soft role badge ("GPU · prod").
metrics	NockerlNodeMetric[]	n/a	Metric rows, rendered in order.
footer	ReactNode	n/a	Open footer slot (chips, counts, an action).
className	string	n/a