StepIndicator

AI 에이전트의 워크플로 단계를 시각적으로 표시하는 컴포넌트입니다.

Installation

bash

npx axis-cli add step-indicator

Interactive Demo

데이터 수집

AI 분석

결과 생성

사용자 검토

Vertical (Default)

데이터 수집(1.2s)

AI 분석(2.6s)

결과 생성

검토

tsx

import { StepIndicator } from '@ax/ui'

const steps = [
  { id: '1', label: '데이터 수집', status: 'completed', duration: 1200 },
  { id: '2', label: 'AI 분석', status: 'running' },
  { id: '3', label: '결과 생성', status: 'pending' },
  { id: '4', label: '검토', status: 'pending' },
]

export function Example() {
  return <StepIndicator steps={steps} currentStepIndex={1} />
}

Horizontal

수집

분석

생성

검토

tsx

<StepIndicator
  steps={steps}
  currentStepIndex={2}
  orientation="horizontal"
/>

Status Types

○pending

대기 중

⟳running

실행 중

✓completed

완료됨

✕error

오류 발생

⏭skipped

건너뜀

StepIndicator Props

Prop	Type	Default	Description
`steps*`	`Step[]`	-	단계 목록
`currentStepIndex*`	`number`	-	현재 단계 인덱스 (0-indexed)
`orientation`	`"horizontal" \| "vertical"`	"vertical"	표시 방향
`compact`	`boolean`	false	컴팩트 모드

Step Object

Prop	Type	Default	Description
`id*`	`string`	-	단계 고유 ID
`label*`	`string`	-	단계 레이블
`status*`	`"pending" \| "running" \| "completed" \| "error" \| "skipped"`	-	단계 상태
`duration`	`number`	-	실행 시간 (ms)
`message`	`string`	-	추가 메시지