Agentic UI/AgentRunContainer

AgentRunContainer

에이전트 워크플로 실행을 감싸는 컨테이너 컴포넌트입니다. 실행 상태를 시각화하고 취소/재시도 액션을 제공합니다.

Installation

bash
npx axis-cli add agent-run-container

Usage

실행 중

세미나 수집 워크플로

외부 소스에서 세미나 정보를 수집합니다.

데이터 수집
분석 중
결과 저장

현재 OnOffMix에서 데이터를 수집하고 있습니다...

처리 중...
tsx
import { AgentRunContainer } from '@ax/ui'

export function Example() {
  return (
    <AgentRunContainer
      runId="run-001"
      title="데이터 수집 워크플로"
      description="외부 소스에서 세미나 정보를 수집합니다."
      status="running"
      onCancel={() => console.log('취소')}
    >
      {/* 워크플로 내용 */}
    </AgentRunContainer>
  )
}

Status Variants

대기 중

대기 중 상태

워크플로가 시작되지 않았습니다.

실행 중

실행 중 상태

워크플로가 실행 중입니다.

완료

완료 상태

워크플로가 성공적으로 완료되었습니다.

오류

오류 상태

워크플로 실행 중 오류가 발생했습니다.

일시 중지

일시 중지 상태

워크플로가 일시 중지되었습니다.

tsx
// 대기 중
<AgentRunContainer
  runId="run-001"
  title="워크플로"
  status="idle"
/>

// 실행 중
<AgentRunContainer
  runId="run-002"
  title="워크플로"
  status="running"
  onCancel={() => {}}
/>

// 완료
<AgentRunContainer
  runId="run-003"
  title="워크플로"
  status="completed"
/>

// 오류
<AgentRunContainer
  runId="run-004"
  title="워크플로"
  status="error"
  onRetry={() => {}}
/>

// 일시 중지
<AgentRunContainer
  runId="run-005"
  title="워크플로"
  status="paused"
/>

Props

PropTypeDefaultDescription
runId*string-실행 ID
sessionIdstring-세션 ID
title*string-워크플로 제목
descriptionstring-워크플로 설명
status*RunStatus-실행 상태 (idle | running | completed | error | paused)
onCancel() => void-취소 핸들러 (running 상태에서 표시)
onRetry() => void-재시도 핸들러 (error 상태에서 표시)
childrenReact.ReactNode-하위 컴포넌트

RunStatus Type

tsx
type RunStatus = 'idle' | 'running' | 'completed' | 'error' | 'paused'