Widget Components

Widget components for dashboards and data displays.

Prerequisites

Complete the installation
Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

`AddReplaceMinerDialog`

Modal for adding a new miner to a slot or swapping the existing one with a replacement unit.

agent-ready

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	✓	-	-
`onClose`	`VoidFunction`	✓	-	-
`selectedSocketToReplace`	`UnknownRecord \| undefined`		-	-
`selectedEditSocket`	`UnknownRecord \| undefined`		-	-
`currentDialogFlow`	`string \| undefined`		-	-
`isDirectToMaintenanceMode`	`boolean \| undefined`		-	-
`minersType`	`string \| undefined`		-	-
`isContainerEmpty`	`boolean \| undefined`		-	-

`BatchContainerControlsCard`

Bulk-controls card that applies start/stop/mode changes to multiple selected containers at once.

agent-ready

Props

Prop	Type	Default	Description
`isBatch`	`boolean`	-	-
`isCompact`	`boolean`	-	-
`connectedMiners`	`unknown`	-	-
`alarmsDataItems`	`TimelineItemData[]`	-	-
`onNavigate`	`(path: string) => void`	-	-

`BitdeerOptions`

Options panel for a Bitdeer container — exposes vendor-specific operating modes and thresholds.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`UnknownRecord \| undefined`		-	-

`BitdeerPumps`

Pump telemetry panel for a Bitdeer container showing per-pump RPM, flow, and alert states.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`UnknownRecord \| undefined`		-	-

`BitdeerSettings`

Settings tab for a Bitdeer container — vendor-specific configuration controls and limits.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`UnknownRecord \| undefined`		-	-

`BitdeerTankPressureCharts`

Stacked time-series of dielectric tank pressure for a Bitdeer immersion container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitdeerTankTempCharts`

Tank Temperature Charts for Bitdeer containers

agent-ready

Props

Prop	Type	Default	Description
`tankNumber`	`string \| number \| undefined`	-	Tank number (1 or 2)
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitMainBasicSettings`

General settings form for a BitMain container — naming, location, and power limits.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Container data

`BitMainControlsTab`

Controls tab for a BitMain container exposing start/stop, mode select, and emergency actions.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device`	✓	-	Device data

`BitMainCoolingSystem`

Cooling subsystem panel for a BitMain container — pumps, fans, and dry-cooler status.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Container data

`BitMainHydroLiquidTemperatureCharts`

Time-series charts of dielectric liquid temperature for a BitMain hydro-cooled container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitMainHydroSettings`

Settings form for a BitMain hydro-cooled container; flow, temperature, and pump configuration.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data

`BitMainImmersionControlBox`

Control box for a BitMain immersion container exposing tank, pump, and unit-level actions.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string \| undefined`	-	Box title
`leftContent`	`React.ReactNode`	-	Content for left column
`rightContent`	`React.ReactNode`	-	Content for right column
`bottomContent`	`React.ReactNode`	-	Content for bottom row
`secondary`	`boolean \| undefined`	-	Secondary variant (no border)
`className`	`string \| undefined`	-	Custom className

`BitMainImmersionPumpStationControlBox`

Pump-station control card for a BitMain immersion container with per-pump enable/disable.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string \| undefined`	-	Box title
`alarmStatus`	`boolean \| undefined`	-	Alarm/fault status
`ready`	`boolean \| undefined`	-	Ready status
`operation`	`boolean \| undefined`	-	Operation status
`start`	`boolean \| undefined`	-	Start status
`className`	`string \| undefined`	-	Custom className

`BitMainImmersionSettings`

Settings form for a BitMain immersion container — tank thresholds, pump curves, and limits.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data
`containerSettings`	`{ thresholds?: Record<string, unknown> \| undefined; } \| null \| undefined`		-	Container settings with custom thresholds

`BitMainImmersionSummaryBox`

Summary card for a BitMain immersion-cooled container: temps, pumps, power, and overall status.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	-
`containerSettings`	`BitMainImmersionSummaryBoxContainerSettings \| null \| undefined`		-	-

