---
ui_doc_type: component
component_id: status-badge
status: 구현됨
source_evidence:
  - type: code
    path: packages/flutter/iop_console/lib/src/iop_console_overview.dart
    notes: Overview connection status and stat tiles use status color.
  - type: code
    path: apps/client/lib/widgets/edges_panel.dart
    notes: Edge connected/disconnected badge and capability chips are rendered.
  - type: code
    path: apps/client/lib/widgets/nodes_panel_sections.dart
    notes: NodeStatusCard and ProviderSnapshotCard render node connection, adapter, and provider state badges.
  - type: code
    path: apps/client/lib/widgets/runtime_panel.dart
    notes: Command result, domain agent lifecycle, and operation status chips are rendered.
  - type: user
    path: null
    notes: 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`로 동기화했다.