@bernierllc/nevar-loop-monitor-ui

React components for monitoring and managing active Nevar rule loops, including resource usage gauges and emergency kill controls.

Installation

npm install @bernierllc/nevar-loop-monitor-ui

Usage

import {
  ActiveLoopsList,
  LoopDetailView,
  LoopResourceGauge,
  LoopKillButton,
} from '@bernierllc/nevar-loop-monitor-ui';

function LoopMonitor({ loops, onKill }) {
  const [selectedLoop, setSelectedLoop] = useState(null);

  return (
    <div>
      <ActiveLoopsList
        loops={loops}
        onSelectLoop={(loop) => setSelectedLoop(loop)}
      />

      {selectedLoop && (
        <LoopDetailView
          loop={selectedLoop}
          config={selectedLoop.config}
          heartbeats={selectedLoop.heartbeats}
          onKill={onKill}
        />
      )}

      <LoopResourceGauge
        label="Iterations"
        current={250}
        max={1000}
        warningThreshold={0.8}
      />

      <LoopKillButton
        loopId="loop-123"
        status="running"
        onKill={onKill}
      />
    </div>
  );
}

API

ActiveLoopsList

Displays a list of currently active loops with uptime information.

| Prop | Type | Description | |------|------|-------------| | loops | LoopHandle[] | Active loop handles to display. | | onSelectLoop | (loop: LoopHandle) => void | Called when a loop is selected from the list. |

LoopDetailView

Detailed view of a single loop showing configuration, heartbeat history, resource gauges, and a kill button.

| Prop | Type | Description | |------|------|-------------| | loop | LoopHandle | The loop to display. | | config | LoopConfig | Loop configuration (interval, max iterations, etc.). | | heartbeats | HeartbeatEntry[] | Optional heartbeat history entries. | | maxIterations | number | Maximum iterations for the resource gauge. Defaults to 1000. | | onKill | (loopId: string) => void | Called when the kill button is confirmed. |

LoopResourceGauge

Visual gauge showing current vs. maximum resource usage with a warning threshold.

| Prop | Type | Description | |------|------|-------------| | label | string | Label for the gauge. | | current | number | Current resource usage value. | | max | number | Maximum resource capacity. | | unit | string | Optional unit suffix. | | warningThreshold | number | Ratio (0-1) at which the gauge shows a warning state. Defaults to 0.8. |

LoopKillButton

Button with confirmation step for terminating a running loop. Disabled when the loop is already killed or completed.

| Prop | Type | Description | |------|------|-------------| | loopId | string | ID of the loop to kill. | | status | 'running' \| 'paused' \| 'killed' \| 'completed' | Current loop status. | | onKill | (loopId: string) => void | Called after the user confirms the kill action. |

Integration Documentation

Logger Integration

As a UI package, @bernierllc/nevar-loop-monitor-ui does not directly integrate with @bernierllc/logger. Logging is handled by the service-layer packages that power the data these components display.

NeverHub Integration

As a UI package, @bernierllc/nevar-loop-monitor-ui does not directly integrate with @bernierllc/neverhub-adapter. NeverHub registration is handled at the service layer.

License

Copyright (c) 2025 Bernier LLC. All rights reserved.