add agent-ui directory

agent-ui/README.md

@@ -0,0 +1,31 @@
+---
+ui_doc_type: readme
+surface_type: ops-dev
+---
+
+# agent-ui
+
+이 디렉터리는 IOP Flutter client와 embeddable console package의 UI 의도, 화면 구조, 반복 구성요소를 동기화하기 위한 작업 문맥 저장소다.
+
+## 대상
+
+- 1차 대상: ops/dev UI
+- 현재 source-mode: code-first
+- 확장 후보: product UI layer, visual frame, brand/content/assets/tokens/motion
+
+## 구조
+
+- `definition/`: 현재 UI 정의 source of truth
+- `definition/views/`: console section 또는 업무 화면 단위 정의
+- `definition/components/`: 반복 UI 구성요소 정의
+- `frame/`: visual source가 있는 view의 wireframe 연결
+- `archive/user-review/`: 해결된 사용자 리뷰 로그
+
+## 기본 규칙
+
+- 현재 기준은 `definition/**`에 둔다.
+- visual wireframe은 visual source가 있을 때만 `frame/views/**`에 둔다.
+- `.excalidraw` 파일만으로 UI 기준을 확정하지 않는다.
+- `definition/archive/**`와 `archive/user-review/**`는 과거 기록이며 일반 작업에서 읽지 않는다.
+- 구현 코드 근거가 있는 항목만 `implemented`로 표시한다.
+

agent-ui/archive/user-review/.gitkeep

@@ -0,0 +1 @@
+

agent-ui/definition/archive/components/.gitkeep

@@ -0,0 +1 @@
+

agent-ui/definition/archive/views/.gitkeep

@@ -0,0 +1 @@
+

agent-ui/definition/components/agent-panel/index.md

@@ -0,0 +1,71 @@
+---
+ui_doc_type: component
+component_id: agent-panel
+status: implemented
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_agent_panel.dart
+    notes: IopAgentPanel mounts AgentShell with intro message, capability list, placeholder, and onSubmit hook.
+  - type: code
+    path: apps/client/lib/main.dart
+    notes: iopDefaultCapabilityPack defines the default IOP operation capability list.
+  - type: docs
+    path: apps/client/README.md
+    notes: The client provides an IOP operation and maintenance agent panel widget.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Agent Panel
+
+Component ID: `agent-panel`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_agent_panel.dart` | `IopAgentPanel`이 `AgentShell` 메시지, placeholder, submit callback을 구성한다. |
+| code | `apps/client/lib/main.dart` | default capability pack을 정의한다. |
+| docs | `apps/client/README.md` | IOP 운영/유지보수 agent panel widget boundary를 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+IOP operation capability를 대화형 agent shell 안에 보여주고 operator input을 받을 수 있게 한다.
+
+## Used By
+
+- `agent`: `agent.surface`, `agent.capabilities`, `agent.prompt`
+
+## Anatomy
+
+- intro assistant message
+- registered capability list
+- prompt input placeholder
+- optional submit callback
+
+## Variants
+
+- default capability pack
+- custom host-provided capability pack
+
+## States
+
+- default
+- loading: 현재 구현은 busy=false
+- empty: capability list가 없으면 intro만 표시
+- error: 현재 구현 근거 없음
+- disabled: 없음
+
+## Rules
+
+- IOP-specific operation semantics는 client/iop_console boundary에 둔다.
+- generic chat behavior는 `agent_shell` package에 위임한다.
+
+## Decision History
+
+- 2026-06-25: `IopAgentPanel` 구현을 기준으로 component를 정의했다.
+

agent-ui/definition/components/command-action-bar/index.md

@@ -0,0 +1,68 @@
+---
+ui_doc_type: component
+component_id: command-action-bar
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: RuntimePanel renders Health Check, Agent Status, and Agent Command actions plus dialogs.
+  - type: docs
+    path: README.md
+    notes: Control Plane forwards operational command requests to Edge-owned operations.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Command Action Bar
+
+Component ID: `command-action-bar`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/runtime_panel.dart` | `Health Check`, `Agent Status`, `Agent Command` buttons와 command dialogs를 구현한다. |
+| docs | `README.md` | Control Plane은 Edge에 명령 전달과 제어 결과 관찰을 제공한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+선택 Edge에 runtime/agent operation command를 실행하는 주요 action cluster다.
+
+## Used By
+
+- `runtime`: `runtime.command-actions`
+
+## Anatomy
+
+- health check button
+- agent status button and selector dialog
+- agent command button and selector/command dialog
+- loading disabled state
+
+## Variants
+
+- system operation
+- agent query
+- agent command
+
+## States
+
+- default
+- loading
+- empty: Edge가 없으면 runtime view가 안내 메시지를 표시
+- error: command status alert에서 처리
+- disabled
+
+## Rules
+
+- loading 중에는 command action을 비활성화한다.
+- agent command/status dialog는 selector가 비어 있으면 submit하지 않는다.
+
+## Decision History
+
+- 2026-06-25: `RuntimePanel`의 operation command 버튼과 dialogs를 component로 정의했다.
+

agent-ui/definition/components/console-shell/index.md

