Hitesh

Dead man's switch

Component

About

A train cab's vigilance control for supervised agent runs: the run keeps going only while someone checks in. Miss the window and it warns, then pauses. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dead man's switch to your project and fits it to your theme.

Code

How Dead man's switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { Vigilance, VigilanceButton, VigilanceLamps, VigilanceTimer } from "@/components/ui/vigilance"

/** A supervised agent run: it keeps going only while you check in every 12 seconds. */
export function VigilanceAgent() {
  const [log, setLog] = React.useState("Agent running with supervision.")
  return (
    <div className="flex flex-col items-center gap-4">
      <Vigilance
        aria-label="Supervision"
        interval={12000}
        onTrip={() => setLog("No check-in: the agent paused before its next action.")}
        onResume={() => setLog("Resumed. The agent carries on.")}
        onCheckIn={() => setLog("Checked in.")}
      >
        <VigilanceLamps />
        <VigilanceTimer />
        <VigilanceButton />
      </Vigilance>
      <p className="max-w-xs text-center text-sm text-muted-foreground">{log}</p>
    </div>
  )
}

export default VigilanceAgent

Dependencies

More by Hitesh

View all
  • Wallet

    Wallet

    8
  • Kbd

    Kbd

    4
  • Number wheel

    Number wheel

    4
  • Badge

    Badge

    2
  • Icon key

    Icon key

    1
  • Gauge and dial

    Gauge and dial

  • Ledger

    Ledger

  • Preset keys

    Preset keys

Explore more

Part of Bevel — browse the full library on 21st.dev.