에이전트 UI 프로토콜

{
  "a2ui_version": "1.0",
  "components": [
    {
      "id": "card_1",
      "type": "Card",
      "properties": { "title": "주문 요약", "elevation": 2 },
      "children": ["text_1", "actions_1"]
    },
    {
      "id": "text_1",
      "type": "Text",
      "properties": { "content": "총 3건의 주문이 있습니다.", "variant": "body" }
    },
    {
      "id": "actions_1",
      "type": "ActionGroup",
      "properties": {
        "layout": "horizontal",
        "actions": [
          { "label": "결제하기", "action_id": "checkout", "variant": "primary" },
          { "label": "취소", "action_id": "cancel", "variant": "outline" }
        ]
      }
    }
  ]
}

// AG-UI 이벤트 스트림 (Server-Sent Events)
{ "type": "RUN_STARTED", "threadId": "th_abc", "runId": "run_123" }

// 텍스트 메시지 스트리밍
{ "type": "TEXT_MESSAGE_START", "messageId": "msg_1", "role": "assistant" }
{ "type": "TEXT_MESSAGE_CONTENT", "messageId": "msg_1", "delta": "주문을 " }
{ "type": "TEXT_MESSAGE_CONTENT", "messageId": "msg_1", "delta": "확인하겠습니다." }
{ "type": "TEXT_MESSAGE_END", "messageId": "msg_1" }

// 도구 호출
{ "type": "TOOL_CALL_START", "toolCallId": "tc_1", "toolName": "getOrders" }
{ "type": "TOOL_CALL_ARGS", "toolCallId": "tc_1", "delta": "{\"userId\":\"u_456\"}" }
{ "type": "TOOL_CALL_END", "toolCallId": "tc_1" }

// 상태 업데이트 (JSON Patch)
{ "type": "STATE_DELTA", "delta": [
    { "op": "replace", "path": "/orders", "value": [{ "id": "ord_1", "status": "배송중" }] }
  ]
}

{ "type": "RUN_FINISHED", "threadId": "th_abc", "runId": "run_123" }

interface IntentPreview {
  planId: string
  title: string
  steps: {
    description: string
    tool: string
    estimatedImpact: 'low' | 'medium' | 'high'
  }[]
  requiresApproval: boolean
  estimatedDuration: string
}

// 에이전트 응답 메시지
interface ChatMessageProps {
  role: 'user' | 'assistant' | 'system'
  content: string
  isStreaming?: boolean
  confidence?: number   // 0-1 신뢰도
  sources?: SourceRef[] // 참조 출처
}

// 도구 호출 카드
interface ToolCallCardProps {
  toolName: string
  status: 'pending' | 'running' | 'completed' | 'error'
  args?: Record<string, unknown>
  result?: unknown
}

// 계획 미리보기
interface PlanPreviewProps {
  steps: PlanStep[]
  currentStep?: number
  onApprove: () => void
  onReject: () => void
  onModify: (feedback: string) => void
}

// 사용자 확인 대화상자 (HITL)
interface ConfirmDialogProps {
  title: string
  description: string
  impact: 'low' | 'medium' | 'high' | 'critical'
  details?: string[]
  onConfirm: () => void
  onCancel: () => void
}

// tokens/agent-ui.ts
export const agentTokens = {
  // 메시지 배경색
  'agent.message.bg.user': 'var(--color-primary-50)',
  'agent.message.bg.assistant': 'var(--color-neutral-50)',
  'agent.message.bg.system': 'var(--color-warning-50)',
  // 상태별 액션 색상
  'agent.action.pending': 'var(--color-neutral-400)',
  'agent.action.running': 'var(--color-blue-500)',
  'agent.action.completed': 'var(--color-green-500)',
  'agent.action.error': 'var(--color-destructive)',
  // 신뢰도 (0-1 범위)
  'agent.confidence.high': 'var(--color-green-500)',      // 0.8+
  'agent.confidence.medium': 'var(--color-yellow-500)',    // 0.5-0.8
  'agent.confidence.low': 'var(--color-orange-500)',       // 0.2-0.5
  'agent.confidence.veryLow': 'var(--color-red-500)',      // 0-0.2
  // 영향도
  'agent.impact.low': 'var(--color-green-100)',
  'agent.impact.medium': 'var(--color-yellow-100)',
  'agent.impact.high': 'var(--color-orange-100)',
  'agent.impact.critical': 'var(--color-red-100)',
  // 스트리밍 · 간격
  'agent.streaming.cursor': 'var(--color-primary)',
  'agent.bubble.padding': 'var(--spacing-4)',
  'agent.bubble.radius': 'var(--radius-lg)',
} as const

// a2ui-component-map.ts
const componentMap: Record<string, React.ComponentType<unknown>> = {
  'Card': DSCard, 'Text': DSText, 'DataTable': DSDataTable,
  'ActionGroup': DSActionGroup, 'Form': DSForm,
  'Chart': DSChart, 'Alert': DSAlert, 'Image': DSImage,
}

function renderA2UI(components: A2UIComponent[]): React.ReactNode {
  const roots = components.filter(
    (c) => !components.some((p) => p.children?.includes(c.id))
  )
  return roots.map((comp) => {
    const Component = componentMap[comp.type]
    if (!Component) return null // 알 수 없는 타입 → 폴백

    const children = comp.children?.map((id) =>
      renderA2UI(components.filter((c) => c.id === id))
    )
    return <Component key={comp.id} {...comp.properties}>{children}</Component>
  })
}