---
ui_doc_type: component
component_id: edge-list
status: 구현됨
source_evidence:
  - type: code
    path: apps/client/lib/widgets/edges_panel.dart
    notes: buildEdgeList renders selectable Edge list items with connection dots.
  - type: user
    path: null
    notes: Initial scaffold requested by user.
---

# Edge List

Component ID: `edge-list`

Status: `구현됨`

## Source Evidence

| Type | Path | Notes |
|------|------|-------|
| code | `apps/client/lib/widgets/edges_panel.dart` | `buildEdgeList`가 Edge list item, selected state, connection dot, chevron을 렌더링한다. |
| user | 없음 | 초기 agent-ui 생성을 요청했다. |

## Purpose

등록된 Edge fleet에서 작업 대상 Edge를 선택한다.

## Used By

- `edges`: `edges.edge-list`

## Anatomy

- connection dot
- edge display name
- edge id
- selected state
- chevron

## Variants

- desktop side list
- mobile top list

## States

- default
- selected
- empty: view empty state가 처리
- error: view error state가 처리
- disabled: 없음

## Rules

- edge name이 있으면 name을 primary label로, 없으면 edge id를 primary label로 사용한다.
- connected state는 dot color로 즉시 구분한다.

## Decision History

- 2026-06-25: `EdgesPanel`의 Edge 목록 영역을 component로 정의했다.