Agentic UI/ApprovalDialog

ApprovalDialog

AI 에이전트의 작업을 사용자가 승인/거부할 수 있는 다이얼로그입니다. Human-in-the-Loop 패턴 구현에 사용됩니다.

Installation

bash

npx axis-cli add approval-dialog

Interactive Demo

위험도:

Usage

tsx

import { ApprovalDialog } from '@ax/ui'

const changes = [
  { label: 'Button.tsx', type: 'create', after: '새 버튼 컴포넌트' },
  { label: 'index.ts', type: 'update', before: '기존 export', after: 'export 추가' },
  { label: 'old-button.tsx', type: 'delete', after: '삭제됨' },
]

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>변경 사항 검토</Button>
      <ApprovalDialog
        open={open}
        onOpenChange={setOpen}
        title="코드 변경 승인"
        description="AI가 다음 변경 사항을 적용하려고 합니다."
        impact="medium"
        changes={changes}
        onApprove={() => { console.log('Approved'); setOpen(false) }}
        onReject={(reason) => { console.log('Rejected:', reason); setOpen(false) }}
      />
    </>
  )
}

Impact Levels

ilow

낮은 위험도 - 일반적인 작업

!medium

중간 위험도 - 주의가 필요한 작업

!high

높은 위험도 - 신중한 검토 필요

!critical

심각한 위험도 - 되돌리기 어려운 작업

Change Types

+create

새 파일/리소스 생성

~update

기존 파일/리소스 수정

-delete

파일/리소스 삭제

ApprovalDialog Props

Prop	Type	Default	Description
`open*`	`boolean`	-	다이얼로그 열림 상태
`onOpenChange`	`(open: boolean) => void`	-	열림 상태 변경 콜백
`title*`	`string`	-	다이얼로그 제목
`description*`	`string`	-	설명 텍스트
`impact*`	`"low" \| "medium" \| "high" \| "critical"`	-	위험도 수준
`changes`	`ChangeItem[]`	-	변경 사항 목록
`onApprove*`	`() => void`	-	승인 콜백
`onReject*`	`(reason?: string) => void`	-	거부 콜백
`onRequestMoreInfo`	`() => void`	-	추가 정보 요청 콜백
`timeout`	`number`	-	타임아웃 (ms)
`isApproving`	`boolean`	false	승인 처리 중 상태

ChangeItem Object

Prop	Type	Default	Description
`label*`	`string`	-	변경 항목 레이블
`type*`	`"create" \| "update" \| "delete"`	-	변경 유형
`before`	`string`	-	변경 전 값
`after*`	`string`	-	변경 후 값