@@ -0,0 +1,70 @@
+---
+ui_doc_type: component
+component_id: console-shell
+status: implemented
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_console_shell.dart
+    notes: IopConsoleShell defines left rail section navigation and content slots.
+  - type: docs
+    path: apps/client/README.md
+    notes: iop_console is the IOP-owned widget boundary for standalone and embedded consumers.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Console Shell
+
+Component ID: `console-shell`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_console_shell.dart` | `IopConsoleShell`, `_IopConsoleRail`, `_RailButton`, `_IopPlaceholder`가 shell structure를 구현한다. |
+| docs | `apps/client/README.md` | standalone IOP app과 외부 embedding consumer가 같은 widget boundary를 사용한다고 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+IOP console view들을 좌측 rail navigation과 section content slot으로 묶는다.
+
+## Used By
+
+- `overview`: shell initial section
+- `edges`: shell section
+- `nodes`: shell section
+- `runtime`: shell section
+- `execution-logs`: shell section
+- `agent`: shell section
+
+## Anatomy
+
+- left rail
+- section icon buttons with tooltip
+- content slot
+- placeholder fallback
+
+## Variants
+
+- default: dark ops/dev shell
+
+## States
+
+- default
+- selected section
+- placeholder
+- disabled: 없음
+
+## Rules
+
+- shell은 view content를 소유하지 않고 section slot을 mount한다.
+- `maintenance`와 `settings`는 package shell placeholder가 있으나 현재 app에서 concrete panel을 주입하지 않는다.
+
+## Decision History
+
+- 2026-06-25: `IopConsoleShell` 구현을 기준으로 component를 정의했다.
+

agent-ui/definition/components/domain-agent-card/index.md

@@ -0,0 +1,69 @@
+---
+ui_doc_type: component
+component_id: domain-agent-card
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: _buildDomainAgentsGrid renders domain agent cards with lifecycle state and active command id.
+  - type: docs
+    path: README.md
+    notes: Domain agents are specialized Edge-connected automation executors.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Domain Agent Card
+
+Component ID: `domain-agent-card`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/runtime_panel.dart` | `_buildDomainAgentsGrid`가 domain agent card grid를 렌더링한다. |
+| docs | `README.md` | Domain agent는 Edge에 직접 붙는 specialized automation executor로 설명된다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+Edge에 보고된 domain agent의 availability, lifecycle state, active command를 보여준다.
+
+## Used By
+
+- `runtime`: `runtime.domain-agents`
+
+## Anatomy
+
+- agent kind
+- lifecycle state badge
+- summary or availability
+- active command id
+
+## Variants
+
+- ready
+- busy/running
+- error/failed
+- unknown
+
+## States
+
+- default
+- empty: no domain agents message
+- loading: view-level state
+- error: lifecycle state color로 표현
+- disabled: 없음
+
+## Rules
+
+- grid는 width가 넓으면 2 columns, 좁으면 1 column로 표시한다.
+- active command id는 monospace style로 표시한다.
+
+## Decision History
+
+- 2026-06-25: `RuntimePanel`의 domain agent grid를 component로 정의했다.
+

agent-ui/definition/components/edge-detail-list/index.md

@@ -0,0 +1,63 @@
+---
+ui_doc_type: component
+component_id: edge-detail-list
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/edges_panel.dart
+    notes: buildEdgeDetails renders selected Edge metadata and capabilities.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Edge Detail List
+
+Component ID: `edge-detail-list`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/edges_panel.dart` | `buildEdgeDetails`와 `_buildDetailRow`가 selected Edge metadata와 capability chips를 렌더링한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+선택 Edge의 운영 메타데이터를 세로 detail list로 표시한다.
+
+## Used By
+
+- `edges`: `edges.edge-details`, `edges.capabilities`
+
+## Anatomy
+
+- selected Edge title
+- connection badge
+- detail rows
+- capability chips
+
+## Variants
+
+- desktop detail pane
+- mobile detail pane
+
+## States
+
+- default
+- empty capability list
+- loading: view-level state
+- error: view-level state
+- disabled: 없음
+
+## Rules
+
+- 값이 비어 있으면 `-`로 표시한다.
+- capability가 없으면 명시적으로 no capabilities state를 보여준다.
+
+## Decision History
+
+- 2026-06-25: `EdgesPanel`의 선택 Edge 상세 영역을 component로 정의했다.
+

agent-ui/definition/components/edge-list/index.md

@@ -0,0 +1,64 @@
+---
+ui_doc_type: component
+component_id: edge-list
+status: implemented
+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: `implemented`
+
+## 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로 정의했다.
+

agent-ui/definition/components/edge-selector/index.md

@@ -0,0 +1,72 @@
+---
+ui_doc_type: component
+component_id: edge-selector
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/nodes_panel.dart
+    notes: NodesPanel renders an Active Edge dropdown and refresh action.
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: RuntimePanel renders an Active Edge dropdown and refresh action.
+  - type: code
+    path: apps/client/lib/widgets/execution_logs_panel.dart
+    notes: ExecutionLogsPanel renders a Filter Edge dropdown and refresh action.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Edge Selector
+
+Component ID: `edge-selector`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/nodes_panel.dart` | active Edge dropdown과 refresh icon을 포함한다. |
+| code | `apps/client/lib/widgets/runtime_panel.dart` | responsive header 안에서 active Edge dropdown과 refresh icon을 포함한다. |
+| code | `apps/client/lib/widgets/execution_logs_panel.dart` | filter Edge dropdown과 refresh icon을 포함한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+Edge-scoped view에서 대상 Edge를 선택하고 현재 view 데이터를 갱신한다.
+
+## Used By
+
+- `nodes`: `nodes.edge-selector`
+- `runtime`: `runtime.edge-selector`
+- `execution-logs`: `execution-logs.edge-selector`
+
+## Anatomy
+
+- label
+- dropdown
+- refresh icon button
+
+## Variants
+
+- active-edge: Nodes/Runtime에서 사용
+- filter-edge: Execution Logs에서 사용
+
+## States
+
+- default
+- loading: view별 refresh 상태로 표시
+- empty: Edge 목록이 없으면 selector를 숨기거나 안내 메시지를 표시
+- error: view별 error 영역에서 처리
+- disabled: 없음
+
+## Rules
+
+- dropdown item label은 edge name이 있으면 name, 없으면 edge id를 사용한다.
+- 선택 값이 목록에 없으면 첫 Edge로 fallback한다.
+
+## Decision History
+
+- 2026-06-25: 세 개 panel에 반복되는 Edge dropdown pattern을 component로 정의했다.
+

agent-ui/definition/components/endpoint-card/index.md

