v0.1.0

<hf-graph>Custom elementAgentFree

Agent graph

Agent workflow graph that plays a run from lead agent to planner, three parallel agents and a reviewer, with light along live edges.

View as Markdown

<hf-graph>· loading

Trypress Run.

Playground

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

Loading <hf-graph>

Props

labelremounts

autoplayremounts

<HfGraph label="Ultracode workflow" />

Installation

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

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

Usage

import { HfGraph } from "@/components/lumesec/hf-graph";

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

Ultracode’s lead agent hands off to a planner, three agents in parallel and a reviewer. Live edges stream light with packets, running nodes get a comet halo, and narrow screens switch to a vertical layout.

API reference

Attributes

labelReact proplabelTypestringDefaultUltracode workflow

Heading text. Read once on connect.

autoplayReact propautoplayTypebooleanDefaultfalse

Presence attribute. Starts a run 800 ms after the element connects.

Events

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

doneReact proponDoneDetail{}

Fires when the reviewer finishes a run.

Methods

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

run(): Promise<void>

Plays one simulated run of about five seconds and resolves when it ends. Calls during a run return at once and do nothing.

Accessibility

The status next to the heading is an aria-live="polite" region with messages such as Orchestrating, 3 agents in parallel and Done in 5.1s.
Node labels are text; their idle, running and done states are shown only by colour and a data-s attribute.
The Run button is disabled during a run.
Edges, packets and halos are drawn on an aria-hidden canvas.
Reduced motion: each step waits 60 ms so a run finishes almost at once, and no packets travel along live edges.

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, --card, --foreground, --lumesec, --lumesec-success and --muted-foreground.

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

Notes

The graph, labels and timings are built-in demo data; step durations include some randomness.
Below 520px of host width the layout switches to vertical and the stage grows from 196px to 262px tall.

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-tree>

Changed fileshf-tree

<hf-redact>

PII redactionhf-redact

Was this page helpful?

Related