Widget Components

Widget components for dashboards and data displays.

Prerequisites

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

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`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.

Main container for Bitdeer cooling system options. Displays dry cooler and pumps components.

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.

Displays exhaust fan status using an indicator.

agent-ready

Props

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

`BitdeerSettings`

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

Displays container parameter settings and editable threshold forms for Bitdeer containers with oil temperature and tank pressure monitoring.

Includes: - Container parameter display (MAC address, serial number, etc.) - Editable threshold forms for oil temperature and tank pressure - Color-coded alerts and flash indicators - Sound alert configuration

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

Displays oil and water temperature readings (hot and cold) for a specific tank.

Features: - Tank Oil TempL (Cold) - Yellow line (4px) - Tank Oil TempH (Hot) - Violet line - Tank Water TempL (Cold) - Blue line - Tank Water TempH (Hot) - Sky Blue line

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.

Main settings view displaying: - Cooling system status (pumps and fans) - Power distribution - GPS positioning

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.

Displays container controls including: - Container fan status - Tank levels (A, B, C, D) - GPS location (latitude/longitude)

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.

Displays the status of cooling system components including: - Circulating pump - Fluid infusion pump - Fans (1-2) - Cooling tower fans (1-3)

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.

Displays secondary liquid supply temperature readings (Temp1 and Temp2) for Bitmain Hydro containers.

Features: - Sec. Liquid supply Temp1 - Sky Blue line - Sec. Liquid supply Temp2 - Violet line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current temperature display

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.

Main settings view for BitMain Hydro containers displaying: - Basic settings (cooling system, power, positioning) - Threshold configuration forms (water temperature, pressure)

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.

A flexible container component with configurable columns and optional bottom content. Used for displaying control information in a structured layout.

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.

Displays pump station status including: - Alarm/Normal status - Ready state - Operating state - Started state

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.

Settings form for BitMain immersion containers with temperature threshold configuration.

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.

Displays system status information including: - Server start permission - Connection status

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.

Displays supply and return liquid pressure readings for Bitmain containers. Converts pressure values from MPa to bar for display.

Features: - Supply Liquid Pressure - Sky Blue line - Return Liquid Pressure - Violet line - Automatic MPa to bar conversion - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current pressure display

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.

Displays supply and return liquid temperature readings for Bitmain containers.

Features: - Supply Liquid Temp - Sky Blue line - Return Liquid Temp - Violet line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current temperature display

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.

Displays power distribution and GPS location information: - Distribution box #1 and #2 power consumption - Latitude and longitude coordinates with direction

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.

Displays power consumption for Bitmain containers with distribution boxes. Shows total power and individual power for each distribution box. Automatically calculates total power from the sum of both boxes and formats the display units (kW/MW) based on the power magnitude.

Features: - Total Power - Sky Blue line (sum of both boxes) - Dist. Box 1 Power - Violet line - Dist. Box 2 Power - Red line - Interactive legend for toggling series - Timeline selector (1h, 6h, 24h, 7d, 30d) - Current power consumption display with auto unit (W/kW/MW) - Automatic kW to W conversion for chart display

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.

Displays supply liquid flow rate for Bitmain containers in cubic meters per hour (m³/h).

Features: - Supply Liquid Flow - Sky Blue line - Interactive timeline selector (1h, 6h, 24h, 7d, 30d) - Current flow rate display - Optional legend and range selector

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`	✓	-	-

`ContainerControlsCard`

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 (populated by deriveSelectedSockets) and queues switchSocket drafts. Container-level "power all sockets" lives on BatchContainerControlsCard; this card drives an explicit socket selection, which the flat Explorer list does not yet surface (a container-PDU grid is the follow-on) — hence advanced rather than agent-ready.

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.

Displays a single fan status with number and icon.

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.

Displays a grid of fan status indicators. Shows fan number and on/off state with icon.

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, a miners summary, and a miner-activity chart).

Fully props-driven — no data fetching, formatting, or alarm math. The owning feature/hook shapes every value (including flash and summary).

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 state inside this component.
`vendorContent`	`React.ReactNode`		-	Optional vendor-specific content (supply-liquid / tanks / immersion / MicroBT boxes) rendered above the miners summary. Kept as a slot so the generic card carries no per-model branching.
`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.

Displays dry cooler status with fans and associated pumps. Shows two cooler groups with fan status indicators and pump controls.

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 bridge writes into devicesStore and composes the matching cards:

container: BatchContainerControlsCard (batch when >1 selected) with the connected-miner power-mode controls and the active-alarms box, plus StatsGroupCard for the connected miners and ContainerControlsCard when an explicit per-socket selection exists. - miner: MinerControlsCard write controls, MinerInfoCard read-only info rows, MinerChipsCard per-chip stats, StatsGroupCard aggregate, and the active-alarms box. - cabinet: read-only CabinetDetailCard — powermeter + temperature readings and the LV-cabinet warnings timeline.

Writes queue into the actions draft store; submission stays gated behind the ActionsSidebar.

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.

Displays a value as a gauge/speedometer chart with label and unit.

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.

Displays a table of label-value-unit rows.

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.

Displays cooling system status for MicroBT containers including: - Cycle pump status - Main circulation pump (status, switch, speed) - Cooling fan (status, switch, speed) - Make-up water pump (status, switch, fault)

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.

Settings form for MicroBT containers with temperature threshold configuration.

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>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.

Displays key metrics for a miner including: - Efficiency (fixed position top-right) - Hash rate, Temperature - Frequency, Consumption - Optional secondary stats in grid

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.

Displays mining summary parameters in a 2-column grid layout. Accepts pre-formatted values - consumers handle data formatting.

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.

Displays power meter readings for container devices including: - Communication status - Voltage measurements (A-B, B-C, C-A) - Power factor and frequency - Active and apparent power - Energy consumption

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.

Displays a secondary statistic with a name and value in a card format.

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.

Displays a single statistic with optional animations and variants.

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.

Displays a socket in a PDU with power/current info, miner status, and heatmap visualization

Features: - Power and current display - Miner status indicators - Heatmap mode with temperature/hashrate - Cooling fan indicator - Socket enable/disable states - Add miner flow

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>s or <SecondaryStatCard>s under a shared title.

Displays aggregated statistics for selected miners: - Hash rate, Temperature, Frequency, Consumption - Optional: Power mode, Uptime, LED, Status (for single miner)

Can render in two modes: - Miner Metrics: Uses MinerMetricCard layout - Stats Grid: Uses SingleStatCard and SecondaryStatCard in rows

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.

Displays a label with a colored status indicator.

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> 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.

Displays tank rows with temperature, pressure, and oil/water pump status.

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