@@ -0,0 +1,67 @@
+---
+ui_doc_type: component
+component_id: endpoint-card
+status: implemented
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_console_overview.dart
+    notes: _buildEndpointCard renders endpoint/auth reference rows.
+  - type: docs
+    path: apps/client/README.md
+    notes: Client HTTP and WebSocket URLs are provided with dart-define values.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Endpoint Card
+
+Component ID: `endpoint-card`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | `_buildEndpointCard`가 title, url/reference, icon을 가진 card를 렌더링한다. |
+| docs | `apps/client/README.md` | `IOP_CONTROL_PLANE_HTTP_URL`, `IOP_CONTROL_PLANE_WIRE_URL` 설정을 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+운영 endpoint나 auth reference를 label과 monospace value로 읽기 쉽게 보여준다.
+
+## Used By
+
+- `overview`: `overview.endpoints`, `overview.auth`
+
+## Anatomy
+
+- leading icon block
+- title
+- monospace endpoint/reference value
+
+## Variants
+
+- http endpoint
+- websocket endpoint
+- auth token reference
+
+## States
+
+- default
+- loading: 없음
+- empty: fallback text 사용
+- error: 없음
+- disabled: 없음
+
+## Rules
+
+- secret 원문은 표시하지 않고 reference만 표시한다.
+- 긴 endpoint 값은 한 줄 ellipsis로 처리한다.
+
+## Decision History
+
+- 2026-06-25: overview endpoint card helper를 component로 정의했다.
+

agent-ui/definition/components/event-log-entry/index.md

@@ -0,0 +1,71 @@
+---
+ui_doc_type: component
+component_id: event-log-entry
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/execution_logs_panel.dart
+    notes: ExecutionLogsPanel renders event entries with type color/icon, reason, node/source, and timestamp.
+  - type: docs
+    path: README.md
+    notes: Edge aggregates execution history and lifecycle events.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Event Log Entry
+
+Component ID: `event-log-entry`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/execution_logs_panel.dart` | event list builder, `_getEventColor`, `_getEventIcon`이 entry pattern을 구현한다. |
+| docs | `README.md` | Edge lifecycle event aggregation 방향을 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+단일 lifecycle event를 severity, reason, source, time 기준으로 읽기 쉽게 보여준다.
+
+## Used By
+
+- `execution-logs`: `execution-logs.event-list`, `execution-logs.event-entry`
+
+## Anatomy
+
+- severity icon
+- event type label
+- timestamp
+- reason text
+- node alias/id or Edge System
+- optional source
+
+## Variants
+
+- error/failed
+- warning/warn
+- success/connected/online
+- info/default
+
+## States
+
+- default
+- loading: view-level state
+- empty: view-level state
+- error: view-level state
+- disabled: 없음
+
+## Rules
+
+- event type drives color and icon.
+- node identity falls back to `Edge System` when node id and alias are empty.
+
+## Decision History
+
+- 2026-06-25: `ExecutionLogsPanel`의 event entry pattern을 component로 정의했다.
+

agent-ui/definition/components/index.md

@@ -0,0 +1,44 @@
+---
+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` | implemented | `packages/flutter/iop_console/lib/src/iop_console_shell.dart` | 좌측 rail과 section slot을 제공하는 console shell이다. |
+| `status-badge` | implemented | `apps/client/lib/widgets/*.dart`, `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | connection, node, command, lifecycle 상태를 색상 badge/chip으로 표시한다. |
+| `endpoint-card` | implemented | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | endpoint 또는 token reference 값을 label과 icon으로 표시한다. |
+| `edge-selector` | implemented | `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` | implemented | `apps/client/lib/widgets/edges_panel.dart` | Edge 목록과 선택 상태를 표시한다. |
+| `edge-detail-list` | implemented | `apps/client/lib/widgets/edges_panel.dart` | 선택 Edge 상세 metadata와 capability chip을 표시한다. |
+| `node-card` | implemented | `apps/client/lib/widgets/nodes_panel.dart` | Node alias/id, connection state, config, adapter 상태를 표시한다. |
+| `provider-snapshot-card` | implemented | `apps/client/lib/widgets/nodes_panel.dart` | provider health, load, queue, served model, lifecycle capability를 표시한다. |
+| `command-action-bar` | implemented | `apps/client/lib/widgets/runtime_panel.dart` | health check, agent status, agent command action을 제공한다. |
+| `domain-agent-card` | implemented | `apps/client/lib/widgets/runtime_panel.dart` | domain agent lifecycle state와 summary를 grid card로 표시한다. |
+| `operation-history-list` | implemented | `apps/client/lib/widgets/runtime_panel.dart` | Edge operation execution history를 status와 함께 표시한다. |
+| `event-log-entry` | implemented | `apps/client/lib/widgets/execution_logs_panel.dart` | lifecycle event 항목을 severity icon/color와 함께 표시한다. |
+| `agent-panel` | implemented | `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는 이 목록에 있어야 한다.
+

agent-ui/definition/components/node-card/index.md

