# task-938.2: 대시보드 토큰 사용량 시각화 (한정위임)

## 배경
- task-938.1에서 토큰 추적 엔진 + API를 구현 중
- 대시보드에서 토큰 사용량을 한눈에 확인할 수 있는 UI 필요
- 제이회장님 요구: "이상하게 토큰이 많이 소모된 작업이 있는지 한눈에 보여야 해"

## 데이터 소스 (task-938.1이 구현)

### API 엔드포인트 (server.py에 추가될 예정)
- `GET /api/token-usage` — 전체 토큰 원장
- `GET /api/token-anomaly` — 이상치 목록
- 기존 `/api/tasks` 응답에 `token_usage` 필드 추가

### 데이터 구조
```json
{
  "tasks": {
    "task-930.1": {
      "team_id": "dev1-team",
      "input_tokens": 150000,
      "output_tokens": 45000,
      "total_tokens": 195000,
      "cost_estimate_usd": 1.23,
      "timestamp": "2026-03-25T00:30:00"
    }
  },
  "summary": {
    "total_tokens": 5000000,
    "avg_tokens_per_task": 100000,
    "top_consumers": ["task-xxx"]
  }
}
```

## 작업 범위 (한정위임 — 끝까지 진행)

### 대시보드 토큰 사용량 뷰 구현

**위치**: 대시보드 기존 탭/뷰에 토큰 섹션 추가 또는 별도 탭

**필수 UI 요소:**

1. **요약 카드** (상단)
   - 총 토큰 사용량 (숫자 + 단위)
   - 총 추정 비용 ($)
   - 평균 태스크당 토큰
   - 이상치 건수 (빨간 배지)

2. **작업별 토큰 바 차트** (핵심)
   - 가로 막대 그래프: 각 태스크의 토큰 사용량
   - 평균선 표시 → 평균 대비 2배 이상은 **빨간색** 강조
   - 팀별 색상 구분
   - 최근 20~30건 표시 (스크롤)
   - 막대 hover 시 상세 정보 (input/output/cache/비용)

3. **이상치 알림 영역**
   - 평균 대비 토큰 소모가 비정상적으로 높은 작업 목록
   - 빨간 배경 + 경고 아이콘
   - 클릭 시 해당 작업 상세로 이동

4. **팀별 토큰 소비 파이 차트** (선택)
   - 어느 팀이 토큰을 많이 쓰는지 한눈에

5. **기존 팀 카드에 토큰 정보 추가**
   - 각 팀 카드에 최근 작업의 토큰 사용량 표시
   - 간단히 "150K tokens" 형태

## 디자인 가이드라인
- 기존 대시보드 디자인 톤 유지 (Tailwind CSS, 다크/라이트 호환)
- Chart.js 또는 순수 CSS 바 차트 (CDN 추가 최소화)
- 모바일 반응형
- 토큰 숫자 포맷: 1,000 이하 그대로, 1K~999K는 "150K", 1M 이상은 "1.2M"

## 대시보드 참고
- URL: `http://100.76.130.39:8000/dashboard/`
- 코드: `/home/jay/workspace/dashboard/`
- 기존 컴포넌트: `dashboard/components/` 하위
- 기존 API 호출 패턴: App.js 참조

## API 미완성 시 대응
- task-938.1이 아직 완료 안 됐을 수 있음
- **API 미완성 시**: token-ledger.json을 직접 읽는 fallback 구현
  - 경로: `/home/jay/workspace/memory/token-ledger.json`
- 또는 task-timers.json의 token_usage 필드 활용
- API가 없어도 정적 데이터로 UI가 렌더링되도록

## 제약사항
- dashboard/ 디렉토리만 수정
- 기존 대시보드 기능에 영향 주지 않기
- CDN 추가 시 Chart.js만 허용 (이미 사용 중이면 그것 활용)
- 서버 API가 없으면 정적 JSON 파일로 fallback

## 산출물
1. 수정/추가된 대시보드 파일 목록
2. 보고서: `memory/reports/task-938.2.md`