---
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로 정의했다.