@@ -0,0 +1,71 @@
+---
+ui_doc_type: component
+component_id: node-card
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/nodes_panel.dart
+    notes: NodesPanel renders one Card per node with status, label, config, adapters, and provider catalog.
+  - type: docs
+    path: README.md
+    notes: Node is the Edge-connected executor responsible for runtime adapter execution.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Node Card
+
+Component ID: `node-card`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/nodes_panel.dart` | Node list builder가 alias/id, connected badge, label, config, adapter chip을 가진 card를 렌더링한다. |
+| docs | `README.md` | Node는 Edge에 연결되는 실제 실행자다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+단일 Node의 identity, connectivity, execution config를 한눈에 보여준다.
+
+## Used By
+
+- `nodes`: `nodes.node-list`, `nodes.node-status`, `nodes.adapter-config`
+
+## Anatomy
+
+- alias or node id
+- connection badge
+- optional label
+- concurrency limit
+- adapter chips
+- provider catalog section
+
+## Variants
+
+- connected
+- offline
+- with config
+- without config
+
+## States
+
+- default
+- loading: view-level state
+- empty: no adapters configured
+- error: view-level state
+- disabled: 없음
+
+## Rules
+
+- alias가 있으면 alias를 primary label로 사용한다.
+- adapter enabled/disabled는 badge color와 icon을 함께 사용한다.
+
+## Decision History
+
+- 2026-06-25: `NodesPanel`의 Node card pattern을 component로 정의했다.
+

agent-ui/definition/components/operation-history-list/index.md

@@ -0,0 +1,68 @@
+---
+ui_doc_type: component
+component_id: operation-history-list
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: _buildOperationsHistory renders operation records with status, command id, selector, summary, and error.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Operation History List
+
+Component ID: `operation-history-list`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/runtime_panel.dart` | `_buildOperationsHistory`가 operation record list와 status chip을 렌더링한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+Edge command execution history를 scan 가능한 list로 보여준다.
+
+## Used By
+
+- `runtime`: `runtime.operation-history`
+
+## Anatomy
+
+- operation icon
+- operation name
+- command id
+- target selector
+- summary
+- optional error
+- status chip
+
+## Variants
+
+- success
+- accepted/pending
+- error/failed
+- unknown
+
+## States
+
+- default
+- loading
+- empty
+- error
+- disabled: 없음
+
+## Rules
+
+- error가 있으면 summary보다 error text가 더 눈에 띄어야 한다.
+- target selector가 비어 있으면 `all`로 표시한다.
+
+## Decision History
+
+- 2026-06-25: `RuntimePanel`의 operations history 영역을 component로 정의했다.
+

agent-ui/definition/components/provider-snapshot-card/index.md

@@ -0,0 +1,67 @@
+---
+ui_doc_type: component
+component_id: provider-snapshot-card
+status: implemented
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/nodes_panel.dart
+    notes: _buildProviderCard renders provider identity, state, models, load, queue, and lifecycle capabilities.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Provider Snapshot Card
+
+Component ID: `provider-snapshot-card`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/nodes_panel.dart` | `_buildProviderCard`, `_stateColor`, `_truncateModels`가 provider catalog row/card를 구현한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+Node에 연결된 provider runtime의 health와 capacity를 compact하게 보여준다.
+
+## Used By
+
+- `nodes`: `nodes.provider-catalog`
+
+## Anatomy
+
+- provider display name
+- health/status badge
+- type/category
+- served models summary
+- in-flight/capacity/queue/load ratio
+- lifecycle capability chips
+
+## Variants
+
+- healthy
+- degraded
+- unavailable
+- unknown
+
+## States
+
+- default
+- empty served models
+- empty lifecycle capabilities
+- error: health/status color로 표현
+- disabled: 없음
+
+## Rules
+
+- health 값이 있으면 status보다 우선한다.
+- served model은 3개까지만 표시하고 이후는 ellipsis로 줄인다.
+
+## Decision History
+
+- 2026-06-25: `NodesPanel`의 provider snapshot helper를 component로 정의했다.
+

agent-ui/definition/components/status-badge/index.md

@@ -0,0 +1,80 @@
+---
+ui_doc_type: component
+component_id: status-badge
+status: implemented
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_console_overview.dart
+    notes: Overview connection status and stat tiles use status color.
+  - type: code
+    path: apps/client/lib/widgets/edges_panel.dart
+    notes: Edge connected/disconnected badge and capability chips are rendered.
+  - type: code
+    path: apps/client/lib/widgets/nodes_panel.dart
+    notes: Node connection badge, adapter chips, and provider state chips are rendered.
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: Command result, domain agent lifecycle, and operation status chips are rendered.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+---
+
+# Status Badge
+
+Component ID: `status-badge`
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | overview connection badge와 status tile 색상 기준을 포함한다. |
+| code | `apps/client/lib/widgets/edges_panel.dart` | Edge connected/disconnected badge와 capability chip을 포함한다. |
+| code | `apps/client/lib/widgets/nodes_panel.dart` | Node status, adapter enabled, provider state badge를 포함한다. |
+| code | `apps/client/lib/widgets/runtime_panel.dart` | command result, lifecycle state, operation status badge를 포함한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+운영 상태를 색상과 짧은 uppercase label로 빠르게 스캔할 수 있게 한다.
+
+## Used By
+
+- `overview`: `overview.connection-status`, `overview.health-summary`
+- `edges`: `edges.connection-status`, `edges.capabilities`
+- `nodes`: `nodes.node-status`, `nodes.adapter-config`
+- `runtime`: `runtime.command-status`, `runtime.domain-agents`, `runtime.operation-history`
+
+## Anatomy
+
+- state label
+- semantic color
+- optional border/background emphasis
+- optional icon
+
+## Variants
+
+- connection: connected, disconnected, connecting, error
+- lifecycle: ready, busy, running, failed, unknown
+- command: success, accepted, pending, failed
+- capability: small chip
+
+## States
+
+- default
+- loading
+- empty: 없음
+- error
+- disabled: 없음
+
+## Rules
+
+- green은 healthy/success/connected, amber는 pending/busy/draining, red는 error/failed/offline, gray는 unknown/empty 계열에 사용한다.
+- label은 짧게 유지하고 상세 설명은 주변 row/card에 둔다.
+
+## Decision History
+
+- 2026-06-25: 여러 panel 구현에서 반복되는 status chip 패턴을 component로 추출했다.
+

agent-ui/definition/index.md

@@ -0,0 +1,65 @@
+---
+ui_doc_type: definition-index
+surface_type: ops-dev
+source_evidence:
+  - type: code
+    path: apps/client/lib/client_home_page.dart
+    notes: ClientHomePage mounts IopConsoleShell with overview, edges, nodes, runtime, executionLogs, and agent panels.
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_console_shell.dart
+    notes: IopConsoleShell defines the rail navigation and console section slots.
+  - type: docs
+    path: README.md
+    notes: IOP is a Control Plane, Edge, Node operations platform with runtime and automation surfaces.
+  - type: docs
+    path: apps/client/README.md
+    notes: The official Flutter client consumes packages/flutter/iop_console as the IOP-owned widget boundary.
+  - type: user
+    path: null
+    notes: User requested initial agent-ui scaffold creation.
+---
+
+# UI Definition
+
+## Purpose
+
+이 agent-ui는 IOP 공식 Flutter client의 Control Plane 운영 화면과 `packages/flutter/iop_console` embeddable console surface를 정의한다.
+현재 기준은 운영자가 Edge, Node, Runtime, execution event, agent capability 상태를 확인하고 기본 command를 실행하는 ops/dev UI다.
+
+## Surface Type
+
+- Type: ops-dev
+- Notes: product UI layer가 필요하면 brand, public content, asset, token, motion 정의를 별도 갱신에서 추가한다.
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/client_home_page.dart` | `ClientHomePage`가 `IopConsoleShell`에 overview, edges, nodes, runtime, execution logs, agent panel을 주입한다. |
+| code | `packages/flutter/iop_console/lib/src/iop_console_shell.dart` | 좌측 rail과 section routing이 console shell의 기본 frame을 이룬다. |
+| docs | `README.md` | IOP가 Control Plane, Edge, Node 운영 계층과 runtime/automation surface를 지향함을 설명한다. |
+| docs | `apps/client/README.md` | Flutter client와 `iop_console` package의 책임 경계를 설명한다. |
+| user | 없음 | 사용자가 `agent-ui 생성해`라고 요청했다. |
+
+## Structure
+
+- `views/`: console section 또는 운영 업무 단위 정의
+- `components/`: 반복 UI 구성요소 정의
+- `archive/`: 현재 기준이 아닌 과거 정의/결정 로그
+
+## Reading Rules
+
+- 현재 UI 동기화는 이 디렉터리의 활성 문서를 기준으로 한다.
+- `archive/**`는 과거 비교, 복원, 특정 근거 확인 요청이 있을 때만 읽는다.
+
+## Sync Rules
+
+- frame-view가 있으면 view region id와 frame region id는 동일해야 한다.
+- view에서 참조한 component id는 `components/` 아래에 정의되어야 한다.
+- frame은 definition을 대체하지 않는다.
+- `implemented`, `planned`, `assumed`, `unknown` 상태를 섞어 쓰지 않는다.
+
+## Decision History
+
+- 2026-06-25: 기존 Flutter client와 `iop_console` 구현을 근거로 code-first agent-ui scaffold를 생성했다.
+

