toki
bebd95f909
validate-agent-ui 규칙이 요구하는 상태값 스키마에 맞춰 기존 code-first agent-ui 문서의 legacy 상태 표기를 정규화한다.
97 lines
3.3 KiB
Markdown
97 lines
3.3 KiB
Markdown
---
|
|
ui_doc_type: view
|
|
view_id: edges
|
|
status: 구현됨
|
|
frame: null
|
|
source_evidence:
|
|
- type: code
|
|
path: apps/client/lib/widgets/edges_panel.dart
|
|
notes: EdgesPanel renders loading, error, empty, edge list, edge details, and refresh action.
|
|
- type: code
|
|
path: apps/client/lib/client_home_page.dart
|
|
notes: ClientHomePage injects EdgesPanel into the shell edges section.
|
|
- type: docs
|
|
path: README.md
|
|
notes: Control Plane manages multiple Edge connections and exposes operational status.
|
|
- type: user
|
|
path: null
|
|
notes: Initial scaffold requested by user.
|
|
regions:
|
|
- edges.edge-list
|
|
- edges.edge-details
|
|
- edges.connection-status
|
|
- edges.capabilities
|
|
- edges.refresh
|
|
---
|
|
|
|
# Edges
|
|
|
|
View ID: `edges`
|
|
|
|
Frame:
|
|
- 없음
|
|
|
|
Status: `구현됨`
|
|
|
|
## Source Evidence
|
|
|
|
| Type | Path | Notes |
|
|
|------|------|-------|
|
|
| code | `apps/client/lib/widgets/edges_panel.dart` | `EdgesPanel`이 Edge 목록, 선택 Edge 상세, loading/error/empty state를 렌더링한다. |
|
|
| code | `apps/client/lib/client_home_page.dart` | shell edges section에 `EdgesPanel`을 주입한다. |
|
|
| docs | `README.md` | Control Plane이 여러 Edge 연결과 상태 조회를 제공하는 운영 계층임을 설명한다. |
|
|
| user | 없음 | 초기 agent-ui 생성을 요청했다. |
|
|
|
|
## Purpose
|
|
|
|
Control Plane에 등록된 Edge fleet를 탐색하고, 선택 Edge의 연결 상태와 capability를 확인한다.
|
|
|
|
## Primary Users
|
|
|
|
- IOP operator
|
|
- field Edge 연결 상태를 확인하는 engineer
|
|
|
|
## Primary Tasks
|
|
|
|
- Edge 목록 확인
|
|
- Edge 선택
|
|
- 선택 Edge의 id, version, protocol, last seen, health, node count 확인
|
|
- Edge capability 확인
|
|
|
|
## Information Priority
|
|
|
|
1. Edge 연결 여부와 선택 대상
|
|
2. 선택 Edge 상세 메타데이터
|
|
3. capability와 refresh action
|
|
|
|
## Regions
|
|
|
|
| Region ID | Purpose | Component | Priority | Notes |
|
|
|-----------|---------|-----------|----------|-------|
|
|
| `edges.edge-list` | fleet Edge 목록과 현재 선택 대상 표시 | `edge-list` | high | desktop에서는 좌측, narrow width에서는 상단에 배치된다. |
|
|
| `edges.edge-details` | 선택 Edge 상세 정보 표시 | `edge-detail-list` | high | Edge ID, version, protocol, last seen, health, node count를 포함한다. |
|
|
| `edges.connection-status` | 연결 상태 badge 표시 | `status-badge` | high | connected/disconnected 상태 색상 기준을 사용한다. |
|
|
| `edges.capabilities` | 선택 Edge capability chip 표시 | `status-badge` | medium | 현재 구현은 capability chip 목록이다. |
|
|
| `edges.refresh` | Edge 목록 갱신 | 없음 | medium | error/empty state와 main panel에서 refresh action을 제공한다. |
|
|
|
|
## Actions
|
|
|
|
| Action ID | Trigger | Result | Guard |
|
|
|-----------|---------|--------|-------|
|
|
| `edges.select-edge` | Edge list item tap | 선택 Edge 상세를 갱신한다. | Edge 목록이 있어야 한다. |
|
|
| `edges.refresh` | Refresh 또는 Retry button | fleet Edge 목록을 다시 fetch한다. | 없음 |
|
|
|
|
## States
|
|
|
|
- loading: Edge 목록이 비어 있고 fetch 중이면 spinner를 표시한다.
|
|
- empty: Edge가 없으면 `No Edges Registered` 메시지와 refresh action을 표시한다.
|
|
- error: Edge fetch 실패 시 error card와 retry action을 표시한다.
|
|
- permission-denied: 현재 구현 근거 없음
|
|
|
|
## Open Questions
|
|
|
|
- 없음
|
|
|
|
## Decision History
|
|
|
|
- 2026-06-25: `EdgesPanel` 구현을 기준으로 edges view를 정의했다.
|