43 lines
2.9 KiB
Markdown
43 lines
2.9 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
|
|
- 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_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, 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는 이 목록에 있어야 한다.
|