---
ui_doc_type: component
component_id: console-rail
status: 계획
source_evidence:
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_console_shell.dart
    notes: "_OtoConsoleRail, _RailButton 구현"
  - type: docs
    path: apps/client/README.md
    notes: "oto_console embeddable UI surface"
  - type: user
    path: null
    notes: "agent-ui 생성 요청"
---

# Console Rail

Component ID: `console-rail`

Status: `계획`

## Source Evidence

| Type | Path | Notes |
|------|------|-------|
| code | `packages/flutter/oto_console/lib/src/oto_console_shell.dart` | `_OtoConsoleRail`, `_RailButton` 구현 |
| docs | `apps/client/README.md` | embeddable console surface |
| user | 없음 | agent-ui 생성 요청 |

## Purpose

콘솔 section 사이를 빠르게 이동하는 고정 rail navigation을 제공한다.

## Used By

- `overview`: shell navigation
- `runners`: shell navigation
- `pipelines`: shell navigation
- `executions`: shell navigation
- `artifacts`: shell navigation
- `agent`: shell navigation
- `settings`: shell navigation

## Anatomy

- icon button
- tooltip
- selected visual state
- top main section group
- bottom agent/settings group

## Jenkins Reference Alignment

- Jenkins classic left task list의 빠른 destination과 Blue Ocean top navigation의 section switching을 OTO rail로 축약한다.
- Jenkins `Manage Jenkins`, `Build History`, job/run destination에 해당하는 주요 운영 화면은 rail destination으로 노출한다.
- Jenkins와 달리 breadcrumb stack은 현재 제공하지 않는다. 세부 route가 늘어나면 shell/header 쪽 후속 후보로 분리한다.

## Target Layout Delta

- rail은 현재 60px icon-only 구조를 유지하되, Jenkins 운영 destination grouping에 맞춰 main/workflow/administration grouping을 더 명확히 한다.
- selected state와 tooltip은 유지하고, 필요하면 section ordering을 overview, pipelines, executions, runners, artifacts, settings, agent 순서 후보로 재검토한다.
- 현재 rail 구현은 목표 grouping 전 단계이므로 코드 반영 전 상태는 `계획`이다.

## Variants

- default: 60px rail width, 56x48 button hit area
- selected: primary color icon and tinted background

## States

- default
- selected
- hover/focus via Flutter button semantics
- disabled: 없음

## Rules

- navigation destination은 `OtoConsoleSection` enum과 일치해야 한다.
- section 추가 시 rail button, enum, view definition을 함께 갱신하고, visual source가 있으면 frame-view definition도 함께 갱신한다.

## Decision History

- 2026-06-24: shell rail을 `console-rail` component로 정의했다.