diff --git a/agent-ui/README.md b/agent-ui/README.md new file mode 100644 index 0000000..bf75c04 --- /dev/null +++ b/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`로 표시한다. + diff --git a/agent-ui/archive/user-review/.gitkeep b/agent-ui/archive/user-review/.gitkeep new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/agent-ui/archive/user-review/.gitkeep @@ -0,0 +1 @@ + diff --git a/agent-ui/definition/archive/components/.gitkeep b/agent-ui/definition/archive/components/.gitkeep new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/agent-ui/definition/archive/components/.gitkeep @@ -0,0 +1 @@ + diff --git a/agent-ui/definition/archive/views/.gitkeep b/agent-ui/definition/archive/views/.gitkeep new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/agent-ui/definition/archive/views/.gitkeep @@ -0,0 +1 @@ + diff --git a/agent-ui/definition/components/agent-panel/index.md b/agent-ui/definition/components/agent-panel/index.md new file mode 100644 index 0000000..4a10729 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/components/command-action-bar/index.md b/agent-ui/definition/components/command-action-bar/index.md new file mode 100644 index 0000000..85f03b3 --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/console-shell/index.md b/agent-ui/definition/components/console-shell/index.md new file mode 100644 index 0000000..778b691 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/components/domain-agent-card/index.md b/agent-ui/definition/components/domain-agent-card/index.md new file mode 100644 index 0000000..b811e7d --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/edge-detail-list/index.md b/agent-ui/definition/components/edge-detail-list/index.md new file mode 100644 index 0000000..674edcb --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/edge-list/index.md b/agent-ui/definition/components/edge-list/index.md new file mode 100644 index 0000000..c89f8bb --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/edge-selector/index.md b/agent-ui/definition/components/edge-selector/index.md new file mode 100644 index 0000000..0b145c1 --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/endpoint-card/index.md b/agent-ui/definition/components/endpoint-card/index.md new file mode 100644 index 0000000..aa596ad --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/event-log-entry/index.md b/agent-ui/definition/components/event-log-entry/index.md new file mode 100644 index 0000000..e3f9296 --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/index.md b/agent-ui/definition/components/index.md new file mode 100644 index 0000000..0aaaeed --- /dev/null +++ b/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별 변형이 필요하면 `/.md` 또는 하위 디렉터리를 사용한다. +- 실제 구현체 이름과 다를 수 있지만, view 정의서에서 참조하는 component id는 이 목록에 있어야 한다. + diff --git a/agent-ui/definition/components/node-card/index.md b/agent-ui/definition/components/node-card/index.md new file mode 100644 index 0000000..67b4353 --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/operation-history-list/index.md b/agent-ui/definition/components/operation-history-list/index.md new file mode 100644 index 0000000..c376868 --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/provider-snapshot-card/index.md b/agent-ui/definition/components/provider-snapshot-card/index.md new file mode 100644 index 0000000..fae812a --- /dev/null +++ b/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로 정의했다. + diff --git a/agent-ui/definition/components/status-badge/index.md b/agent-ui/definition/components/status-badge/index.md new file mode 100644 index 0000000..27e5f68 --- /dev/null +++ b/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로 추출했다. + diff --git a/agent-ui/definition/index.md b/agent-ui/definition/index.md new file mode 100644 index 0000000..8e42e29 --- /dev/null +++ b/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를 생성했다. + diff --git a/agent-ui/definition/views/agent/index.md b/agent-ui/definition/views/agent/index.md new file mode 100644 index 0000000..4f0864a --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/views/edges/index.md b/agent-ui/definition/views/edges/index.md new file mode 100644 index 0000000..d1e5055 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/views/execution-logs/index.md b/agent-ui/definition/views/execution-logs/index.md new file mode 100644 index 0000000..93c0060 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/views/index.md b/agent-ui/definition/views/index.md new file mode 100644 index 0000000..048e0ed --- /dev/null +++ b/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 + +- 없음 + diff --git a/agent-ui/definition/views/nodes/index.md b/agent-ui/definition/views/nodes/index.md new file mode 100644 index 0000000..640d7ff --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/views/overview/index.md b/agent-ui/definition/views/overview/index.md new file mode 100644 index 0000000..0366064 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/definition/views/runtime/index.md b/agent-ui/definition/views/runtime/index.md new file mode 100644 index 0000000..5d7c783 --- /dev/null +++ b/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를 정의했다. + diff --git a/agent-ui/frame/index.md b/agent-ui/frame/index.md new file mode 100644 index 0000000..83cc71f --- /dev/null +++ b/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//`를 만들지 않는다. +- frame-view가 있으면 frame region id는 definition region id와 동일해야 한다. +