agent-ui/definition/views/agent/index.md

@@ -0,0 +1,91 @@
+---
+ui_doc_type: view
+view_id: agent
+status: implemented
+frame: null
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_agent_panel.dart
+    notes: IopAgentPanel mounts AgentShell with an IOP capability introduction message.
+  - type: code
+    path: apps/client/lib/main.dart
+    notes: iopDefaultCapabilityPack defines Edge Control, Node Management, Runtime Dispatch, Execution Tracing, and Maintenance Mode.
+  - type: docs
+    path: apps/client/README.md
+    notes: The client exposes IOP operation and maintenance agent capability through iop_console.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+regions:
+  - agent.surface
+  - agent.capabilities
+  - agent.prompt
+---
+
+# Agent
+
+View ID: `agent`
+
+Frame:
+- 없음
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_agent_panel.dart` | `IopAgentPanel`이 `AgentShell`과 capability intro message를 렌더링한다. |
+| code | `apps/client/lib/main.dart` | 기본 capability pack을 정의하고 agent panel에 전달한다. |
+| docs | `apps/client/README.md` | IOP 운영/유지보수 agent 화면을 embeddable widget boundary로 제공한다고 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+IOP operation capability를 대화형 agent shell로 노출하는 surface다.
+
+## Primary Users
+
+- IOP operator
+- agent capability integration을 검증하는 engineer
+
+## Primary Tasks
+
+- 등록된 IOP capability 확인
+- IOP operations 관련 질문 또는 command 입력
+
+## Information Priority
+
+1. agent shell readiness
+2. registered capability list
+3. prompt input
+
+## Regions
+
+| Region ID | Purpose | Component | Priority | Notes |
+|-----------|---------|-----------|----------|-------|
+| `agent.surface` | AgentShell 본문과 메시지 표시 | `agent-panel` | high | busy=false baseline이다. |
+| `agent.capabilities` | capability pack 소개 표시 | `agent-panel` | high | `main.dart`의 기본 capability pack을 메시지로 렌더링한다. |
+| `agent.prompt` | operator input placeholder 표시 | `agent-panel` | medium | placeholder는 `Ask about IOP operations`다. |
+
+## Actions
+
+| Action ID | Trigger | Result | Guard |
+|-----------|---------|--------|-------|
+| `agent.submit` | AgentShell prompt submit | `onSubmit` callback이 있으면 입력을 전달한다. | callback이 연결되어 있어야 한다. |
+
+## States
+
+- loading: 현재 구현은 `busy: false` 고정으로 loading 근거 없음
+- empty: intro message가 항상 표시된다.
+- error: 현재 구현 근거 없음
+- permission-denied: 현재 구현 근거 없음
+
+## Open Questions
+
+- 없음
+
+## Decision History
+
+- 2026-06-25: `IopAgentPanel` 구현을 기준으로 agent view를 정의했다.
+

agent-ui/definition/views/edges/index.md

@@ -0,0 +1,98 @@
+---
+ui_doc_type: view
+view_id: edges
+status: implemented
+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: `implemented`
+
+## 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를 정의했다.
+

agent-ui/definition/views/execution-logs/index.md

@@ -0,0 +1,95 @@
+---
+ui_doc_type: view
+view_id: execution-logs
+status: implemented
+frame: null
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/execution_logs_panel.dart
+    notes: ExecutionLogsPanel renders edge filter, refresh action, and lifecycle event list.
+  - type: code
+    path: apps/client/lib/client_home_page.dart
+    notes: ClientHomePage injects ExecutionLogsPanel into the shell executionLogs section.
+  - type: docs
+    path: README.md
+    notes: Edge aggregates execution history and lifecycle events for operational visibility.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+regions:
+  - execution-logs.header
+  - execution-logs.edge-selector
+  - execution-logs.event-list
+  - execution-logs.event-entry
+---
+
+# Execution Logs
+
+View ID: `execution-logs`
+
+Frame:
+- 없음
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/execution_logs_panel.dart` | `ExecutionLogsPanel`이 Edge filter, loading/error/empty state, event list를 렌더링한다. |
+| code | `apps/client/lib/client_home_page.dart` | shell execution logs section에 `ExecutionLogsPanel`을 주입한다. |
+| docs | `README.md` | Edge는 execution history aggregation과 event aggregation을 담당한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+선택 Edge의 lifecycle event와 execution log timeline을 시간순으로 확인한다.
+
+## Primary Users
+
+- IOP operator
+- lifecycle event를 추적하는 engineer
+
+## Primary Tasks
+
+- Edge별 event filtering
+- event type, reason, node/source, timestamp 확인
+- event list refresh
+
+## Information Priority
+
+1. event type과 severity color
+2. event reason
+3. node/source와 timestamp
+
+## Regions
+
+| Region ID | Purpose | Component | Priority | Notes |
+|-----------|---------|-----------|----------|-------|
+| `execution-logs.header` | title, filter Edge selector, refresh 표시 | `edge-selector` | high | `Lifecycle Events & Logs` heading을 포함한다. |
+| `execution-logs.edge-selector` | event filter Edge 선택 | `edge-selector` | high | 선택 Edge의 events를 대상으로 한다. |
+| `execution-logs.event-list` | event timeline 목록 표시 | `event-log-entry` | high | ListView로 event entry를 반복한다. |
+| `execution-logs.event-entry` | 단일 event의 type, reason, source 표시 | `event-log-entry` | high | severity별 color/icon 기준을 사용한다. |
+
+## Actions
+
+| Action ID | Trigger | Result | Guard |
+|-----------|---------|--------|-------|
+| `execution-logs.select-edge` | Filter Edge dropdown change | 선택 Edge events로 전환한다. | Edge 목록이 있어야 한다. |
+| `execution-logs.refresh` | Refresh icon button | 선택 Edge events를 다시 fetch한다. | 선택 Edge가 있어야 한다. |
+
+## States
+
+- loading: event fetch 중 spinner를 표시한다.
+- empty: event가 없으면 `No Events Captured` 메시지를 표시한다.
+- error: event fetch 실패 메시지를 표시한다.
+- permission-denied: 현재 구현 근거 없음
+
+## Open Questions
+
+- 없음
+
+## Decision History
+
+- 2026-06-25: `ExecutionLogsPanel` 구현을 기준으로 execution-logs view를 정의했다.
+

