---
ui_doc_type: component
component_id: state-panel
status: 구현됨
source_evidence:
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_runners_surface.dart
    notes: "runner empty/error state panel"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_jobs_surface.dart
    notes: "jobs empty/error state panel"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_executions_surface.dart
    notes: "executions empty/error state panel"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_artifacts_surface.dart
    notes: "artifacts empty/error state panel"
---

# State Panel

Component ID: `state-panel`

Status: `구현됨`

## Source Evidence

| Type | Path | Notes |
|------|------|-------|
| code | `packages/flutter/oto_console/lib/src/oto_runners_surface.dart` | runner empty/error state panel |
| code | `packages/flutter/oto_console/lib/src/oto_jobs_surface.dart` | jobs empty/error state panel |
| code | `packages/flutter/oto_console/lib/src/oto_executions_surface.dart` | executions empty/error state panel |
| code | `packages/flutter/oto_console/lib/src/oto_artifacts_surface.dart` | artifacts empty/error state panel |

## Purpose

surface snapshot의 loading, empty, error 상태를 같은 밀도와 테두리 스타일로 보여준다.

## Used By

- `runners`: `runners.state-panel`
- `pipelines`: `pipelines.state-panel`
- `executions`: `executions.state-panel`
- `artifacts`: `artifacts.state-panel`
- `settings`: `settings.state-panel`

## Anatomy

- icon
- title
- message
- optional progress indicator for loading

## Jenkins Reference Alignment

- Jenkins administrative monitors, empty dashboard/job list, error banners를 러프 참조로 삼는다.
- empty/error/permission denied는 작업자가 다음 action을 판단할 수 있는 짧은 title과 message를 제공해야 한다.
- Jenkins warning/monitor처럼 민감 payload를 그대로 복제하지 않고 display-safe summary를 우선한다.

## Target Layout Delta

- state panel은 list 영역을 통째로 대신하는 card가 아니라 page/list context 안의 monitor/banner로도 쓸 수 있어야 한다.
- error/permission denied는 status severity, summary, optional next action slot을 분리한다.
- 현재 surface별 state panel 구현은 목표 state pattern 반영이 완료되어 `구현됨` 상태다.

## Variants

- loading: centered progress indicator
- empty: neutral panel
- error: red tinted panel

## States

- loading
- empty
- error
- permission-denied: 계획 extension candidate

## Rules

- error message는 snapshot `errorMessage`가 있으면 사용하고 없으면 fallback 문구를 쓴다.
- permission-denied를 추가하면 권한/감사 SDD 기준의 민감 payload 미노출을 따라야 한다.

## Decision History

- 2026-06-24: 여러 surface의 empty/error 반복 UI를 `state-panel`로 정의했다.
