Agent run · Pixel HD component

<hf-run>· loading

Trypress Run again.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-run>

Props

stepsremounts

labelremounts

autoplayremounts

failremounts

<HfRun
  steps="Plan the approach|Read 14 files|Edit src/auth.ts|Run test suite|Write summary"
  label="Agent run"
  autoplay
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-run

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-run.json

Usage

import { HfRun } from "@/components/lumesec/hf-run";

export function Example() {
  return (
    <HfRun autoplay />
  );
}

Behaviour

Steps with a spinning arc while running, a check carved out of a disc when done, and light flowing down the connector into the next step. Header shows elapsed time and tokens.

API reference

Attributes

stepsReact propstepsTypestringDefaultPlan the approach|Read 14 files|Edit src/auth.ts|Run test suite|Write summary

Step labels separated by |. Re-read at the start of each run.

labelReact proplabelTypestringDefaultAgent run

Title in the header. Read once on connect.

autoplayReact propautoplayTypebooleanDefaultfalse

Presence attribute. Starts a run 0.7 s after the element first connects.

failReact propfailTypenumber

Zero-based index of the step that fails; the run stops there. Without the attribute every step succeeds.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

stepReact proponStepDetail{ index: number, label: string, status: "running" | "done" | "fail" }

Fires when a step starts and when it finishes.

doneReact proponDoneDetail{ ok: boolean, elapsed: number }

Fires when the run ends. ok is false when a step failed; elapsed is in seconds.

Methods

Call them on the element, for example through a React ref.

run(): Promise<void>

Resets the list and plays the simulated run. Ignored while a run is in progress. Same as the Run button.

reset()

Rebuilds the step list from steps and clears the header counters.

Properties

steps (read-only)Typestring[]

Step labels parsed from the attribute.

Accessibility

The step list is an aria-live="polite" region; each finished step adds its duration or failed as text.
Status icons are drawn on an aria-hidden canvas; pending and failed steps are also shown by text colour.
The Run button is a native button, disabled while running and relabelled Running…, Run again or Retry.
Reduced motion: each simulated step lasts 0.15 s, the spinner, connector flow and label shimmer stand still, finished icons do not pop, and durations appear without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --destructive, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-danger, --ui-fg, --ui-font, --ui-mono, --ui-muted and --ui-raised.

Notes

Runs are simulated: each step lasts a random 0.6 to 1.7 s and the token count is generated. There is no API for reporting real progress.
elapsed in done, the final header time and the token count are derived from the clock when the run ends, so they are correct even if the element was off screen during the run.

<hf-effort>

Effort sliderhf-effort

<hf-modes>

Mode pickerhf-modes

<hf-stream>

Streaming replyhf-stream

<hf-button>

Buttonhf-button

Related