agent-ui/definition/views/index.md

@@ -0,0 +1,48 @@
+---
+ui_doc_type: views-index
+views:
+  - overview
+  - edges
+  - nodes
+  - runtime
+  - execution-logs
+  - agent
+---
+
+# View Definitions
+
+## View Tree
+
+| View ID | Status | Evidence | Description |
+|---------|--------|----------|-------------|
+| `overview` | implemented | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | Control Plane endpoint, wire connection, auth reference, health summary를 보여준다. |
+| `edges` | implemented | `apps/client/lib/widgets/edges_panel.dart` | Control Plane에 등록된 Edge 목록과 선택 Edge 상세를 보여준다. |
+| `nodes` | implemented | `apps/client/lib/widgets/nodes_panel.dart` | 선택 Edge의 Node inventory, adapter config, provider catalog를 보여준다. |
+| `runtime` | implemented | `apps/client/lib/widgets/runtime_panel.dart` | Edge operation command, domain agent status, operation history를 다룬다. |
+| `execution-logs` | implemented | `apps/client/lib/widgets/execution_logs_panel.dart` | 선택 Edge의 lifecycle event와 execution log timeline을 보여준다. |
+| `agent` | implemented | `packages/flutter/iop_console/lib/src/iop_agent_panel.dart` | IOP operation capability를 담은 agent shell surface다. |
+
+## Navigation
+
+- `overview` -> `edges`: 좌측 rail의 Edges 버튼을 선택한다.
+- `overview` -> `nodes`: 좌측 rail의 Nodes 버튼을 선택한다.
+- `overview` -> `runtime`: 좌측 rail의 Runtime 버튼을 선택한다.
+- `overview` -> `execution-logs`: 좌측 rail의 Execution & Logs 버튼을 선택한다.
+- `overview` -> `agent`: 좌측 rail의 Agent 버튼을 선택한다.
+- `edges`, `nodes`, `runtime`, `execution-logs`, `agent` -> any listed view: 좌측 rail section 선택으로 전환한다.
+
+## Common States
+
+- loading
+- empty
+- error
+- permission-denied
+
+## Common Permissions
+
+- operator: Control Plane 상태 조회와 Edge command 실행 UI에 접근한다.
+
+## Open Questions
+
+- 없음
+

agent-ui/definition/views/nodes/index.md

