---
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
  - domain-agent-card
  - operation-history-list
  - event-log-entry
  - agent-panel
---

# Component Definitions

## Component List

| Component ID | Status | Evidence | Description |
|--------------|--------|----------|-------------|
| `console-shell` | 구현됨 | `packages/flutter/iop_console/lib/src/iop_console_shell.dart` | 좌측 rail과 section slot을 제공하는 console shell이다. |
| `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.dart` | Node alias/id, connection state, config, adapter 상태를 표시한다. |
| `provider-snapshot-card` | 구현됨 | `apps/client/lib/widgets/nodes_panel.dart` | provider health, load, queue, served model, lifecycle capability를 표시한다. |
| `command-action-bar` | 구현됨 | `apps/client/lib/widgets/runtime_panel.dart` | health check, agent status, agent command action을 제공한다. |
| `domain-agent-card` | 구현됨 | `apps/client/lib/widgets/runtime_panel.dart` | domain agent lifecycle state와 summary를 grid card로 표시한다. |
| `operation-history-list` | 구현됨 | `apps/client/lib/widgets/runtime_panel.dart` | Edge operation execution history를 status와 함께 표시한다. |
| `event-log-entry` | 구현됨 | `apps/client/lib/widgets/execution_logs_panel.dart` | lifecycle event 항목을 severity icon/color와 함께 표시한다. |
| `agent-panel` | 구현됨 | `packages/flutter/iop_console/lib/src/iop_agent_panel.dart` | IOP capability intro message와 prompt를 포함한 agent shell이다. |

## Rules

- component 정의는 구현 API가 아니라 UI 사용 규칙을 다룬다.
- view별 변형이 필요하면 `<component-id>/<variant>.md` 또는 하위 디렉터리를 사용한다.
- 실제 구현체 이름과 다를 수 있지만, view 정의서에서 참조하는 component id는 이 목록에 있어야 한다.