# task-2116: 대시보드 시스템뷰 — CPU/RAM 실시간 모니터링 + 프로세스 목록

## 프로젝트: `/home/jay/workspace/dashboard/`

## 요구사항
시스템뷰 → 시스템상태 페이지 최상단에 CPU, RAM 상태를 동적으로 확인할 수 있는 기능 추가. 윈도우 작업관리자처럼 프로세스별 리소스 사용량 표시.

## 수정 내용

### 1. 백엔드 API 추가 (server.py 또는 routes_get.py)
- `GET /api/system/resources` 엔드포인트 추가
- psutil 라이브러리 활용:
  - CPU 사용률 (전체 + 코어별)
  - RAM 사용량 (총량, 사용 중, 여유, 퍼센트)
  - 프로세스 목록: PID, 이름, CPU%, MEM%, 상태
  - 상위 N개 프로세스 (CPU 또는 MEM 기준 정렬)
- 응답 형식: JSON

### 2. 프론트엔드 UI (components/SystemView.js 등)
- 시스템상태 최상단에 배치
- **CPU 게이지**: 현재 CPU 사용률 (원형 또는 바 차트)
- **RAM 게이지**: 사용 중 / 전체 (바 차트 + 퍼센트)
- **프로세스 테이블**: 윈도우 작업관리자 스타일
  - 컬럼: PID, 프로세스 이름, CPU%, MEM%, 상태
  - CPU% 또는 MEM% 기준 정렬 가능
  - 상위 20개 표시 (페이지네이션 또는 스크롤)
- **자동 갱신**: 5초 또는 10초 간격 폴링 (setInterval)
- 색상: CPU/RAM 80% 이상 빨간색 경고

### 3. 디자인 참고
- 대시보드 기존 디자인 시스템 따르기
- 카드 형태 (기존 SystemView 패턴)
- 게이지는 원형 차트 또는 Progress 바

## ★ 먼저 읽을 파일
- `/home/jay/workspace/dashboard/components/SystemView.js` — 기존 시스템뷰
- `/home/jay/workspace/dashboard/server.py` — API 라우팅
- `/home/jay/workspace/dashboard/routes_get.py` — GET 엔드포인트 패턴

## 완료 시그니처
- /api/system/resources → CPU/RAM/프로세스 JSON 응답
- 시스템뷰 상단에 게이지 + 프로세스 테이블 표시
- 자동 갱신 동작
- 대시보드 정상 작동

## 검증 시나리오
1. 대시보드 → 시스템뷰 → 상단에 CPU/RAM 게이지 표시
2. 프로세스 목록에 Claude 봇, uvicorn 등 주요 프로세스 보임
3. CPU% 정렬 클릭 → 높은 순으로 정렬
4. 5~10초 후 수치 자동 갱신

## 레벨
- normal

## 프로젝트
- dev-system