@@ -0,0 +1,100 @@
+---
+ui_doc_type: view
+view_id: nodes
+status: implemented
+frame: null
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/nodes_panel.dart
+    notes: NodesPanel renders active edge selector, node cards, adapter chips, and provider catalog cards.
+  - type: code
+    path: apps/client/lib/client_home_page.dart
+    notes: ClientHomePage injects NodesPanel into the shell nodes section.
+  - type: docs
+    path: README.md
+    notes: Nodes are Edge-connected executors responsible for adapter execution and runtime status.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+regions:
+  - nodes.header
+  - nodes.edge-selector
+  - nodes.node-list
+  - nodes.node-status
+  - nodes.adapter-config
+  - nodes.provider-catalog
+---
+
+# Nodes
+
+View ID: `nodes`
+
+Frame:
+- 없음
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/nodes_panel.dart` | `NodesPanel`이 Edge selector, node card, adapter chip, provider catalog를 렌더링한다. |
+| code | `apps/client/lib/client_home_page.dart` | shell nodes section에 `NodesPanel`을 주입한다. |
+| docs | `README.md` | Node는 Edge에 연결되는 실제 실행자이며 runtime status를 보고한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+선택 Edge에 등록된 Node와 provider runtime 상태를 빠르게 점검한다.
+
+## Primary Users
+
+- IOP operator
+- runtime/provider capacity를 확인하는 engineer
+
+## Primary Tasks
+
+- active Edge 선택
+- Node 연결 상태 확인
+- Node config와 adapter enablement 확인
+- provider catalog의 health, load, model, lifecycle capability 확인
+
+## Information Priority
+
+1. active Edge와 Node 연결 상태
+2. Node config, concurrency, adapter 상태
+3. provider catalog capacity와 lifecycle capability
+
+## Regions
+
+| Region ID | Purpose | Component | Priority | Notes |
+|-----------|---------|-----------|----------|-------|
+| `nodes.header` | view title, refresh action 표시 | 없음 | high | `Nodes View` heading을 포함한다. |
+| `nodes.edge-selector` | active Edge 선택 | `edge-selector` | high | Edge 목록이 있을 때 dropdown을 보여준다. |
+| `nodes.node-list` | Node card 목록 표시 | `node-card` | high | alias, node id, connection badge를 포함한다. |
+| `nodes.node-status` | Node connected/offline 상태 표시 | `status-badge` | high | card header badge로 표시된다. |
+| `nodes.adapter-config` | Node adapter enablement 표시 | `status-badge` | medium | adapter chip으로 enabled/disabled를 나타낸다. |
+| `nodes.provider-catalog` | provider snapshot 목록 표시 | `provider-snapshot-card` | medium | provider health, capacity, queue, served models를 포함한다. |
+
+## Actions
+
+| Action ID | Trigger | Result | Guard |
+|-----------|---------|--------|-------|
+| `nodes.select-edge` | Active Edge dropdown change | 선택 Edge의 status view로 전환한다. | Edge 목록이 있어야 한다. |
+| `nodes.refresh` | Refresh icon button | 선택 Edge status를 다시 fetch한다. | 선택 Edge가 있어야 한다. |
+
+## States
+
+- loading: 선택 Edge status fetch 중 spinner를 표시한다.
+- empty: Edge가 없거나 Node가 없으면 안내 메시지를 표시한다.
+- error: status fetch 실패 메시지를 표시한다.
+- permission-denied: 현재 구현 근거 없음
+
+## Open Questions
+
+- 없음
+
+## Decision History
+
+- 2026-06-25: `NodesPanel` 구현을 기준으로 nodes view를 정의했다.
+

agent-ui/definition/views/overview/index.md

@@ -0,0 +1,99 @@
+---
+ui_doc_type: view
+view_id: overview
+status: implemented
+frame: null
+source_evidence:
+  - type: code
+    path: packages/flutter/iop_console/lib/src/iop_console_overview.dart
+    notes: IopConsoleOverview renders endpoint cards, connection status, auth reference, and refresh action.
+  - type: code
+    path: apps/client/lib/client_home_page.dart
+    notes: ClientHomePage injects IopConsoleOverview as the overview section.
+  - type: docs
+    path: apps/client/README.md
+    notes: Client config is injected with Control Plane HTTP and WebSocket URLs.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+regions:
+  - overview.header
+  - overview.connection-status
+  - overview.endpoints
+  - overview.health-summary
+  - overview.auth
+  - overview.refresh
+---
+
+# Overview
+
+View ID: `overview`
+
+Frame:
+- 없음
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `packages/flutter/iop_console/lib/src/iop_console_overview.dart` | `IopConsoleOverview`가 endpoint card, connection badge, auth reference, refresh action을 렌더링한다. |
+| code | `apps/client/lib/client_home_page.dart` | `ClientHomePage`가 overview section에 `IopConsoleOverview`를 주입한다. |
+| docs | `apps/client/README.md` | Control Plane HTTP/WS URL을 build-time config로 주입하는 client 표면을 설명한다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+운영자가 Control Plane 연결 상태와 client endpoint 구성을 가장 먼저 확인하는 landing view다.
+
+## Primary Users
+
+- IOP operator
+- 개발 환경에서 Control Plane wire 연결을 확인하는 engineer
+
+## Primary Tasks
+
+- Control Plane HTTP/WS endpoint 확인
+- wire connection 상태 확인
+- auth token reference 존재 여부 확인
+- connection refresh 실행
+
+## Information Priority
+
+1. Control Plane wire connection status
+2. HTTP and WebSocket endpoint values
+3. protocol, auth reference, refresh action
+
+## Regions
+
+| Region ID | Purpose | Component | Priority | Notes |
+|-----------|---------|-----------|----------|-------|
+| `overview.header` | view title과 Control Plane context 표시 | 없음 | high | `Operations Overview` heading을 포함한다. |
+| `overview.connection-status` | wire 연결 상태를 badge로 표시 | `status-badge` | high | `Connected`, `Disconnected`, `Connecting`, `Error` 상태를 상위 색상으로 보여준다. |
+| `overview.endpoints` | HTTP REST API와 WebSocket wire endpoint 표시 | `endpoint-card` | high | build-time config 값을 그대로 보여준다. |
+| `overview.health-summary` | protocol과 active wire 요약 | `status-badge` | medium | 현재 구현은 stat tile 형태다. |
+| `overview.auth` | auth token reference 표시 | `endpoint-card` | medium | 값이 없으면 unauthenticated/public으로 표시한다. |
+| `overview.refresh` | connection refresh action 제공 | 없음 | medium | `onRefresh`가 있으면 버튼을 보여준다. |
+
+## Actions
+
+| Action ID | Trigger | Result | Guard |
+|-----------|---------|--------|-------|
+| `overview.refresh` | Refresh Connection button | wire connect와 Edge fetch를 다시 시도한다. | 없음 |
+
+## States
+
+- loading: wire status가 `Connecting`이거나 refresh가 진행 중인 상태
+- empty: endpoint config는 항상 표시되므로 별도 empty state는 없다.
+- error: wire status가 `Error`로 표시된다.
+- permission-denied: 현재 구현 근거 없음
+
+## Open Questions
+
+- 없음
+
+## Decision History
+
+- 2026-06-25: `IopConsoleOverview` 구현을 기준으로 overview view를 정의했다.
+

agent-ui/definition/views/runtime/index.md

@@ -0,0 +1,106 @@
+---
+ui_doc_type: view
+view_id: runtime
+status: implemented
+frame: null
+source_evidence:
+  - type: code
+    path: apps/client/lib/widgets/runtime_panel.dart
+    notes: RuntimePanel renders edge selector, operation command actions, domain agent grid, and operation history.
+  - type: code
+    path: apps/client/lib/client_home_page.dart
+    notes: ClientHomePage injects RuntimePanel into the shell runtime section.
+  - type: docs
+    path: README.md
+    notes: Runtime and automation operations are Edge-owned shared operations exposed through Control Plane.
+  - type: user
+    path: null
+    notes: Initial scaffold requested by user.
+regions:
+  - runtime.header
+  - runtime.edge-selector
+  - runtime.command-actions
+  - runtime.command-status
+  - runtime.domain-agents
+  - runtime.operation-history
+---
+
+# Runtime
+
+View ID: `runtime`
+
+Frame:
+- 없음
+
+Status: `implemented`
+
+## Source Evidence
+
+| Type | Path | Notes |
+|------|------|-------|
+| code | `apps/client/lib/widgets/runtime_panel.dart` | `RuntimePanel`이 operation command, agent status/command dialogs, domain agent grid, operation history를 렌더링한다. |
+| code | `apps/client/lib/client_home_page.dart` | shell runtime section에 `RuntimePanel`을 주입한다. |
+| docs | `README.md` | Runtime/Automation operation은 Edge가 소유하고 Control Plane이 제어 요청을 전달하는 구조다. |
+| user | 없음 | 초기 agent-ui 생성을 요청했다. |
+
+## Purpose
+
+운영자가 선택 Edge에 health check, agent status, agent command를 보내고 domain agent 상태와 command 이력을 확인한다.
+
+## Primary Users
+
+- IOP operator
+- runtime/automation command를 검증하는 engineer
+
+## Primary Tasks
+
+- active Edge 선택
+- health check 실행
+- agent status 조회
+- agent command 전송
+- domain agent lifecycle 상태 확인
+- operation execution history 확인
+
+## Information Priority
+
+1. active Edge와 command action availability
+2. command result status
+3. domain agent lifecycle state
+4. operation execution history
+
+## Regions
+
+| Region ID | Purpose | Component | Priority | Notes |
+|-----------|---------|-----------|----------|-------|
+| `runtime.header` | title, active Edge selector, refresh 표시 | `edge-selector` | high | narrow width에서는 header control이 줄바꿈된다. |
+| `runtime.edge-selector` | active Edge 선택 | `edge-selector` | high | command target Edge를 결정한다. |
+| `runtime.command-actions` | system/agent command 실행 버튼 표시 | `command-action-bar` | high | health check, agent status, agent command를 포함한다. |
+| `runtime.command-status` | 최근 command 결과 표시 | `status-badge` | high | success/failure alert로 표시된다. |
+| `runtime.domain-agents` | Edge domain agent grid 표시 | `domain-agent-card` | medium | lifecycle state, summary, active command id를 포함한다. |
+| `runtime.operation-history` | operation execution history 표시 | `operation-history-list` | medium | command id, selector, summary, error, status를 포함한다. |
+
+## Actions
+
+| Action ID | Trigger | Result | Guard |
+|-----------|---------|--------|-------|
+| `runtime.select-edge` | Active Edge dropdown change | 선택 Edge operations를 fetch한다. | Edge 목록이 있어야 한다. |
+| `runtime.refresh` | Refresh icon button | 선택 Edge operations를 다시 fetch한다. | 선택 Edge가 있어야 한다. |
+| `runtime.health-check` | Health Check button | `health.check` Edge command를 보낸다. | loading 중이 아니어야 한다. |
+| `runtime.agent-status` | Agent Status dialog submit | `agent.status` Edge command를 target selector와 함께 보낸다. | selector가 비어 있지 않아야 한다. |
+| `runtime.agent-command` | Agent Command dialog submit | `agent.command` Edge command를 selector와 command parameter로 보낸다. | selector와 command가 비어 있지 않아야 한다. |
+
+## States
+
+- loading: operations fetch 또는 command send 중 spinner/disabled action을 표시한다.
+- empty: Edge가 없거나 domain agent/operation history가 없으면 empty message를 표시한다.
+- error: operations fetch 또는 command send failure를 error text/status로 표시한다.
+- permission-denied: 현재 구현 근거 없음
+
+## Open Questions
+
+- 없음
+
+## Decision History
+
+- 2026-06-25: `RuntimePanel` 구현을 기준으로 runtime view를 정의했다.
+

agent-ui/frame/index.md

@@ -0,0 +1,22 @@
+---
+ui_doc_type: frame-index
+frames: []
+---
+
+# UI Frames
+
+## Purpose
+
+이 디렉터리는 visual source가 있는 view의 wireframe과 definition 연결 정보를 보관한다.
+
+## Frame Sources
+
+- 현재 연결된 visual source 없음
+
+## Rules
+
+- frame은 definition을 대체하지 않는다.
+- visual source가 있으면 대응되는 frame index에 기록한다.
+- visual source가 없으면 `views/<view-id>/`를 만들지 않는다.
+- frame-view가 있으면 frame region id는 definition region id와 동일해야 한다.
+