Agent Progress

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-progress"/>;}

Custom steps

Provide an ordered steps array to define the sequence. The component derives the expanded size, remaining steps, current task and overall progress from that array.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-progress" example="custom"/>;}

Timing and completion

Use stepDuration to set each task’s duration. Once the last checkmark appears, completionDelay determines the pause before the component calls onFinished.

'use client';
import {AgentProgress} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <AgentProgress steps={['Read files','Build UI','Verify']} stepDuration={1800} completionDelay={500} autoRun onFinished={()=>console.info('Local sequence completed')}/>;}