iop/agent-ui/definition/components/index.md
toki 4879bcf6f2 docs(roadmap): Chronos 분리 마일스톤을 종료한다
canonical 승격 검증과 Agent UI 정합화 결과를 고정하고 완료된 Milestone과 SDD를 archive해 후속 Chronos 잠금 해제 상태를 보존한다.
2026-08-02 21:52:44 +09:00

39 lines
2.6 KiB
Markdown

---
ui_doc_type: components-index
components:
- console-shell
- status-badge
- endpoint-card
- edge-selector
- edge-list
- edge-detail-list
- node-card
- provider-snapshot-card
- command-action-bar
- operation-history-list
- event-log-entry
---
# Component Definitions
## Component List
| Component ID | Status | Evidence | Description |
|--------------|--------|----------|-------------|
| `console-shell` | 구현됨 | `packages/flutter/iop_console/lib/src/iop_console_shell.dart` | The implemented provider-only console shell exposes generic operations sections and no standalone Agent section. |
| `status-badge` | 구현됨 | `apps/client/lib/widgets/*.dart`, `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | connection, node, command, lifecycle 상태를 색상 badge/chip으로 표시한다. |
| `endpoint-card` | 구현됨 | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | endpoint 또는 token reference 값을 label과 icon으로 표시한다. |
| `edge-selector` | 구현됨 | `apps/client/lib/widgets/nodes_panel.dart`, `apps/client/lib/widgets/runtime_panel.dart`, `apps/client/lib/widgets/execution_logs_panel.dart` | active/filter Edge dropdown과 refresh control이다. |
| `edge-list` | 구현됨 | `apps/client/lib/widgets/edges_panel.dart` | Edge 목록과 선택 상태를 표시한다. |
| `edge-detail-list` | 구현됨 | `apps/client/lib/widgets/edges_panel.dart` | 선택 Edge 상세 metadata와 capability chip을 표시한다. |
| `node-card` | 구현됨 | `apps/client/lib/widgets/nodes_panel_sections.dart` | Node alias/id, connection state, config, adapter 상태를 표시한다. |
| `provider-snapshot-card` | 구현됨 | `apps/client/lib/widgets/nodes_panel_sections.dart` | provider health, load, queue, served model, lifecycle capability를 표시한다. |
| `command-action-bar` | 구현됨 | `apps/client/lib/widgets/runtime_panel.dart` | health check, Node status, allowlisted provider command action을 제공한다. |
| `operation-history-list` | 구현됨 | `apps/client/lib/widgets/runtime_panel_sections.dart` | Edge operation execution history를 status와 함께 표시한다. |
| `event-log-entry` | 구현됨 | `apps/client/lib/widgets/execution_logs_panel.dart` | lifecycle event 항목을 severity icon/color와 함께 표시한다. |
## Rules
- component 정의는 구현 API가 아니라 UI 사용 규칙을 다룬다.
- view별 변형이 필요하면 `<component-id>/<variant>.md` 또는 하위 디렉터리를 사용한다.
- 실제 구현체 이름과 다를 수 있지만, view 정의서에서 참조하는 component id는 이 목록에 있어야 한다.