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

2.9 KiB

ui_doc_type components
components-index
console-shell
status-badge
endpoint-card
edge-selector
edge-list
edge-detail-list
node-card
provider-snapshot-card
command-action-bar
domain-agent-card
operation-history-list
event-log-entry
agent-panel

Component Definitions

Component List

Component ID Status Evidence Description
console-shell 구현됨 packages/flutter/iop_console/lib/src/iop_console_shell.dart 좌측 rail과 section slot을 제공하는 console shell이다.
status-badge 구현됨 apps/client/lib/widgets/*.dart, packages/flutter/iop_console/lib/src/iop_console_overview.dart connection, node, command, lifecycle 상태를 색상 badge/chip으로 표시한다.
endpoint-card 구현됨 packages/flutter/iop_console/lib/src/iop_console_overview.dart endpoint 또는 token reference 값을 label과 icon으로 표시한다.
edge-selector 구현됨 apps/client/lib/widgets/nodes_panel.dart, apps/client/lib/widgets/runtime_panel.dart, apps/client/lib/widgets/execution_logs_panel.dart active/filter Edge dropdown과 refresh control이다.
edge-list 구현됨 apps/client/lib/widgets/edges_panel.dart Edge 목록과 선택 상태를 표시한다.
edge-detail-list 구현됨 apps/client/lib/widgets/edges_panel.dart 선택 Edge 상세 metadata와 capability chip을 표시한다.
node-card 구현됨 apps/client/lib/widgets/nodes_panel_sections.dart Node alias/id, connection state, config, adapter 상태를 표시한다.
provider-snapshot-card 구현됨 apps/client/lib/widgets/nodes_panel_sections.dart provider health, load, queue, served model, lifecycle capability를 표시한다.
command-action-bar 구현됨 apps/client/lib/widgets/runtime_panel.dart health check, agent status, agent command action을 제공한다.
domain-agent-card 구현됨 apps/client/lib/widgets/runtime_panel.dart domain agent lifecycle state와 summary를 grid card로 표시한다.
operation-history-list 구현됨 apps/client/lib/widgets/runtime_panel.dart Edge operation execution history를 status와 함께 표시한다.
event-log-entry 구현됨 apps/client/lib/widgets/execution_logs_panel.dart lifecycle event 항목을 severity icon/color와 함께 표시한다.
agent-panel 구현됨 packages/flutter/iop_console/lib/src/iop_agent_panel.dart IOP capability intro message와 prompt를 포함한 agent shell이다.

Rules

  • component 정의는 구현 API가 아니라 UI 사용 규칙을 다룬다.
  • view별 변형이 필요하면 <component-id>/<variant>.md 또는 하위 디렉터리를 사용한다.
  • 실제 구현체 이름과 다를 수 있지만, view 정의서에서 참조하는 component id는 이 목록에 있어야 한다.