`BitMainImmersionSystemStatus`

Aggregated system-status card for a BitMain immersion container; rolls up subsystem health.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data

`BitMainImmersionUnitControlBox`

Per-unit control card inside a BitMain immersion container with start/stop and reset actions.

agent-ready

Props

Prop	Type	Default	Description
`title`	`string \| undefined`	-	Box title
`alarmStatus`	`boolean \| undefined`	-	Alarm/fault status
`frequency`	`number \| undefined`	-	Frequency value in Hz
`isDryCooler`	`boolean \| undefined`	-	Whether this is a dry cooler unit
`running`	`boolean \| undefined`	-	Whether the unit is running
`showFrequencyInLeftColumn`	`boolean \| undefined`	-	Show frequency in left column instead of right
`secondary`	`boolean \| undefined`	-	Secondary variant (no border)
`className`	`string \| undefined`	-	Custom className

`BitMainLiquidPressureCharts`

Time-series charts of dielectric liquid pressure across a BitMain immersion container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitMainLiquidTempCharts`

Time-series charts of dielectric liquid temperature across a BitMain immersion container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitMainPowerAndPositioning`

Power and physical-positioning settings for a BitMain container — circuits, phases, and rack slots.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Container data

`BitMainPowerCharts`

Time-series charts of per-phase power, voltage, and current draw for a BitMain container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`BitMainSupplyLiquidFlowCharts`

Time-series charts of supply-side coolant flow rates for a BitMain immersion container.

agent-ready

Props

Prop	Type	Default	Description
`tag`	`string \| undefined`	-	-
`chartDataPayload`	`ChartDataPayload \| undefined`	-	-
`chartTitle`	`string \| undefined`	-	-
`dateRange`	`{ start?: number \| undefined; end?: number \| undefined; } \| undefined`	-	-
`data`	`UnknownRecord[] \| undefined`	-	-
`timeline`	`string \| undefined`	-	-
`fixedTimezone`	`string \| undefined`	-	-
`height`	`number \| undefined`	-	-
`showLegend`	`boolean \| undefined`	-	-
`showRangeSelector`	`boolean \| undefined`	-	-
`rangeOptions`	`{ label: string; value: string; }[] \| undefined`	-	-
`footer`	`React.ReactNode`	-	-

`ContainerCharts`

Tabbed chart panel showing per-container hashrate, power, and temperature time series.

agent-ready

Props

Prop	Type	Required	Default	Description
`featureEnabled`	`boolean \| undefined`		`true`	When false, shows an empty state (feature gate).
`disabledMessage`	`string \| undefined`		-	Message when `featureEnabled` is false
`combinations`	`ContainerChartCombinationOption[]`	✓	-	Options for the combination selector
`isLoadingCombinations`	`boolean \| undefined`		-	Loading state for combination options
`title`	`string \| undefined`		-	Section heading
`selectedCombination`	`string \| null \| undefined`		-	Controlled selected combination value
`defaultSelectedCombination`	`string \| null \| undefined`		-	Initial selection when uncontrolled
`onSelectedCombinationChange`	`((value: string \| null) => void) \| undefined`		-	-
`chartRawData`	`ChartEntry[] \| null \| undefined`		-	Raw overview stats rows passed to chart adapters
`isLoadingCharts`	`boolean \| undefined`		-	-
`getDatasetBorderColor`	`ContainerChartsDatasetBorderColorResolver \| undefined`		-	Optional per-dataset line colors after adapters run (e.g. demo or host branding).

`ContainerControlsBox`

Control panel for a single container — start/stop, mode select, and operator actions.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	-
`isBatch`	`boolean \| undefined`		-	-
`isCompact`	`boolean \| undefined`		-	-
`selectedDevices`	`Device[] \| undefined`		-	-
`pendingSubmissions`	`PendingSubmission[] \| undefined`		-	-
`alarmsDataItems`	`TimelineItemData[] \| undefined`		-	-
`tailLogData`	`UnknownRecord[] \| undefined`		-	-
`powerModesLog`	`UnknownRecord \| undefined`		-	-
`onNavigate`	`(path: string) => void`	✓	-	-

