iop/agent-ui/definition/components/status-badge/index.md

ui_doc_type	component_id	status	source_evidence
component	status-badge	구현됨	type path notes code packages/flutter/iop_console/lib/src/iop_console_overview.dart Overview connection status and stat tiles use status color. type path notes code apps/client/lib/widgets/edges_panel.dart Edge connected/disconnected badge and capability chips are rendered. type path notes code apps/client/lib/widgets/nodes_panel_sections.dart NodeStatusCard and ProviderSnapshotCard render node connection, adapter, and provider state badges. type path notes code apps/client/lib/widgets/runtime_panel.dart Command result, domain agent lifecycle, and operation status chips are rendered. type path notes user null Initial scaffold requested by user.

Status Badge

Component ID: status-badge

Status: 구현됨

Source Evidence

Type	Path	Notes
code	packages/flutter/iop_console/lib/src/iop_console_overview.dart	overview connection badge와 status tile 색상 기준을 포함한다.
code	apps/client/lib/widgets/edges_panel.dart	Edge connected/disconnected badge와 capability chip을 포함한다.
code	apps/client/lib/widgets/nodes_panel_sections.dart	NodeStatusCard와 ProviderSnapshotCard가 Node status, adapter enabled, provider state badge를 포함한다.
code	apps/client/lib/widgets/runtime_panel.dart	command result, lifecycle state, operation status badge를 포함한다.
user	없음	초기 agent-ui 생성을 요청했다.

Purpose

운영 상태를 색상과 짧은 uppercase label로 빠르게 스캔할 수 있게 한다.

Used By

• overview: overview.connection-status, overview.health-summary
• edges: edges.connection-status, edges.capabilities
• nodes: nodes.node-status, nodes.adapter-config
• runtime: runtime.command-status, runtime.domain-agents, runtime.operation-history

Anatomy

• state label
• semantic color
• optional border/background emphasis
• optional icon

Variants

• connection: connected, disconnected, connecting, error
• lifecycle: ready, busy, running, failed, unknown
• command: success, accepted, pending, failed
• capability: small chip

States

• default
• loading
• empty: 없음
• error
• disabled: 없음

Rules

• green은 healthy/success/connected, amber는 pending/busy/draining, red는 error/failed/offline, gray는 unknown/empty 계열에 사용한다.
• label은 짧게 유지하고 상세 설명은 주변 row/card에 둔다.

Decision History

• 2026-06-25: 여러 panel 구현에서 반복되는 status chip 패턴을 component로 추출했다.
• 2026-07-18: Nodes view status badge의 코드 근거를 nodes_panel_sections.dart로 동기화했다.