대시보드

relay MCP 서버는 세션이 시작되면 웹 대시보드를 함께 띄웁니다. 에이전트가 어떤 생각을 하고, 어떻게 소통하며, 태스크를 어떻게 진행하는지 실시간으로 지켜볼 수 있습니다.

접속

세션이 시작되면 대시보드 URL이 출력됩니다. 기본 포트는 3456이고, 이미 사용 중이면 3457–3465 범위에서 빈 포트를 자동으로 찾습니다.

http://localhost:3456

레이아웃

relay 대시보드 — 라이브 세션

헤더

헤더에는 relay 브랜드, 세션 진행 위젯, 세션 제어 버튼이 있습니다.

세션 진행 위젯 — 헤더 중앙의 알약 모양 위젯으로, 세션 상태를 한눈에 파악할 수 있습니다:

태스크 완료 비율과 퍼센트 (예: “3/8 tasks 37%”)
활성 에이전트 수 (현재 working 상태)
세션 시작 이후 경과 시간 (자동 갱신)

세션 데이터가 없으면 숨깁니다. 레이아웃 안정성을 위해 고정폭 숫자를 사용합니다.

Agent Arena (좌측 사이드바)

세션에 참여한 모든 에이전트와 현재 상태: idle (회색), working (초록), waiting (노랑)
각 에이전트가 지금 무슨 생각을 하는지 실시간으로 보여줌
태스크 완료 미니 바 — 에이전트 카드 하단의 얇은 프로그레스 바. 완료/전체 태스크 비율을 에이전트 고유 색상으로 나타냄. 호버하면 “N of M tasks done” 툴팁이 뜸. 할당된 태스크가 없으면 숨김.
에이전트를 클릭하면 Activity 피드가 해당 에이전트 중심으로 전환

Activity Feed (메인 영역)

메시지, 추론 스트림, 태스크 변경, 아티팩트, 리뷰 등 모든 이벤트의 실시간 타임라인
이벤트 타입이나 에이전트 기준으로 필터링 가능
추론 스트림은 에이전트가 작업하는 동안 텍스트가 실시간으로 흘러들어옴

키보드 내비게이션 — 마우스 없이도 피드를 탐색할 수 있습니다. 파워 유저와 스크린 리더 사용자에게 유용합니다.

키	동작
`j` / `↓`	다음 항목으로 포커스 이동
`k` / `↑`	이전 항목으로 포커스 이동
`Enter`	추론 항목 펼치기/접기
`Escape`	포커스 해제

필터 입력창에 포커스가 있으면 키보드 내비게이션은 자동으로 꺼집니다. 포커스된 항목은 화면에 자동 스크롤되며 강조 링으로 구분됩니다.

Task Board (하단, 접기 가능)

모든 태스크의 Kanban: todo → in_progress → in_review → done
에이전트가 태스크를 클레임하거나 완료하면 즉시 반영
태스크를 클릭하면 담당자, 우선순위, 설명, 의존성 등 세부 정보를 볼 수 있음

프로그레스 바 — Task Board 상단의 상태별 스택 바. Kanban 컬럼과 같은 색상으로 각 상태의 비율을 나타냅니다 (todo=회색, in_progress=파랑, in_review=황색, done=초록). 상태가 바뀌면 부드럽게 전환됩니다. 바 아래에 카운트 레이블도 함께 보입니다.

의존성 표시 — 태스크 카드에 의존성 체인 정보가 나타납니다:

차단 배지: depends_on 중 아직 완료되지 않은 태스크가 있으면 주황색 “Blocked by N” 배지와 함께 시각적 약화 적용 (점선 테두리, 불투명도 감소)
차단 대상 표시: 다른 태스크가 이 태스크에 의존하면 “Blocks N tasks”를 연한 텍스트로 표시
의존성이 해소되면(status → done) 배지가 자동으로 사라짐

태스크 상세 모달

태스크 카드를 클릭하면 상세 모달이 열립니다:

태스크 제목, 담당자, 우선순위 (우선순위에 맞는 상단 컬러 바)
Markdown 형식의 전체 설명
참조용 태스크 ID
의존 태스크(Depends on) 섹션 — 부모 태스크 목록을 클릭 가능한 상태 배지와 함께 표시. 관련 태스크 사이를 오갈 수 있음
파생 태스크(Derived tasks) 섹션 — 자식/하위 태스크 목록
부드러운 열기 애니메이션 (scale + fade)
모바일(768px 미만)에서는 팝오버 대신 바텀 시트로 표시

아티팩트 상세 모달

Activity Feed에서 아티팩트 카드를 클릭하면 전체 내용을 확인할 수 있습니다:

아티팩트 이름, 타입 배지, 작성자, 생성 시각
Markdown으로 렌더링된 전체 내용
태스크 상세 모달과 동일한 팝오버 동작 (Escape로 닫기, 바깥 클릭, 모바일에서는 바텀 시트)

모바일 레이아웃

768px보다 좁은 화면에서는 3패널 데스크톱 레이아웃 대신 탭 기반 모바일 레이아웃으로 바뀝니다:

하단 탭 바: Agents, Activity, Tasks 세 개 탭
각 탭에 아이콘, 레이블, 배지 카운트를 표시 (예: 작업 중인 에이전트 수, 진행 중인 태스크 수)
성능을 위해 활성 탭의 패널만 렌더링
활성 탭에 강조 색상 인디케이터 적용
탭 바는 뷰포트 하단에 고정하며, safe-area 패딩 적용