79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
---
|
|
ui_doc_type: component
|
|
component_id: section-surface
|
|
status: 구현됨
|
|
source_evidence:
|
|
- type: code
|
|
path: packages/flutter/oto_console/lib/src/oto_console_shell.dart
|
|
notes: "OtoConsoleSectionSurface 구현"
|
|
- type: docs
|
|
path: apps/client/README.md
|
|
notes: "console package embedding"
|
|
- type: user
|
|
path: null
|
|
notes: "agent-ui 생성 요청"
|
|
---
|
|
|
|
# Section Surface
|
|
|
|
Component ID: `section-surface`
|
|
|
|
Status: `구현됨`
|
|
|
|
## Source Evidence
|
|
|
|
| Type | Path | Notes |
|
|
|------|------|-------|
|
|
| code | `packages/flutter/oto_console/lib/src/oto_console_shell.dart` | `OtoConsoleSectionSurface` 구현 |
|
|
| docs | `apps/client/README.md` | console package embedding |
|
|
| user | 없음 | agent-ui 생성 요청 |
|
|
|
|
## Purpose
|
|
|
|
아직 전용 surface가 없거나 fallback으로 표시하는 section의 제목, empty state, detail rows를 한 구조로 보여준다.
|
|
|
|
## Used By
|
|
|
|
- `settings`: `settings.header`, `settings.state-panel`, `settings.endpoint-details`
|
|
- shell fallback for `runners`, `pipelines`, `executions`, `artifacts`
|
|
|
|
## Anatomy
|
|
|
|
- section icon
|
|
- section title
|
|
- empty state panel
|
|
- optional detail tiles
|
|
|
|
## Jenkins Reference Alignment
|
|
|
|
- Jenkins Manage Jenkins tile/detail page와 classic empty content panel을 fallback reference로 삼는다.
|
|
- 전용 surface가 없는 section도 제목, 상태, detail rows를 같은 밀도로 보여줘야 한다.
|
|
- settings fallback은 Jenkins Manage Jenkins 전체가 아니라 OTO runtime endpoint summary에만 대응한다.
|
|
|
|
## Target Layout Delta
|
|
|
|
- section surface는 fallback empty state보다 settings/runtime summary group을 담는 reusable surface로 확장하는 것을 목표로 둔다.
|
|
- title, detail rows, empty/error panel이 Jenkins 관리 화면처럼 분리되어야 한다.
|
|
- 현재 fallback component는 grouped settings layout 반영이 완료되어 `구현됨` 상태다.
|
|
|
|
## Variants
|
|
|
|
- default: empty panel only
|
|
- details: HTTP API, Wire URL, browser API policy 같은 detail tiles 포함
|
|
|
|
## States
|
|
|
|
- default
|
|
- empty
|
|
- detail-present
|
|
- error: 없음
|
|
- disabled: 없음
|
|
|
|
## Rules
|
|
|
|
- 전용 view 구현이 없을 때만 fallback으로 사용한다.
|
|
- detail 값은 한 줄 ellipsis로 표시한다.
|
|
|
|
## Decision History
|
|
|
|
- 2026-06-24: shell fallback surface를 `section-surface` component로 정의했다.
|