80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
---
|
|
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`로 동기화했다.
|