Per-socket controls card for the container detail view: powers the selected miner sockets on/off and shows their aggregate power / current. Reads the selected sockets from the devices store (populate…

advanced

Props

Prop	Type	Required	Default	Description
`isLoading`	`boolean`		-	-
`buttonsStates`	`ButtonsStates`		-	-

`ContainerFanLegend`

Legend strip describing fan states and colours used by the container fans visualisation.

agent-ready

Props

Prop	Type	Default	Description
`index`	`number \| null \| undefined`	-	Fan index/number to display
`enabled`	`boolean \| undefined`	-	Whether the fan is enabled/running
`className`	`string \| undefined`	-	Custom className

`ContainerFansCard`

Card displaying the array of cooling fans in a container with live state per fan.

agent-ready

Props

Prop	Type	Required	Default	Description
`fansData`	`PumpItem[] \| undefined`		-	-

`ContainerSelectionDialog`

Modal that lists containers and lets the operator pick one or many for a follow-up action.

agent-ready

Props

Prop	Type	Required	Default	Description
`miner`	`Device \| undefined`		-	-
`containers`	`Device[] \| undefined`		-	-
`isLoading`	`boolean \| undefined`		-	-
`open`	`boolean`	✓	-	-
`onClose`	`(value?: boolean \| undefined) => void`	✓	-	-

`ContainerWidgetCard`

Presentational summary card for a single container in the Site Overview widgets grid: a header row (title / alarms / power), then either an offline / error banner or the body (optional vendor content…

agent-ready

Props

Prop	Type	Required	Default	Description
`title`	`string`	✓	-	Container display name shown in the header row.
`power`	`number \| undefined`		-	Latest container power draw in watts (rendered in kW by the top row).
`powerUnit`	`string \| undefined`		-	Power unit label shown next to the reading.
`alarms`	`Partial<Record<AlarmPropKey, Alert[]>> \| undefined`		-	Per-category alarm badges for the header row.
`statsErrorMessage`	`string \| ErrorWithTimestamp[] \| null \| undefined`		-	Raw stats error surfaced as a tooltip in place of the power reading.
`summary`	`MinersSummaryParam[]`	✓	-	Pre-formatted miners-summary rows (label + display value incl. units).
`activity`	`ContainerActivityData \| undefined`		-	Miner-state activity counts for the embedded chart.
`isActivityLoading`	`boolean \| undefined`		-	Activity chart loading state.
`isActivityError`	`boolean \| undefined`		-	Activity chart error state.
`activityError`	`ContainerActivityError \| undefined`		-	Activity chart error payload.
`isOffline`	`boolean \| undefined`		-	Render the offline banner instead of the body.
`errorMessage`	`string \| undefined`		-	Container-level error message; renders an error banner instead of the body.
`flash`	`boolean \| undefined`		-	Critical-high alarm flash. Computed upstream (by the data hook) so the card stays presentational — never derive alarm s…
`vendorContent`	`React.ReactNode`		-	Optional vendor-specific content (supply-liquid / tanks / immersion / MicroBT boxes) rendered above the miners summary.…
`onClick`	`(() => void) \| undefined`		-	Invoked when the card is clicked (navigation is the caller's concern).
`className`	`string \| undefined`		-	-

`CostMetrics`

Three "$/MWh" tiles that summarise the cost-summary period. Order mirrors the OSS Cost page: All-in (highlighted), Energy, Operations.

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`CostSummaryDisplayMetrics`	✓	-	-

`DryCooler`

Dry-cooler subsystem panel showing inlet/outlet temperatures and fan-stage status.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`UnknownRecord \| undefined`		-	-

`EnabledDisableToggle`

Switch with confirmation that enables or disables a container, miner, or feature flag.

agent-ready

Props

Prop	Type	Required	Default	Description
`value`	`unknown`	✓	-	-
`tankNumber`	`string \| number`	✓	-	-
`isButtonDisabled`	`boolean`	✓	-	-
`isOffline`	`boolean`	✓	-	-
`onToggle`	`(params: EnabledDisableToggleCbParams) => void`	✓	-	-

`ExplorerDetail`

Per-type Explorer detail panel. Reads the selection the [**useExplorerSelection**](/reference/ui/hooks/op-centre/#useexplorerselection) bridge writes into devicesStore and composes the matching cards:

agent-ready

Props

Prop	Type	Required	Default	Description
`deviceType`	`DeviceExplorerDeviceType`	✓	-	The active Explorer tab — selects which per-type panel renders.
`onNavigate`	`((path: string) => void) \| undefined`		-	Router navigate used by alarm rows to deep-link into `/alerts/:id`.
`isCompact`	`boolean \| undefined`		-	Compact layout for the narrower Explorer detail column.

`FireStatusBox`

Fire Status Box Component x Displays fire safety and environmental monitoring status.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`{ smokeDetector: string \| number; waterIngressDetector: string \| number; coolingFanStatus: string \| number; } \| undefined`		-	Device data

`GaugeChartComponent`

Single-needle gauge chart used inside container settings for thresholded percentage values.

agent-ready

Props

Prop	Type	Required	Default	Description
`max`	`number`	✓	-	Maximum value for the gauge
`value`	`number`	✓	-	Current value
`label`	`string \| undefined`		-	`Label`/title for the chart
`unit`	`string`	✓	-	Unit of measurement
`chartStyle`	`React.CSSProperties \| undefined`		-	Custom chart style
`colors`	`string[] \| undefined`		-	Arc colors in HEX format
`hideText`	`boolean \| undefined`		-	Hide the percentage text inside the chart
`height`	`number \| undefined`		-	Chart height in pixels
`className`	`string \| undefined`		-	Custom className

`GenericDataBox`

Reusable labelled stat box used by container summary panels for one-off numeric values.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`DataItem[] \| undefined`		-	Array of data items to display
`fallbackValue`	`unknown`		-	Fallback value when value is undefined

`MaintenanceDialogContent`

Body of the maintenance dialog — captures the work-order details before applying the maintenance flag.

agent-ready

Props

Prop	Type	Required	Default	Description
`selectedEditSocket`	`Partial<SelectedEditSocket>`		-	-
`onCancel`	`VoidFunction`		-	-

`MicroBTCooling`

Cooling subsystem panel for a MicroBT container — pumps, fans, and coolant flow telemetry.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data

`MicroBTSettings`

Settings form for a MicroBT container with vendor-specific operating limits.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data
`containerSettings`	`{ thresholds?: Record<string, unknown> \| undefined; } \| null \| undefined`		-	Container settings with custom thresholds

`MicroBTWidgetBox`

Summary card for a MicroBT-equipped container showing pumps, fans, and operating mode.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	-

`MinerChip`

Selectable chip representing a single miner; surfaces id, slot, and current state with click handling.

agent-ready

Props

Prop	Type	Required	Default	Description
`index`	`number`	✓	-	-
`frequency`	`{ current: number; }`	✓	-	-
`temperature`	`{ avg: number; min: number; max: number; }`	✓	-	-

`MinerChipsCard`

Card listing every miner in a container as <[**MinerChip**](/reference/ui/components/widgets/#minerchip)>s for at-a-glance selection.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`ContainerStats`	✓	-	-

`MinerControlsCard`

Action card for a single miner: power, reboot, mode select, and maintenance entry points.

agent-ready

Props

Prop	Type	Required	Default	Description
`buttonsStates`	`Record<string, boolean \| undefined>`	✓	-	-
`isLoading`	`boolean`	✓	-	-
`showPowerModeSelector`	`boolean \| undefined`		-	-

`MinerInfoCard`

Info card for one miner — serial, model, firmware, location, and recent activity summary.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`InfoItem[]`		-	-
`label`	`string`		-	-

`MinerMetricCard`

Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.

agent-ready

Props

Prop	Type	Default	Description
`primaryStats`	`StatItem[]`	-	Primary statistics (efficiency, hashrate, temperature, frequency, consumption)
`secondaryStats`	`StatItem[]`	-	Secondary statistics to display in grid
`showSecondaryStats`	`boolean`	-	Whether to show secondary stats section

`MinerPowerModeSelectionButtons`

Segmented control letting an operator switch a miner between low / normal / turbo power modes.

agent-ready

Props

Prop	Type	Default	Description
`selectedDevices`	`Device[] \| undefined`	-	-
`setPowerMode`	`((devices: Device[], mode: string) => void) \| undefined`	-	-
`connectedMiners`	`Device[] \| undefined`	-	-
`powerModesLog`	`UnknownRecord \| undefined`	-	-
`disabled`	`boolean \| undefined`	-	-
`hasMargin`	`boolean \| undefined`	-	-

`MinersActivityChart`

Per-status miner counts (online / offline / faulted / power-mode). Renders as coloured indicator dots (indicators) or tinted status tiles (tiles).

agent-ready

Props

Prop	Type	Default	Description
`data`	`MinersActivityData`	-	-
`large`	`boolean`	-	-
`isLoading`	`boolean`	-	-
`isError`	`boolean`	-	-
`error`	`MinerActivityChartErrorProp \| null`	-	-
`showLabel`	`boolean`	-	-
`isDemoMode`	`boolean`	-	-
`variant`	`MinersActivityVariant`	-	`indicators` (default) renders coloured dots; `tiles` renders tinted status tiles.

`MinersSummaryBox`

Headline card summarising miner counts by state (online, offline, faulted) for one container.

agent-ready

Props

Prop	Type	Required	Default	Description
`params`	`MinersSummaryParam[]`	✓	-	Array of label-value pairs to display in a 2-column grid
`className`	`string \| undefined`		-	Additional CSS class name

`PositionChangeDialog`

Modal that moves a miner to a different rack slot, validating the destination first.

agent-ready

Props

Prop	Type	Required	Default	Description
`open`	`boolean`	✓	-	-
`onClose`	`(currentDialogFlow: string, isDontReset?: boolean \| undefined) => void`	✓	-	-
`selectedSocketToReplace`	`UnknownRecord \| undefined`		-	-
`selectedEditSocket`	`UnknownRecord \| undefined`		-	-
`onChangePositionClicked`	`VoidFunction \| undefined`		-	-
`onPositionChangedSuccess`	`VoidFunction \| undefined`		-	-
`isContainerEmpty`	`boolean \| undefined`		-	-
`dialogFlow`	`string \| undefined`		-	-

`PowerMeters`

Per-circuit power-meter panel showing live kW, kWh, and power-factor readings.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	Device data

`PumpBox`

Single-pump status card with RPM, flow, and fault state for one immersion-cooling pump.

agent-ready

Props

Prop	Type	Required	Default	Description
`pumpTitle`	`string`	✓	-	-
`pumpItem`	`PumpItem \| undefined`		-	-

`RemoveMinerDialog`

Confirmation modal for removing a miner from a slot with an optional reason capture.

agent-ready

Props

Prop	Type	Required	Default	Description
`headDevice`	`Device \| undefined`		-	-
`isRemoveMinerFlow`	`boolean`	✓	-	-
`onCancel`	`VoidFunction`	✓	-	-

`SecondaryStatCard`

Compact stat tile rendered alongside a primary stat to provide supporting context.

agent-ready

Props

Prop	Type	Default	Description
`name`	`string \| undefined`	-	Stat name/label
`value`	`string \| number \| undefined`	-	Stat value
`className`	`string \| undefined`	-	Custom className

`SingleStatCard`

Hero stat tile rendering one big number with a label and optional delta indicator.

agent-ready

Props

Prop	Type	Default	Description
`name`	`string \| undefined`	-	Stat name/label
`subtitle`	`string \| undefined`	-	Subtitle text
`value`	`string \| number \| null \| undefined`	-	Stat value
`unit`	`string \| undefined`	-	Unit of measurement
`color`	`string \| undefined`	-	Color for flash/border
`flash`	`boolean \| undefined`	-	Enable flash animation
`superflash`	`boolean \| undefined`	-	Enable superflash animation (faster)
`variant`	`SingleStatCardVariant \| undefined`	-	Card variant
`row`	`boolean \| undefined`	-	Row layout

`Socket`

Per-socket panel showing the miner slotted into a container slot, its state, and quick actions.

agent-ready

Props

Prop	Type	Default	Description
`current_a`	`number \| null \| undefined`	-	Current in amperes
`power_w`	`number \| null \| undefined`	-	Power in watts
`enabled`	`boolean \| undefined`	-	Whether socket is enabled
`socket`	`number \| null \| undefined`	-	`Socket` number/index
`selected`	`boolean \| undefined`	-	Whether socket is selected
`innerRef`	`React.ForwardedRef<HTMLDivElement> \| undefined`	-	Forwarded ref for the container
`miner`	`Miner \| null \| undefined`	-	Miner data
`heatmap`	`Heatmap \| null \| undefined`	-	`Heatmap` configuration
`isEditFlow`	`boolean \| undefined`	-	Whether in edit flow mode
`clickDisabled`	`boolean \| undefined`	-	Whether click is disabled
`cooling`	`boolean \| undefined`	-	Cooling status
`isEmptyPowerDashed`	`boolean \| undefined`	-	Whether to show dashed border for empty power
`isContainerControlSupported`	`boolean \| undefined`	-	Whether container control is supported
`pdu`	`Pdu \| undefined`	-	PDU information

`StatsGroupCard`

Card grouping multiple <[**SingleStatCard**](/reference/ui/components/widgets/#singlestatcard)>s or <[**SecondaryStatCard**](/reference/ui/components/widgets/#secondarystatcard)>s under a shared title.

agent-ready

Props

Prop	Type	Required	Default	Description
`miners`	`Device[] \| DeviceData[] \| undefined`		-	Array of miners to display stats for
`isMinerMetrics`	`boolean \| undefined`		-	Whether to show miner metrics card layout

`StatusItem`

Compact labelled status pill used inside container panels for boolean or enum readings.

agent-ready

Props

Prop	Type	Required	Default	Description
`label`	`string \| undefined`		-	Status label text
`status`	`"warning" \| "normal" \| "fault" \| "unavailable" \| undefined`		-	Status type

`SupplyLiquidBox`

Status card for the dielectric supply tank — level, temperature, and pressure readings.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`Device \| undefined`		-	-
`containerSettings`	`SupplyLiquidBoxContainerSettings \| null \| undefined`		-	-

`TankRow`

Single tank-list row used inside <[**TanksBox**](/reference/ui/components/widgets/#tanksbox)> to display per-tank temperature and pressure.

agent-ready

Props

Prop	Type	Required	Default	Description
`label`	`string`	✓	-	-
`temperature`	`number`	✓	-	-
`unit`	`string`	✓	-	-
`oilPumpEnabled`	`boolean`	✓	-	-
`waterPumpEnabled`	`boolean`	✓	-	-
`color`	`string`	✓	-	-
`flash`	`boolean \| undefined`		-	-
`tooltip`	`string \| undefined`		-	-
`pressure`	`Partial<{ value: number; flash: boolean; color: string; tooltip: string; }>`	✓	-	-

`TanksBox`

Card listing all tanks inside an immersion container with per-tank temperature and pressure rows.

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`{ oil_pump: Tank[]; water_pump: WaterPump[]; pressure: TanksBoxPressure[]; } \| undefined`		-	-

`WidgetTopRow`

Compact header row used at the top of container / miner widgets — shows the title, per-category alarm badges, and the current power reading (or an error tooltip).

agent-ready

Props

Prop	Type	Required	Default	Description
`title`	`string`	✓	-	-
`power`	`number \| undefined`		-	-
`unit`	`string \| undefined`		-	-
`statsErrorMessage`	`string \| ErrorWithTimestamp[] \| null \| undefined`		-	-
`alarms`	`Partial<Record<AlarmPropKey, Alert[]>> \| undefined`		-	-
`className`	`string \| undefined`		-	-

Widget Components

On this page