---
ui_doc_type: component
component_id: connection-status-grid
status: 구현됨
source_evidence:
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_console_overview.dart
    notes: "_ConnectionGrid, _EndpointStatusTile 구현"
  - type: code
    path: packages/flutter/oto_console/lib/src/oto_console_contract.dart
    notes: "OtoCoreConnectionSnapshot, OtoCoreEndpointStatus 상태 모델"
  - type: user
    path: null
    notes: "agent-ui 생성 요청"
---

# Connection Status Grid

Component ID: `connection-status-grid`

Status: `구현됨`

## Source Evidence

| Type | Path | Notes |
|------|------|-------|
| code | `packages/flutter/oto_console/lib/src/oto_console_overview.dart` | `_ConnectionGrid`, `_EndpointStatusTile` 구현 |
| code | `packages/flutter/oto_console/lib/src/oto_console_contract.dart` | connection snapshot 상태 모델 |
| user | 없음 | agent-ui 생성 요청 |

## Purpose

Core health/readiness endpoint 결과를 함께 비교해서 online/degraded/offline 판단을 돕는다.

## Used By

- `overview`: `overview.connection-status`

## Anatomy

- health status tile
- readiness status tile
- status label
- HTTP status/path detail

## Variants

- wide: two-column row
- narrow: stacked column

## States

- checking
- online
- degraded
- offline
- error

## Rules

- health와 readiness 중 하나만 OK이면 degraded로 해석한다.
- status code가 없으면 path만 표시한다.

## Decision History

- 2026-06-24: overview connection grid를 component로 정의했다.

