toki
4ad5a7340d
- agent-ui 정의서 전체 구조 생성 (view/component/frame/wireframe) - UI 관련 스킬 템플릿 및 규칙 문서 개선 - components: action-feedback, agent-chat-panel, artifact-list 등 20개 이상의 컴포넌트 정의서 추가 - views: agent, artifacts, executions, overview, pipelines, runners, settings 정의서 추가
74 lines
1.9 KiB
Markdown
74 lines
1.9 KiB
Markdown
---
|
|
ui_doc_type: component
|
|
component_id: status-badge
|
|
status: implemented
|
|
source_evidence:
|
|
- type: code
|
|
path: packages/flutter/oto_console/lib/src/oto_console_overview.dart
|
|
notes: "connection status badge"
|
|
- type: code
|
|
path: packages/flutter/oto_console/lib/src/oto_runners_surface.dart
|
|
notes: "runner status badge"
|
|
- type: code
|
|
path: packages/flutter/oto_console/lib/src/oto_jobs_surface.dart
|
|
notes: "job state badge"
|
|
- type: code
|
|
path: packages/flutter/oto_console/lib/src/oto_executions_surface.dart
|
|
notes: "execution state badge"
|
|
---
|
|
|
|
# Status Badge
|
|
|
|
Component ID: `status-badge`
|
|
|
|
Status: `implemented`
|
|
|
|
## Source Evidence
|
|
|
|
| Type | Path | Notes |
|
|
|------|------|-------|
|
|
| code | `packages/flutter/oto_console/lib/src/oto_console_overview.dart` | connection status badge |
|
|
| code | `packages/flutter/oto_console/lib/src/oto_runners_surface.dart` | runner status badge |
|
|
| code | `packages/flutter/oto_console/lib/src/oto_jobs_surface.dart` | job state badge |
|
|
| code | `packages/flutter/oto_console/lib/src/oto_executions_surface.dart` | execution state badge |
|
|
|
|
## Purpose
|
|
|
|
상태를 짧은 uppercase label과 색으로 스캔 가능하게 표시한다.
|
|
|
|
## Used By
|
|
|
|
- `overview`: `overview.header`
|
|
- `runners`: `runners.runner-list`
|
|
- `pipelines`: `pipelines.job-list`
|
|
- `executions`: `executions.execution-list`
|
|
|
|
## Anatomy
|
|
|
|
- label text
|
|
- colored container
|
|
- optional dot in overview variant
|
|
|
|
## Variants
|
|
|
|
- connection: checking/online/degraded/offline
|
|
- runner: active/online/idle/busy/running/offline
|
|
- work item: queued/running/succeeded/failed/canceled
|
|
|
|
## States
|
|
|
|
- default
|
|
- success
|
|
- warning
|
|
- failure
|
|
- neutral
|
|
|
|
## Rules
|
|
|
|
- label은 한 줄로 줄이고 긴 값은 ellipsis 처리한다.
|
|
- semantic color는 surface별 mapping과 일치해야 한다.
|
|
|
|
## Decision History
|
|
|
|
- 2026-06-24: surface별 private badge 구현을 공통 UI component로 문서화했다.
|
|
|