feat: merge SPRINT-016 isometric office dashboard
This commit is contained in:
@@ -16,15 +16,14 @@
|
||||
- 장기 문서: `docs/`
|
||||
|
||||
## 활성 작업
|
||||
- **SPRINT-015**: Master Dashboard v3 정보 구조 리디자인
|
||||
- **HOTFIX-006**: 대시보드 문구 절제 + 실시간성 정합성 보정
|
||||
- **SPRINT-016**: 4자매 Isometric Office Dashboard 재기획
|
||||
|
||||
## 이번 Sprint 핵심 요구사항
|
||||
1. 메인 대시보드를 4자매 운영 관제의 대표 화면으로 재정의
|
||||
2. 현행 미니멀 터미널 UI를 유지한 채 레퍼런스의 강한 정보 구조를 흡수
|
||||
3. 상단 global status bar / 4자매 상태 카드 / `ACTIVE PIPELINE` 중심 구조 도입
|
||||
4. `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`를 운영 문맥으로 재배치
|
||||
5. 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
|
||||
1. 4자매와 17개 서브에이전트, 총 21개 에이전트를 오피스 은유로 재설계
|
||||
2. 4자매 독립 Gateway WebSocket 기준 실시간 상태 모델 정리
|
||||
3. 고정 좌석 4자매 + 동적 이동 서브에이전트 + 회의실/연결선 구조 정의
|
||||
4. direct chat / workflow panel / server health를 오피스 화면과 통합
|
||||
5. PRD와 `.plans/` 구조를 새 제품 방향 기준으로 정리
|
||||
|
||||
## 이행 전략
|
||||
- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
|
||||
@@ -35,8 +34,6 @@
|
||||
## 문서 맵
|
||||
- 구조 기준: `../ARCHITECTURE.md`
|
||||
- 디자인 인덱스: `./design/index.md`
|
||||
- Sprint 계획: `./sprints/SPRINT-015.md`
|
||||
- Sprint handoff: `./sprints/SPRINT-015-NARANG-HANDOFF.md`
|
||||
- Hotfix 계획: `./hotfix/HOTFIX-006.md`
|
||||
- Hotfix handoff: `./hotfix/HOTFIX-006-NARANG-HANDOFF.md`
|
||||
- Sprint 계획: `./sprints/SPRINT-016.md`
|
||||
- PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
|
||||
- 배포 플로우: `./deploy/main-release-flow.md`
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
|
||||
## 페이지별 UI
|
||||
- `ui/dashboard-design.md`
|
||||
- `ui/office-dashboard-design.md`
|
||||
- `ui/office-chat-design.md`
|
||||
- `ui/projects-page-design.md`
|
||||
- `ui/project-detail-design.md`
|
||||
- `ui/sister-detail-design.md`
|
||||
@@ -19,8 +21,8 @@
|
||||
## 레퍼런스
|
||||
- `references/07-master-dashboard-v3-reference.md`
|
||||
|
||||
## Sprint 015에서 반드시 반영할 화면
|
||||
- 대시보드 메인: Master Dashboard v3 구조 반영
|
||||
- 핵심 섹션: Global Status Bar / 4자매 상태 카드 / `ACTIVE PIPELINE`
|
||||
- 운영 패널: `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`
|
||||
- 모바일: 데스크톱 구조를 억지로 축소하지 말고 세로 읽기 흐름으로 재배열
|
||||
## Sprint 016에서 반드시 반영할 화면
|
||||
- 오피스 메인: 4자매 고정 좌석 + 서브에이전트 동적 이동
|
||||
- 오피스 채팅: 자매 선택 direct chat + 현재 상태 결합
|
||||
- 운영 패널: active workflow / sprint / review loop / deploy gate / server health
|
||||
- 모바일: 오피스 씬 단순화 + 세로 흐름 재배치
|
||||
|
||||
30
.plans/design/ui/office-chat-design.md
Normal file
30
.plans/design/ui/office-chat-design.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 오피스 채팅 워크스페이스 — Sprint 016
|
||||
|
||||
## 목적
|
||||
자기야가 4자매 중 한 명을 선택해 직접 대화하고, 현재 작업 맥락과 tool 상태를 함께 보는 운영 채팅 인터페이스.
|
||||
|
||||
## 구조
|
||||
### 좌측
|
||||
- 자매 선택 탭
|
||||
- 최근 대화 상대
|
||||
- unread / active 상태
|
||||
|
||||
### 중앙
|
||||
- 메시지 타임라인
|
||||
- streaming 응답
|
||||
- tool call 상태 삽입
|
||||
- retry / stop / resend 액션
|
||||
|
||||
### 우측
|
||||
- 선택 자매 상태
|
||||
- current workflow
|
||||
- 최근 handoff
|
||||
- 관련 서브에이전트
|
||||
|
||||
## UX 규칙
|
||||
- 채팅은 메신저가 아니라 운영 명령 패널처럼 보여야 함
|
||||
- 현재 자매 상태와 대화가 분리되지 않아야 함
|
||||
- tool calling / speaking 상태는 대화 흐름 안에서 보여야 함
|
||||
|
||||
## 모바일
|
||||
- 자매 탭 → 메시지 → 상태 패널 순으로 세로 전환
|
||||
63
.plans/design/ui/office-dashboard-design.md
Normal file
63
.plans/design/ui/office-dashboard-design.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# 오피스 대시보드 메인 (`/office` 또는 `/`) — Sprint 016
|
||||
|
||||
## 목적
|
||||
4자매와 서브에이전트 협업을 `고정 좌석 + 동적 이동 + 운영 패널` 구조로 보여주는 대표 화면.
|
||||
|
||||
## 핵심 은유
|
||||
- 메인 자매 = 고정 좌석
|
||||
- 서브에이전트 = 이동 가능한 팀원
|
||||
- 회의실 = 협업/리뷰/핸드오프 문맥
|
||||
- 인프라 존 = 배포/서버/헬스
|
||||
- 연결선 = handoff / workflow transition
|
||||
|
||||
## 전체 레이아웃
|
||||
### 1. Office Scene
|
||||
화면 중심. 가장 큰 영역.
|
||||
|
||||
#### 고정 좌석
|
||||
- 하랑이: 좌상단 또는 상단 중앙
|
||||
- 나랑이: 좌하단 또는 좌측 작업 구역
|
||||
- 다랑이: 우상단 또는 리뷰 구역
|
||||
- 이랑이: 우하단 또는 인프라 구역
|
||||
|
||||
#### 서브에이전트 배치
|
||||
- 기본은 자기 자매 주변 대기
|
||||
- active workflow 시 작업석/회의실/인프라 존으로 이동
|
||||
- 상태에 따라 아이콘/색/테두리/말풍선 변화
|
||||
|
||||
### 2. Right Context Panel
|
||||
- 선택 에이전트 detail
|
||||
- 현재 세션/상태
|
||||
- 최근 이벤트
|
||||
- direct chat 진입
|
||||
|
||||
### 3. Bottom Ops Panel
|
||||
- current sprint
|
||||
- active workflow
|
||||
- review loop
|
||||
- deploy gate
|
||||
- server health summary
|
||||
|
||||
## 상태 표현
|
||||
- `idle`: 조용한 점등
|
||||
- `thinking`: 약한 pulse
|
||||
- `tool_calling`: 도구 아이콘/점멸
|
||||
- `speaking`: 말풍선 또는 stream 표시
|
||||
- `error`: 적색 경고
|
||||
|
||||
## 연결 규칙
|
||||
- 자매 간 핸드오프는 굵은 주 연결선
|
||||
- 서브에이전트 내부 협업은 얇은 보조선
|
||||
- review loop는 다랑이 회의실 중심으로 표시
|
||||
- deploy path는 이랑이 인프라 존으로 흐름 표시
|
||||
|
||||
## UX 규칙
|
||||
- 중심은 언제나 4자매
|
||||
- 21개 에이전트를 다 보여도 난잡하면 안 됨
|
||||
- 선택 전에도 전체 상태는 읽혀야 함
|
||||
- 선택 후에만 상세 정보 밀도 증가
|
||||
|
||||
## 모바일
|
||||
- 오피스 씬 단순화
|
||||
- 자매별 클러스터 카드 + 축소 맵 우선
|
||||
- 상세는 하단 시트 또는 탭으로 분리
|
||||
218
.plans/sprints/SPRINT-016.md
Normal file
218
.plans/sprints/SPRINT-016.md
Normal file
@@ -0,0 +1,218 @@
|
||||
# SPRINT-016: 4자매 Isometric Office Dashboard 재기획
|
||||
|
||||
## 목표
|
||||
기존 하나랑 대시보드를 `운영 패널 중심 UI`에서 한 단계 확장해, 4자매 메인 에이전트와 17개 서브에이전트가 실제로 협업하는 흐름을 **2D 등축 투영 오피스**로 시각화하는 차세대 관제 화면으로 재기획한다.
|
||||
|
||||
핵심은 이거야.
|
||||
- 4자매의 고정 좌석과 역할이 한눈에 보여야 해
|
||||
- 서브에이전트가 어떤 워크플로우 안에서 움직이는지 보여야 해
|
||||
- 단순 예쁜 씬이 아니라 실시간 상태/협업/채팅/서버 헬스를 같이 판단할 수 있어야 해
|
||||
- OpenClaw Gateway WebSocket을 기준으로 실제 상태를 반영해야 해
|
||||
|
||||
## 참고 레퍼런스
|
||||
- 참고 프로젝트: `https://github.com/WW-AI-Lab/openclaw-office`
|
||||
- 채택 포인트:
|
||||
- 2D 등축 투영 오피스
|
||||
- 고정 좌석 + 동적 이동
|
||||
- 상태 애니메이션 / 연결선 / 회의실 은유
|
||||
- Chat 작업공간과 관리 패널 결합
|
||||
- 그대로 복제하지 않고, 하나랑 4자매 구조와 Lobster/Discord handoff 흐름에 맞게 번역한다.
|
||||
|
||||
## 운영 구조
|
||||
### 메인 에이전트 (고정 데스크 / 독립 OpenClaw 인스턴스)
|
||||
- 하랑이 (Planning)
|
||||
- 나랑이 (Dev)
|
||||
- 다랑이 (QA)
|
||||
- 이랑이 (Infra)
|
||||
|
||||
### 서브에이전트
|
||||
- 하랑이: `planner`, `task-tracker`, `prd-writer`
|
||||
- 나랑이: `worker`, `db-designer`, `test-writer`, `refactorer`
|
||||
- 다랑이: `reviewer`, `code-reviewer`, `qa-tester`, `security-auditor`, `ux-reviewer`
|
||||
- 이랑이: `deploy-manager`, `db-manager`, `nginx-manager`, `monitoring`, `dns-manager`
|
||||
|
||||
총 21개 에이전트 (main 4 + sub 17)
|
||||
|
||||
## 파이프라인 모델
|
||||
### 자매 내부
|
||||
- Lobster 워크플로우 기반 순차 실행
|
||||
- 예:
|
||||
- `plan-sprint.lobster`
|
||||
- `implement-sprint.lobster`
|
||||
- `review-sprint.lobster`
|
||||
- `deploy-check.lobster`
|
||||
|
||||
### 자매 간
|
||||
- Discord 멘션 기반 자연어 핸드오프
|
||||
- `자기야 → 하랑이 → 나랑이 → 다랑이 → 이랑이`
|
||||
- 실패 시 `다랑이 → 나랑이` 되돌림 루프 지원
|
||||
|
||||
## 제품 목표
|
||||
1. 4자매와 서브에이전트 협업 구조를 직관적으로 보여준다
|
||||
2. OpenClaw Gateway WebSocket 기반 실시간 상태 모니터링을 제공한다
|
||||
3. 자매 선택 직접 채팅과 운영 관제를 한 제품 안에 통합한다
|
||||
4. Lobster 워크플로우 / 스프린트 / QA / 배포 흐름을 하나의 모델로 묶는다
|
||||
5. 서버 헬스와 에이전트 헬스를 같은 맥락에서 본다
|
||||
|
||||
## 범위
|
||||
- 메인 오피스 대시보드 (`/` 또는 신규 workspace landing)
|
||||
- 에이전트 상태 시각화
|
||||
- 회의실/협업 연결선/동적 이동 규칙
|
||||
- 자매 선택 직접 채팅 인터페이스
|
||||
- 파이프라인 현황 패널
|
||||
- 서버 상태 패널
|
||||
- 모바일/태블릿 대응 전략
|
||||
- 데이터 소스 / WebSocket 이벤트 / 폴링 보정 전략 문서화
|
||||
|
||||
## 제외 범위
|
||||
- 이번 Sprint에서 실제 Gateway 프로토콜을 새로 정의하지 않음
|
||||
- 3D 전환 안 함
|
||||
- 음성/영상 통화 기능 없음
|
||||
- 에이전트 생성/삭제 전체 관리 콘솔을 이번 Sprint 핵심으로 두지 않음
|
||||
|
||||
## 정보 구조
|
||||
### 1. Office Scene
|
||||
- 4자매 고정 좌석
|
||||
- 각 자매 주변에 자기 서브에이전트 풀 배치
|
||||
- 상태에 따라 idle / thinking / tool_calling / speaking / error 시각화
|
||||
- 회의실 / 작업대 / 대기 구역 / 인프라 구역 구분
|
||||
|
||||
### 2. Agent Detail Layer
|
||||
- 선택한 자매/서브에이전트 상세
|
||||
- 현재 세션 / 최근 메시지 / tool call / 리소스 지표
|
||||
- 최근 handoff / 현재 워크플로우 단계
|
||||
|
||||
### 3. Chat Workspace
|
||||
- 자매 선택 direct chat
|
||||
- 최근 대화 히스토리
|
||||
- 작업 지시 / 응답 / 툴 호출 상태 확인
|
||||
|
||||
### 4. Pipeline Panel
|
||||
- 현재 Sprint
|
||||
- active Lobster workflow
|
||||
- cycle / retry / review loop
|
||||
- handoff 상태
|
||||
- deploy gate / approval 상태
|
||||
|
||||
### 5. Server Health Panel
|
||||
- 4자매 서버 헬스
|
||||
- Dev 서버
|
||||
- Docker/infra 상태
|
||||
- heartbeat / websocket / reconnect 상태
|
||||
|
||||
## 디자인 원칙
|
||||
1. **은유는 강하게, 판단은 더 강하게**
|
||||
- 오피스는 분위기용이 아니라 상태 판단용이야.
|
||||
2. **실시간 우선, 추정은 정직하게**
|
||||
- live / snapshot / doc-derived / fallback 구분 유지
|
||||
3. **고정 좌석 + 동적 이동**
|
||||
- 메인 자매는 늘 같은 자리에 있어야 함
|
||||
- 서브에이전트만 워크플로우에 따라 이동/연결
|
||||
4. **4자매 중심성 유지**
|
||||
- 21개 전체를 보여도 중심은 언제나 하랑/나랑/다랑/이랑이야
|
||||
5. **운영 패널과 오피스 뷰 결합**
|
||||
- 보기 좋은 씬만 있고 운영 판단이 안 되면 실패
|
||||
|
||||
## 기술 방향
|
||||
- Frontend: 기존 Next.js + styled-components 유지
|
||||
- Backend: 기존 Nest.js + Prisma 유지
|
||||
- 실시간: OpenClaw Gateway WebSocket 중심
|
||||
- 보조 동기화: low-frequency polling snapshot 허용
|
||||
- 렌더링: SVG + CSS animation 또는 canvas-lite 검토 가능
|
||||
- 상태 저장: 기존 구조 유지하되 office scene 전용 store 계층 검토
|
||||
|
||||
## 데이터 소스 기준
|
||||
| 대상 | 우선 소스 |
|
||||
|---|---|
|
||||
| 메인 에이전트 상태 | 4자매 Gateway WebSocket |
|
||||
| 서브에이전트 상태 | 각 자매 runtime/agent event + workflow 상태 |
|
||||
| 협업 연결선 | handoff / workflow transition / event stream |
|
||||
| 채팅 인터페이스 | session/chat API |
|
||||
| 파이프라인 현황 | Lobster workflow state + activity log |
|
||||
| 서버 헬스 | admin/system/health 계열 API |
|
||||
|
||||
## 태스크
|
||||
|
||||
### TASK-091: 제품 PRD 및 IA 재정의
|
||||
- **담당:** 하랑이
|
||||
- **상태:** pending
|
||||
- **산출물:**
|
||||
- `docs/product-specs/openclaw-office-dashboard-prd.md`
|
||||
- `.plans/OVERVIEW.md` 갱신
|
||||
- **완료 기준:**
|
||||
- 오피스 대시보드 비전/핵심 사용자/핵심 흐름/핵심 화면이 문서화됨
|
||||
|
||||
### TASK-092: 오피스 씬 레이아웃 설계
|
||||
- **담당:** 하랑이 → 나랑이
|
||||
- **상태:** pending
|
||||
- **산출물:**
|
||||
- `.plans/design/ui/office-dashboard-design.md`
|
||||
- **완료 기준:**
|
||||
- 4자매 좌석 / 서브에이전트 위치 / 회의실 / 인프라 구역 구조가 정의됨
|
||||
|
||||
### TASK-093: 채팅 워크스페이스 설계
|
||||
- **담당:** 하랑이 → 나랑이
|
||||
- **상태:** pending
|
||||
- **산출물:**
|
||||
- `.plans/design/ui/office-chat-design.md`
|
||||
- **완료 기준:**
|
||||
- 자매 선택 direct chat 구조와 패널 관계가 정의됨
|
||||
|
||||
### TASK-094: Gateway/WebSocket 실시간 모델 정의
|
||||
- **담당:** 나랑이
|
||||
- **상태:** pending
|
||||
- **주요 범위:**
|
||||
- 4개 Gateway 연결 전략
|
||||
- presence / health / workflow / agent event 정리
|
||||
- reconnect / reconciliation 규칙
|
||||
- **완료 기준:**
|
||||
- live / snapshot / fallback 구분이 문서와 코드 양쪽에서 유지됨
|
||||
|
||||
### TASK-095: 메인 오피스 씬 구현
|
||||
- **담당:** 나랑이
|
||||
- **상태:** pending
|
||||
- **완료 기준:**
|
||||
- 4자매 고정 좌석과 서브에이전트 동적 이동이 구현됨
|
||||
- 상태별 시각 표현이 동작함
|
||||
|
||||
### TASK-096: 협업 시각화 + 회의실 이동 구현
|
||||
- **담당:** 나랑이
|
||||
- **상태:** pending
|
||||
- **완료 기준:**
|
||||
- handoff 연결선
|
||||
- 회의실 이동 상태
|
||||
- review/deploy loop 표현이 동작함
|
||||
|
||||
### TASK-097: 직접 채팅 인터페이스 구현
|
||||
- **담당:** 나랑이
|
||||
- **상태:** pending
|
||||
- **완료 기준:**
|
||||
- 자매 선택 direct chat 가능
|
||||
- 최근 대화/응답/상태가 확인됨
|
||||
|
||||
### TASK-098: 서버 헬스 패널 구현
|
||||
- **담당:** 나랑이
|
||||
- **상태:** pending
|
||||
- **완료 기준:**
|
||||
- 4자매 + Dev + Docker 서버 상태가 함께 보임
|
||||
|
||||
### TASK-099: QA / 모바일 / 실브라우저 검증
|
||||
- **담당:** 다랑이
|
||||
- **상태:** pending
|
||||
- **완료 기준:**
|
||||
- Desktop / Tablet / Mobile 실브라우저 기준 확인
|
||||
- live/snapshot 구분 검증
|
||||
- 성능/가독성/blocker 확인
|
||||
|
||||
## 권장 구현 순서
|
||||
1. PRD / IA / 오피스 씬 문서화
|
||||
2. Gateway 실시간 모델 정리
|
||||
3. 메인 오피스 씬 구현
|
||||
4. 연결선 / 회의실 / 채팅 / 패널 구현
|
||||
5. QA + 모바일 검증
|
||||
|
||||
## 완료 기준
|
||||
- 4자매와 서브에이전트 구조가 오피스 화면에서 한눈에 보임
|
||||
- 실시간 상태와 파이프라인이 실제 운영 흐름과 맞음
|
||||
- 채팅/헬스/파이프라인이 오피스 뷰와 분리되지 않고 자연스럽게 이어짐
|
||||
- 문서, 설계, 구현 기준이 `.plans/`에 정리됨
|
||||
115
docs/product-specs/openclaw-office-dashboard-prd.md
Normal file
115
docs/product-specs/openclaw-office-dashboard-prd.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# 하나랑 오피스 대시보드 PRD
|
||||
|
||||
## 제품명
|
||||
하나랑 오피스 대시보드
|
||||
|
||||
## 한 줄 정의
|
||||
OpenClaw 4자매와 서브에이전트 협업을 2D 등축 투영 오피스로 시각화하고, 채팅/파이프라인/서버 헬스를 함께 운영하는 멀티에이전트 관제 프론트엔드.
|
||||
|
||||
## 배경
|
||||
기존 하나랑 대시보드는 운영 정보는 잘 보여주지만, 4자매와 서브에이전트가 실제로 어떻게 협업하는지 한눈에 느끼기엔 한계가 있어.
|
||||
|
||||
자기야가 원하는 건 단순 상태 카드가 아니라:
|
||||
- 누가 자기 자리에서 대기 중인지
|
||||
- 누가 회의실로 이동했는지
|
||||
- 어떤 서브에이전트가 어떤 워크플로우에서 일하고 있는지
|
||||
- 지금 QA 루프인지 배포 직전인지
|
||||
를 `오피스`라는 직관적인 은유로 읽는 화면이야.
|
||||
|
||||
## 제품 목표
|
||||
1. 4자매 메인 에이전트와 17개 서브에이전트, 총 21개 에이전트를 하나의 세계관 안에서 시각화한다.
|
||||
2. 4자매 독립 Gateway WebSocket을 통해 실시간 상태를 반영한다.
|
||||
3. Lobster 워크플로우와 Discord handoff를 자연스럽게 한 화면에 묶는다.
|
||||
4. 직접 채팅, 파이프라인 현황, 서버 헬스까지 운영 도구를 통합한다.
|
||||
|
||||
## 핵심 사용자
|
||||
- 자기야: 전체 파이프라인 운영 책임자
|
||||
- 하랑이: Planning / handoff orchestration
|
||||
- 나랑이: 구현 상태 추적
|
||||
- 다랑이: QA 루프 / blocker 판단
|
||||
- 이랑이: 배포 / 인프라 점검
|
||||
|
||||
## 핵심 시나리오
|
||||
### 시나리오 1: 현재 누가 일하고 있는지 한눈에 보기
|
||||
자기야가 메인 화면에 들어오면, 하랑/나랑/다랑/이랑 좌석과 주변 서브에이전트 상태를 보고 즉시 현재 국면을 판단한다.
|
||||
|
||||
### 시나리오 2: 구현 → QA → 배포 흐름 확인
|
||||
나랑이 쪽 서브에이전트가 활발히 움직이다가, 다랑이 회의실로 연결선이 넘어가고, 승인되면 이랑이 인프라 영역으로 흐름이 넘어가는 걸 본다.
|
||||
|
||||
### 시나리오 3: 특정 자매와 직접 대화
|
||||
자기야가 하랑이나 나랑이를 선택해서 direct chat을 열고 작업을 지시한다.
|
||||
|
||||
### 시나리오 4: 서버/헬스 이상 감지
|
||||
대시보드 한쪽 패널에서 Gateway 연결, Dev 서버, Docker 상태 이상을 바로 감지한다.
|
||||
|
||||
## 기능 요구사항
|
||||
### 필수
|
||||
1. 4자매 Gateway WebSocket 연결
|
||||
2. 2D 등축 투영 오피스 메인 화면
|
||||
3. 메인 에이전트 4명 고정 좌석
|
||||
4. 서브에이전트 동적 이동/상태 표시
|
||||
5. 상태: `idle`, `thinking`, `tool_calling`, `speaking`, `error`
|
||||
6. 협업 연결선 / 회의실 이동 시각화
|
||||
7. 자매 선택 직접 채팅 인터페이스
|
||||
8. Lobster 워크플로우 / 스프린트 / 사이클 패널
|
||||
9. 서버 상태 패널 (4자매 + Dev + Docker)
|
||||
|
||||
### 중요
|
||||
10. live / snapshot / fallback 구분
|
||||
11. 실브라우저/모바일 대응
|
||||
12. 기존 하나랑 대시보드 운영 패널과의 연속성 유지
|
||||
|
||||
## 정보 구조
|
||||
### 메인 오피스 화면
|
||||
- 좌측 또는 중앙: 오피스 씬
|
||||
- 우측: 선택 에이전트 detail / chat / workflow
|
||||
- 하단 또는 보조 패널: 서버 헬스 / 최근 handoff / sprint state
|
||||
|
||||
### 오피스 씬 요소
|
||||
- 하랑이 데스크
|
||||
- 나랑이 데스크
|
||||
- 다랑이 데스크
|
||||
- 이랑이 데스크
|
||||
- 회의실
|
||||
- 임시 작업석
|
||||
- 인프라/서버 존
|
||||
- 서브에이전트 이동 경로
|
||||
|
||||
### 채팅
|
||||
- 자매 선택 탭
|
||||
- 메시지 히스토리
|
||||
- 입력창
|
||||
- tool call 상태 / streaming 표시
|
||||
|
||||
### 운영 패널
|
||||
- active workflow
|
||||
- current sprint
|
||||
- review loop
|
||||
- deploy gate
|
||||
- server health
|
||||
|
||||
## 데이터 소스
|
||||
- 4자매 Gateway WebSocket
|
||||
- activity log
|
||||
- workflow state
|
||||
- session/chat API
|
||||
- admin/system/health API
|
||||
|
||||
## 기술 원칙
|
||||
- 기존 Next.js + styled-components 유지
|
||||
- Backend는 기존 Nest.js + Prisma 유지
|
||||
- WebSocket은 OpenClaw Gateway 기준
|
||||
- 필요 시 polling reconciliation 허용
|
||||
- fake 데이터 하드코딩 금지
|
||||
|
||||
## 비기능 요구사항
|
||||
- 첫 화면에서 현재 협업 구조 이해 가능
|
||||
- 과한 애니메이션 금지
|
||||
- 모바일에서도 핵심 흐름 유지
|
||||
- 데이터 소스 구분이 명확해야 함
|
||||
|
||||
## 성공 기준
|
||||
- 자기야가 메인 화면만 보고 현재 상태를 설명할 수 있음
|
||||
- 4자매/서브에이전트 구조가 카드보다 더 직관적으로 읽힘
|
||||
- 채팅/워크플로우/서버 패널이 따로 놀지 않음
|
||||
- live / snapshot / fallback 구분이 사용자에게 정직하게 보임
|
||||
486
frontend/app/office/page.tsx
Normal file
486
frontend/app/office/page.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { API_URL, POLL_INTERVAL_MS } from '@/lib/config';
|
||||
import { useSocket } from '@/lib/useSocket';
|
||||
import OfficeScene, {
|
||||
type AgentState,
|
||||
type SisterName,
|
||||
type SisterNode,
|
||||
type SubAgent,
|
||||
type SelectedAgent,
|
||||
} from '@/components/office/OfficeScene';
|
||||
import ContextPanel from '@/components/office/ContextPanel';
|
||||
import ChatWorkspace from '@/components/office/ChatWorkspace';
|
||||
import PipelinePanel from '@/components/office/PipelinePanel';
|
||||
import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
|
||||
import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface SisterApiItem {
|
||||
id?: number;
|
||||
name: string;
|
||||
status: 'online' | 'offline' | 'working' | 'unknown';
|
||||
role?: string;
|
||||
currentTask?: string | null;
|
||||
lastSeen?: string | null;
|
||||
cpu?: number;
|
||||
memory?: { used?: number; total?: number };
|
||||
}
|
||||
|
||||
interface DashboardOpsData {
|
||||
focusProject: {
|
||||
name: string;
|
||||
phase: string;
|
||||
progress: number;
|
||||
deployStatus: string;
|
||||
currentSprint?: string | null;
|
||||
ownerSister?: string | null;
|
||||
} | null;
|
||||
pipeline: {
|
||||
activeTask: string;
|
||||
focus: string;
|
||||
reviewLoopCount: number;
|
||||
escalationCount: number;
|
||||
deployState: string;
|
||||
nodes: PipelineNode[];
|
||||
};
|
||||
freshness: {
|
||||
generatedAt: string;
|
||||
activityLatestAt: string | null;
|
||||
sistersLatestAt: string | null;
|
||||
qaDocLatestAt: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Static subagent definitions ─────────────────────────────────────────────
|
||||
|
||||
const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
|
||||
harang: [
|
||||
{ id: 'harang-planner', name: 'planner', label: 'planner' },
|
||||
{ id: 'harang-task-tracker', name: 'task-tracker', label: 'task-tracker' },
|
||||
{ id: 'harang-prd-writer', name: 'prd-writer', label: 'prd-writer' },
|
||||
],
|
||||
narang: [
|
||||
{ id: 'narang-worker', name: 'worker', label: 'worker' },
|
||||
{ id: 'narang-db-designer', name: 'db-designer', label: 'db-designer' },
|
||||
{ id: 'narang-test-writer', name: 'test-writer', label: 'test-writer' },
|
||||
{ id: 'narang-refactorer', name: 'refactorer', label: 'refactorer' },
|
||||
],
|
||||
darang: [
|
||||
{ id: 'darang-reviewer', name: 'reviewer', label: 'reviewer' },
|
||||
{ id: 'darang-code-reviewer', name: 'code-reviewer', label: 'code-rvw' },
|
||||
{ id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
|
||||
{ id: 'darang-security-auditor', name: 'security-auditor', label: 'security' },
|
||||
{ id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
|
||||
],
|
||||
erang: [
|
||||
{ id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy' },
|
||||
{ id: 'erang-db-manager', name: 'db-manager', label: 'db-mgr' },
|
||||
{ id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx' },
|
||||
{ id: 'erang-monitoring', name: 'monitoring', label: 'monitor' },
|
||||
{ id: 'erang-dns-manager', name: 'dns-manager', label: 'dns' },
|
||||
],
|
||||
};
|
||||
|
||||
const SISTER_DISPLAY: Record<SisterName, string> = {
|
||||
harang: '하랑이',
|
||||
narang: '나랑이',
|
||||
darang: '다랑이',
|
||||
erang: '이랑이',
|
||||
};
|
||||
|
||||
const SISTER_ROLES: Record<SisterName, string> = {
|
||||
harang: 'Planning & Orchestration',
|
||||
narang: 'Development',
|
||||
darang: 'QA & Review',
|
||||
erang: 'Infra & Deploy',
|
||||
};
|
||||
|
||||
const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
|
||||
const SUBAGENT_COUNT = Object.values(SUBAGENT_DEFS).reduce((total, defs) => total + defs.length, 0);
|
||||
|
||||
const FALLBACK_SISTERS: SisterApiItem[] = [
|
||||
{
|
||||
name: 'harang',
|
||||
status: 'working',
|
||||
role: SISTER_ROLES.harang,
|
||||
currentTask: 'SPRINT-016 scope lock',
|
||||
},
|
||||
{
|
||||
name: 'narang',
|
||||
status: 'working',
|
||||
role: SISTER_ROLES.narang,
|
||||
currentTask: 'Office scene dynamic movement',
|
||||
},
|
||||
{
|
||||
name: 'darang',
|
||||
status: 'online',
|
||||
role: SISTER_ROLES.darang,
|
||||
currentTask: 'Review loop standby',
|
||||
},
|
||||
{
|
||||
name: 'erang',
|
||||
status: 'online',
|
||||
role: SISTER_ROLES.erang,
|
||||
currentTask: 'Gateway health watch',
|
||||
},
|
||||
];
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean): AgentState {
|
||||
if (status === 'offline') return 'error';
|
||||
if (status === 'working') return hasTask ? 'tool_calling' : 'thinking';
|
||||
if (status === 'online') return hasTask ? 'speaking' : 'idle';
|
||||
return 'idle';
|
||||
}
|
||||
|
||||
function derivedSubagentState(parentState: AgentState, index: number): AgentState {
|
||||
// Derive subagent state from parent with some variety
|
||||
if (parentState === 'error') return 'idle'; // subagents idle when parent is offline
|
||||
if (parentState === 'tool_calling' && index === 0) return 'thinking';
|
||||
if (parentState === 'speaking' && index <= 1) return 'thinking';
|
||||
return 'idle';
|
||||
}
|
||||
|
||||
function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
|
||||
return SISTER_ORDER.map((name) => {
|
||||
const apiItem = sisters.find((s) => s.name === name);
|
||||
const status = apiItem?.status ?? 'unknown';
|
||||
const hasTask = Boolean(apiItem?.currentTask);
|
||||
const parentState = statusToAgentState(status, hasTask);
|
||||
|
||||
const subDefs = SUBAGENT_DEFS[name];
|
||||
const subagents: SubAgent[] = subDefs.map((def, i) => ({
|
||||
...def,
|
||||
sister: name,
|
||||
state: derivedSubagentState(parentState, i),
|
||||
}));
|
||||
|
||||
return {
|
||||
name,
|
||||
displayName: SISTER_DISPLAY[name],
|
||||
role: apiItem?.role ?? SISTER_ROLES[name],
|
||||
emoji: name === 'harang' || name === 'narang' ? '🦊' : name === 'darang' ? '🐱' : '🐺',
|
||||
state: parentState,
|
||||
currentTask: apiItem?.currentTask ?? null,
|
||||
subagents,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
|
||||
const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
|
||||
const s = sisters.find((x) => x.name === name);
|
||||
return {
|
||||
id: `server-${name}`,
|
||||
label: SISTER_DISPLAY[name],
|
||||
type: 'sister' as const,
|
||||
status: s?.status ?? 'unknown',
|
||||
detail: s?.currentTask ?? null,
|
||||
source: s ? sisterSource : 'fallback',
|
||||
};
|
||||
});
|
||||
|
||||
// Dev server and Docker are fallback (no direct API yet)
|
||||
const extraEntries: ServerEntry[] = [
|
||||
{
|
||||
id: 'server-dev',
|
||||
label: 'Dev Server',
|
||||
type: 'dev',
|
||||
status: 'unknown',
|
||||
detail: null,
|
||||
source: 'fallback',
|
||||
},
|
||||
{
|
||||
id: 'server-docker',
|
||||
label: 'Docker / Infra',
|
||||
type: 'docker',
|
||||
status: 'unknown',
|
||||
detail: null,
|
||||
source: 'fallback',
|
||||
},
|
||||
];
|
||||
|
||||
return [...sisterEntries, ...extraEntries];
|
||||
}
|
||||
|
||||
function formatGeneratedAt(ts: string): string {
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Styled Components ────────────────────────────────────────────────────────
|
||||
|
||||
const Shell = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
min-height: 0;
|
||||
`;
|
||||
|
||||
const PageHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-lg);
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const PageTitle = styled.h1`
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
`;
|
||||
|
||||
const PageMeta = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const FreshnessBar = styled.div`
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
`;
|
||||
|
||||
const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: ${({ $type }) =>
|
||||
$type === 'live' ? '#00BFA5'
|
||||
: $type === 'snapshot' ? '#FF9800'
|
||||
: '#555'};
|
||||
border: 1px solid currentColor;
|
||||
padding: 2px 6px;
|
||||
opacity: 0.8;
|
||||
`;
|
||||
|
||||
const MainArea = styled.div`
|
||||
display: flex;
|
||||
gap: 0;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const SceneColumn = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
min-width: 0;
|
||||
`;
|
||||
|
||||
const ChatArea = styled.div`
|
||||
height: 520px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
height: 460px;
|
||||
}
|
||||
`;
|
||||
|
||||
const BottomPanels = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
`;
|
||||
|
||||
const LoadingOverlay = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
`;
|
||||
|
||||
// ─── Main Component ───────────────────────────────────────────────────────────
|
||||
|
||||
export default function OfficePage() {
|
||||
const [sisters, setSisters] = useState<SisterApiItem[]>([]);
|
||||
const [opsData, setOpsData] = useState<DashboardOpsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [selected, setSelected] = useState<SelectedAgent | null>(null);
|
||||
const [chatSister, setChatSister] = useState<SisterName | null>(null);
|
||||
|
||||
// Live WebSocket connection
|
||||
const { connected } = useSocket<SisterApiItem>({
|
||||
onSistersUpdate: (updatedSisters) => {
|
||||
setSisters(updatedSisters);
|
||||
},
|
||||
});
|
||||
|
||||
// Initial data fetch
|
||||
useEffect(() => {
|
||||
const fetchAll = async () => {
|
||||
try {
|
||||
const [sistersRes, opsRes] = await Promise.allSettled([
|
||||
fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
|
||||
fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
|
||||
]);
|
||||
|
||||
if (sistersRes.status === 'fulfilled') {
|
||||
setSisters(Array.isArray(sistersRes.value) ? sistersRes.value : []);
|
||||
}
|
||||
if (opsRes.status === 'fulfilled') {
|
||||
setOpsData(opsRes.value);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void fetchAll();
|
||||
|
||||
// Polling fallback
|
||||
const interval = setInterval(() => {
|
||||
fetch(`${API_URL}/api/sisters`)
|
||||
.then((r) => r.json())
|
||||
.then((data: SisterApiItem[]) => {
|
||||
if (Array.isArray(data)) setSisters(data);
|
||||
})
|
||||
.catch(() => {/* ignore polling errors */});
|
||||
}, POLL_INTERVAL_MS);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const hasSisterSnapshot = sisters.length > 0;
|
||||
const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected
|
||||
? 'live'
|
||||
: hasSisterSnapshot
|
||||
? 'snapshot'
|
||||
: 'fallback';
|
||||
const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
|
||||
|
||||
const sisterNodes = buildSisterNodes(effectiveSisters);
|
||||
const serverEntries = buildServerEntries(effectiveSisters, sisterDataMode);
|
||||
|
||||
const handleSelectSister = useCallback((name: SisterName) => {
|
||||
setSelected({ type: 'sister', name });
|
||||
setChatSister(null);
|
||||
}, []);
|
||||
|
||||
const handleSelectSubagent = useCallback((id: string, sister: SisterName) => {
|
||||
setSelected({ type: 'subagent', id, sister });
|
||||
setChatSister(null);
|
||||
}, []);
|
||||
|
||||
const handleOpenChat = useCallback((sisterName: SisterName) => {
|
||||
setChatSister(sisterName);
|
||||
}, []);
|
||||
|
||||
const handleCloseChat = useCallback(() => {
|
||||
setChatSister(null);
|
||||
}, []);
|
||||
|
||||
const handleClearSelection = useCallback(() => {
|
||||
setSelected(null);
|
||||
}, []);
|
||||
|
||||
const pipeline = opsData?.pipeline ?? {
|
||||
activeTask: 'SPRINT-016',
|
||||
focus: 'Isometric Office Dashboard',
|
||||
reviewLoopCount: 0,
|
||||
escalationCount: 0,
|
||||
deployState: '—',
|
||||
nodes: [],
|
||||
};
|
||||
|
||||
const freshness = opsData?.freshness ?? {
|
||||
generatedAt: new Date().toISOString(),
|
||||
activityLatestAt: null,
|
||||
sistersLatestAt: null,
|
||||
qaDocLatestAt: null,
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingOverlay>오피스 데이터 로딩 중...</LoadingOverlay>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Shell>
|
||||
<PageHeader>
|
||||
<PageTitle>🏢 오피스 대시보드</PageTitle>
|
||||
<PageMeta>4자매 · {SUBAGENT_COUNT} 서브에이전트 · 협업 관제</PageMeta>
|
||||
<FreshnessBar>
|
||||
<FreshnessBadge $type={sisterDataMode}>
|
||||
자매: {sisterDataMode === 'live' ? 'live · ws' : sisterDataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc'}
|
||||
</FreshnessBadge>
|
||||
<FreshnessBadge $type="fallback">
|
||||
서브에이전트: fallback
|
||||
</FreshnessBadge>
|
||||
<FreshnessBadge $type="snapshot">
|
||||
pipeline: snapshot
|
||||
</FreshnessBadge>
|
||||
</FreshnessBar>
|
||||
</PageHeader>
|
||||
|
||||
<MainArea>
|
||||
<SceneColumn>
|
||||
<OfficeScene
|
||||
sisters={sisterNodes}
|
||||
selected={selected}
|
||||
onSelectSister={handleSelectSister}
|
||||
onSelectSubagent={handleSelectSubagent}
|
||||
dataMode={sisterDataMode}
|
||||
/>
|
||||
|
||||
{chatSister && (
|
||||
<ChatArea>
|
||||
<ChatWorkspace
|
||||
initialSister={chatSister}
|
||||
onClose={handleCloseChat}
|
||||
/>
|
||||
</ChatArea>
|
||||
)}
|
||||
</SceneColumn>
|
||||
|
||||
<ContextPanel
|
||||
selected={selected}
|
||||
sisters={sisterNodes}
|
||||
onOpenChat={handleOpenChat}
|
||||
onClear={handleClearSelection}
|
||||
/>
|
||||
</MainArea>
|
||||
|
||||
<BottomPanels>
|
||||
<PipelinePanel
|
||||
activeTask={pipeline.activeTask}
|
||||
focus={pipeline.focus}
|
||||
reviewLoopCount={pipeline.reviewLoopCount}
|
||||
escalationCount={pipeline.escalationCount}
|
||||
deployState={pipeline.deployState}
|
||||
nodes={pipeline.nodes}
|
||||
freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
|
||||
/>
|
||||
<ServerHealthPanel
|
||||
servers={serverEntries}
|
||||
dataMode={sisterDataMode}
|
||||
generatedAt={freshness.generatedAt}
|
||||
/>
|
||||
</BottomPanels>
|
||||
</Shell>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/AuthContext';
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ href: '/', label: '대시' },
|
||||
{ href: '/office', label: '오피스' },
|
||||
{ href: '/projects', label: '프로' },
|
||||
{ href: '/activities', label: '활동' },
|
||||
{ href: '/sisters', label: '자매' },
|
||||
|
||||
605
frontend/components/office/ChatWorkspace.tsx
Normal file
605
frontend/components/office/ChatWorkspace.tsx
Normal file
@@ -0,0 +1,605 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import type { SisterName } from './OfficeScene';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
role: 'user' | 'assistant' | 'tool';
|
||||
content: string;
|
||||
toolName?: string;
|
||||
ts: string;
|
||||
}
|
||||
|
||||
interface ChatWorkspaceProps {
|
||||
initialSister: SisterName;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// ─── Static data ──────────────────────────────────────────────────────────────
|
||||
|
||||
const SISTER_DISPLAY: Record<SisterName, string> = {
|
||||
harang: '하랑이',
|
||||
narang: '나랑이',
|
||||
darang: '다랑이',
|
||||
erang: '이랑이',
|
||||
};
|
||||
|
||||
const SISTER_EMOJIS: Record<SisterName, string> = {
|
||||
harang: '🦊',
|
||||
narang: '🦊',
|
||||
darang: '🐱',
|
||||
erang: '🐺',
|
||||
};
|
||||
|
||||
const SISTER_ROLES: Record<SisterName, string> = {
|
||||
harang: 'Planning & Orchestration',
|
||||
narang: 'Development & Implementation',
|
||||
darang: 'QA & Review',
|
||||
erang: 'Infra & Deploy',
|
||||
};
|
||||
|
||||
const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
|
||||
|
||||
// ─── Animations ──────────────────────────────────────────────────────────────
|
||||
|
||||
const fadeIn = keyframes`
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
`;
|
||||
|
||||
// ─── Styled Components ────────────────────────────────────────────────────────
|
||||
|
||||
const Workspace = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-surface);
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
// Left sidebar - sister tabs
|
||||
const SisterTabs = styled.nav`
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-md) 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
`;
|
||||
|
||||
const SisterTabHeader = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0 var(--space-md) var(--space-md);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const SisterTab = styled.button<{ $active: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.04)' : 'transparent')};
|
||||
border: none;
|
||||
border-left: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
|
||||
color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
border-left: none;
|
||||
border-bottom: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const TabEmoji = styled.span`
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
`;
|
||||
|
||||
const TabMeta = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
`;
|
||||
|
||||
const TabName = styled.div`
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
`;
|
||||
|
||||
const TabRole = styled.div`
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
// Center - message timeline
|
||||
const MessageArea = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
`;
|
||||
|
||||
const MessageHeader = styled.div`
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const HeaderEmoji = styled.span`
|
||||
font-size: 20px;
|
||||
`;
|
||||
|
||||
const HeaderMeta = styled.div`
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const HeaderName = styled.div`
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
`;
|
||||
|
||||
const HeaderRole = styled.div`
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const HeaderBadge = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 2px var(--space-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const Timeline = styled.div`
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
`;
|
||||
|
||||
const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: ${({ $role }) => $role === 'user' ? 'flex-end' : 'flex-start'};
|
||||
animation: ${fadeIn} 0.2s ease;
|
||||
`;
|
||||
|
||||
const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
|
||||
max-width: 75%;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: ${({ $role }) =>
|
||||
$role === 'user'
|
||||
? 'rgba(255,255,255,0.06)'
|
||||
: $role === 'tool'
|
||||
? 'rgba(255, 152, 0, 0.06)'
|
||||
: 'rgba(255,255,255,0.02)'};
|
||||
border: 1px solid ${({ $role }) =>
|
||||
$role === 'user'
|
||||
? 'rgba(255,255,255,0.12)'
|
||||
: $role === 'tool'
|
||||
? 'rgba(255,152,0,0.2)'
|
||||
: 'rgba(255,255,255,0.06)'};
|
||||
font-family: ${({ $role }) => $role === 'tool' ? 'var(--font-mono)' : 'inherit'};
|
||||
`;
|
||||
|
||||
const BubbleMeta = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.6;
|
||||
`;
|
||||
|
||||
const ToolCallBadge = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: #FF9800;
|
||||
margin-bottom: 2px;
|
||||
`;
|
||||
|
||||
const EmptyTimeline = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const GatewayNotice = styled.div`
|
||||
border: 1px solid var(--border-color);
|
||||
padding: var(--space-md);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1.7;
|
||||
max-width: 280px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
// Input area
|
||||
const InputArea = styled.div`
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const MessageInput = styled.textarea`
|
||||
flex: 1;
|
||||
background: var(--bg-input, #1a1a1a);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
resize: none;
|
||||
min-height: 40px;
|
||||
max-height: 120px;
|
||||
line-height: 1.5;
|
||||
transition: border-color 0.15s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
`;
|
||||
|
||||
const SendBtn = styled.button`
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
align-self: flex-end;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
const InputMeta = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
// Right - sister context
|
||||
const SisterContext = styled.aside`
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const ContextSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
`;
|
||||
|
||||
const CtxLabel = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 4px;
|
||||
`;
|
||||
|
||||
const CtxValue = styled.div`
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const CtxMono = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
// Close button
|
||||
const CloseBtn = styled.button`
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatTs(ts: string): string {
|
||||
const date = new Date(ts);
|
||||
const diff = Date.now() - date.getTime();
|
||||
const min = Math.floor(diff / 60000);
|
||||
if (min < 1) return '방금';
|
||||
if (min < 60) return `${min}분 전`;
|
||||
const hr = Math.floor(min / 60);
|
||||
if (hr < 24) return `${hr}시간 전`;
|
||||
return `${Math.floor(hr / 24)}일 전`;
|
||||
}
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceProps) {
|
||||
const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
|
||||
// Per-sister message maps avoid setState-in-effect for clearing on switch
|
||||
const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
|
||||
const [input, setInput] = useState('');
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
|
||||
|
||||
const setMessages = useCallback(
|
||||
(updater: (prev: ChatMessage[]) => ChatMessage[]) => {
|
||||
setAllMessages((prev) => ({
|
||||
...prev,
|
||||
[activeSister]: updater(prev[activeSister] ?? []),
|
||||
}));
|
||||
},
|
||||
[activeSister],
|
||||
);
|
||||
|
||||
// Scroll to bottom on new messages
|
||||
useEffect(() => {
|
||||
if (timelineRef.current) {
|
||||
timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
// Mock send — in production this would go via OpenClaw Gateway
|
||||
const handleSend = useCallback(() => {
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: `msg-${Date.now()}`,
|
||||
role: 'user',
|
||||
content: text,
|
||||
ts: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setInput('');
|
||||
|
||||
// Gateway connection pending — show system notice
|
||||
setTimeout(() => {
|
||||
const sysMsg: ChatMessage = {
|
||||
id: `msg-${Date.now() + 1}`,
|
||||
role: 'assistant',
|
||||
content: `[Gateway 연결 대기] ${SISTER_DISPLAY[activeSister]} OpenClaw Gateway가 아직 연결되지 않았습니다. 직접 채팅 기능은 Gateway WebSocket 연결 후 활성화됩니다.`,
|
||||
ts: new Date().toISOString(),
|
||||
};
|
||||
setMessages((prev) => [...prev, sysMsg]);
|
||||
}, 400);
|
||||
}, [activeSister, input, setMessages]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Workspace>
|
||||
{/* Left: sister tabs */}
|
||||
<SisterTabs>
|
||||
<SisterTabHeader>direct chat</SisterTabHeader>
|
||||
{SISTER_ORDER.map((name) => (
|
||||
<SisterTab
|
||||
key={name}
|
||||
$active={activeSister === name}
|
||||
onClick={() => setActiveSister(name)}
|
||||
>
|
||||
<TabEmoji>{SISTER_EMOJIS[name]}</TabEmoji>
|
||||
<TabMeta>
|
||||
<TabName>{SISTER_DISPLAY[name]}</TabName>
|
||||
<TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
|
||||
</TabMeta>
|
||||
</SisterTab>
|
||||
))}
|
||||
</SisterTabs>
|
||||
|
||||
{/* Center: message timeline */}
|
||||
<MessageArea>
|
||||
<MessageHeader>
|
||||
<HeaderEmoji>{SISTER_EMOJIS[activeSister]}</HeaderEmoji>
|
||||
<HeaderMeta>
|
||||
<HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
|
||||
<HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
|
||||
</HeaderMeta>
|
||||
<HeaderBadge>Gateway 대기</HeaderBadge>
|
||||
<CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
|
||||
</MessageHeader>
|
||||
|
||||
<Timeline ref={timelineRef}>
|
||||
{messages.length === 0 ? (
|
||||
<EmptyTimeline>
|
||||
<div>{SISTER_EMOJIS[activeSister]}</div>
|
||||
<div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내세요.</div>
|
||||
<GatewayNotice>
|
||||
openclaw gateway 연결 대기 중<br />
|
||||
메시지 입력은 가능하나<br />
|
||||
실시간 응답은 gateway 연결 후 활성화
|
||||
</GatewayNotice>
|
||||
</EmptyTimeline>
|
||||
) : (
|
||||
messages.map((msg) => (
|
||||
<MessageBubble key={msg.id} $role={msg.role}>
|
||||
{msg.role === 'tool' && (
|
||||
<ToolCallBadge>🔧 tool · {msg.toolName}</ToolCallBadge>
|
||||
)}
|
||||
<BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
|
||||
<BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
|
||||
</MessageBubble>
|
||||
))
|
||||
)}
|
||||
</Timeline>
|
||||
|
||||
<InputMeta>
|
||||
shift+enter = 줄바꿈 · enter = 전송 · gateway: 연결 대기
|
||||
</InputMeta>
|
||||
|
||||
<InputArea>
|
||||
<MessageInput
|
||||
placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시하세요...`}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
rows={1}
|
||||
/>
|
||||
<SendBtn onClick={handleSend} disabled={!input.trim()}>
|
||||
전송
|
||||
</SendBtn>
|
||||
</InputArea>
|
||||
</MessageArea>
|
||||
|
||||
{/* Right: sister context */}
|
||||
<SisterContext>
|
||||
<ContextSection>
|
||||
<CtxLabel>agent</CtxLabel>
|
||||
<CtxValue>
|
||||
{SISTER_EMOJIS[activeSister]} {SISTER_DISPLAY[activeSister]}
|
||||
</CtxValue>
|
||||
<CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
|
||||
</ContextSection>
|
||||
|
||||
<ContextSection>
|
||||
<CtxLabel>채팅 상태</CtxLabel>
|
||||
<CtxValue>Gateway 연결 대기</CtxValue>
|
||||
<CtxMono>openclaw websocket</CtxMono>
|
||||
</ContextSection>
|
||||
|
||||
<ContextSection>
|
||||
<CtxLabel>data source</CtxLabel>
|
||||
<CtxMono>
|
||||
live: ws (pending)<br />
|
||||
fallback: ui-only
|
||||
</CtxMono>
|
||||
</ContextSection>
|
||||
|
||||
<ContextSection>
|
||||
<CtxLabel>상세</CtxLabel>
|
||||
<CtxValue>
|
||||
<a
|
||||
href={`/sisters/${activeSister}`}
|
||||
style={{
|
||||
color: 'var(--text-secondary)',
|
||||
textDecoration: 'none',
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
→ 자매 상세 보기
|
||||
</a>
|
||||
</CtxValue>
|
||||
</ContextSection>
|
||||
</SisterContext>
|
||||
</Workspace>
|
||||
);
|
||||
}
|
||||
455
frontend/components/office/ContextPanel.tsx
Normal file
455
frontend/components/office/ContextPanel.tsx
Normal file
@@ -0,0 +1,455 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Link from 'next/link';
|
||||
import type { SisterNode, SubAgent, SisterName, AgentState, SelectedAgent } from './OfficeScene';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface ContextPanelProps {
|
||||
selected: SelectedAgent | null;
|
||||
sisters: SisterNode[];
|
||||
onOpenChat: (sisterName: SisterName) => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
// ─── Styled Components ────────────────────────────────────────────────────────
|
||||
|
||||
const Panel = styled.aside`
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
background: var(--bg-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border-color);
|
||||
max-height: 220px;
|
||||
}
|
||||
`;
|
||||
|
||||
const PanelHeader = styled.div`
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const PanelTitle = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
`;
|
||||
|
||||
const ClearBtn = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
const PanelBody = styled.div`
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
`;
|
||||
|
||||
const EmptyState = styled.div`
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
padding: var(--space-xl) 0;
|
||||
`;
|
||||
|
||||
const AgentHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
`;
|
||||
|
||||
const AgentEmoji = styled.div`
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const AgentMeta = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const AgentName = styled.div`
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
`;
|
||||
|
||||
const AgentRole = styled.div`
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const AgentType = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const StateRow = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
`;
|
||||
|
||||
const StateDot = styled.span<{ $state: AgentState }>`
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: ${({ $state }) => {
|
||||
const colors: Record<AgentState, string> = {
|
||||
idle: '#444',
|
||||
thinking: '#2979FF',
|
||||
tool_calling: '#FF9800',
|
||||
speaking: '#00BFA5',
|
||||
error: '#FF1744',
|
||||
};
|
||||
return colors[$state];
|
||||
}};
|
||||
`;
|
||||
|
||||
const StateLabel = styled.span<{ $state: AgentState }>`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: ${({ $state }) => {
|
||||
const colors: Record<AgentState, string> = {
|
||||
idle: 'var(--text-secondary)',
|
||||
thinking: '#2979FF',
|
||||
tool_calling: '#FF9800',
|
||||
speaking: '#00BFA5',
|
||||
error: '#FF1744',
|
||||
};
|
||||
return colors[$state];
|
||||
}};
|
||||
`;
|
||||
|
||||
const Section = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
`;
|
||||
|
||||
const SectionLabel = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 4px;
|
||||
`;
|
||||
|
||||
const SectionValue = styled.div`
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const CurrentTaskBox = styled.div`
|
||||
font-size: 12px;
|
||||
color: #58A6FF;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: rgba(88, 166, 255, 0.06);
|
||||
border-left: 2px solid #58A6FF;
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const SubagentGrid = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const SubagentRow = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
`;
|
||||
|
||||
const SubDot = styled.span<{ $state: AgentState }>`
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: ${({ $state }) => {
|
||||
const colors: Record<AgentState, string> = {
|
||||
idle: '#444',
|
||||
thinking: '#2979FF',
|
||||
tool_calling: '#FF9800',
|
||||
speaking: '#00BFA5',
|
||||
error: '#FF1744',
|
||||
};
|
||||
return colors[$state];
|
||||
}};
|
||||
`;
|
||||
|
||||
const SubName = styled.span`
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
`;
|
||||
|
||||
const ActionRow = styled.div`
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const ActionBtn = styled.button`
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
const ActionLink = styled(Link)`
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
transition: all 0.15s;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--border-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
`;
|
||||
|
||||
const FallbackNote = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
// ─── Sister display data ──────────────────────────────────────────────────────
|
||||
|
||||
const SISTER_EMOJIS: Record<SisterName, string> = {
|
||||
harang: '🦊',
|
||||
narang: '🦊',
|
||||
darang: '🐱',
|
||||
erang: '🐺',
|
||||
};
|
||||
|
||||
const SISTER_DISPLAY: Record<SisterName, string> = {
|
||||
harang: '하랑이',
|
||||
narang: '나랑이',
|
||||
darang: '다랑이',
|
||||
erang: '이랑이',
|
||||
};
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
|
||||
function SisterDetail({
|
||||
sister,
|
||||
onOpenChat,
|
||||
}: {
|
||||
sister: SisterNode;
|
||||
onOpenChat: (name: SisterName) => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AgentHeader>
|
||||
<AgentEmoji>{SISTER_EMOJIS[sister.name]}</AgentEmoji>
|
||||
<AgentMeta>
|
||||
<AgentName>{SISTER_DISPLAY[sister.name]}</AgentName>
|
||||
<AgentRole>{sister.role}</AgentRole>
|
||||
<AgentType>main agent</AgentType>
|
||||
</AgentMeta>
|
||||
</AgentHeader>
|
||||
|
||||
<StateRow>
|
||||
<StateDot $state={sister.state} />
|
||||
<StateLabel $state={sister.state}>{sister.state}</StateLabel>
|
||||
</StateRow>
|
||||
|
||||
{sister.currentTask && (
|
||||
<Section>
|
||||
<SectionLabel>current task</SectionLabel>
|
||||
<CurrentTaskBox>{sister.currentTask}</CurrentTaskBox>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Section>
|
||||
<SectionLabel>subagents ({sister.subagents.length})</SectionLabel>
|
||||
<SubagentGrid>
|
||||
{sister.subagents.map((sub) => (
|
||||
<SubagentRow key={sub.id}>
|
||||
<SubDot $state={sub.state} />
|
||||
<span>{sub.label}</span>
|
||||
<SubName>· {sub.state}</SubName>
|
||||
</SubagentRow>
|
||||
))}
|
||||
</SubagentGrid>
|
||||
<FallbackNote>subagent state: fallback</FallbackNote>
|
||||
</Section>
|
||||
|
||||
<ActionRow>
|
||||
<ActionBtn onClick={() => onOpenChat(sister.name)}>
|
||||
채팅
|
||||
</ActionBtn>
|
||||
<ActionLink href={`/sisters/${sister.name}`}>
|
||||
상세
|
||||
</ActionLink>
|
||||
</ActionRow>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SubagentDetail({
|
||||
sub,
|
||||
sister,
|
||||
onOpenChat,
|
||||
}: {
|
||||
sub: SubAgent;
|
||||
sister: SisterNode;
|
||||
onOpenChat: (name: SisterName) => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AgentHeader>
|
||||
<AgentEmoji>🤖</AgentEmoji>
|
||||
<AgentMeta>
|
||||
<AgentName>{sub.label}</AgentName>
|
||||
<AgentRole>{sub.name}</AgentRole>
|
||||
<AgentType>subagent · {SISTER_DISPLAY[sister.name]} 소속</AgentType>
|
||||
</AgentMeta>
|
||||
</AgentHeader>
|
||||
|
||||
<StateRow>
|
||||
<StateDot $state={sub.state} />
|
||||
<StateLabel $state={sub.state}>{sub.state}</StateLabel>
|
||||
</StateRow>
|
||||
|
||||
<Section>
|
||||
<SectionLabel>parent</SectionLabel>
|
||||
<SectionValue>
|
||||
{SISTER_EMOJIS[sister.name]} {SISTER_DISPLAY[sister.name]} · {sister.role}
|
||||
</SectionValue>
|
||||
</Section>
|
||||
|
||||
<FallbackNote>subagent state: fallback · no direct api</FallbackNote>
|
||||
|
||||
<ActionRow>
|
||||
<ActionBtn onClick={() => onOpenChat(sister.name)}>
|
||||
{SISTER_DISPLAY[sister.name]} 채팅
|
||||
</ActionBtn>
|
||||
<ActionLink href={`/sisters/${sister.name}`}>
|
||||
자매 상세
|
||||
</ActionLink>
|
||||
</ActionRow>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ContextPanel({
|
||||
selected,
|
||||
sisters,
|
||||
onOpenChat,
|
||||
onClear,
|
||||
}: ContextPanelProps) {
|
||||
const getSister = (name: SisterName) => sisters.find((s) => s.name === name);
|
||||
|
||||
let content: React.ReactNode = (
|
||||
<EmptyState>
|
||||
에이전트를 선택하면<br />
|
||||
상세 정보가 표시됩니다.
|
||||
</EmptyState>
|
||||
);
|
||||
|
||||
if (selected?.type === 'sister') {
|
||||
const sisterData = getSister(selected.name);
|
||||
if (sisterData) {
|
||||
content = (
|
||||
<SisterDetail
|
||||
sister={sisterData}
|
||||
onOpenChat={onOpenChat}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (selected?.type === 'subagent') {
|
||||
const sisterData = getSister(selected.sister);
|
||||
const subData = sisterData?.subagents.find((s) => s.id === selected.id);
|
||||
if (sisterData && subData) {
|
||||
content = (
|
||||
<SubagentDetail
|
||||
sub={subData}
|
||||
sister={sisterData}
|
||||
onOpenChat={onOpenChat}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<PanelTitle>context panel</PanelTitle>
|
||||
{selected && <ClearBtn onClick={onClear}>✕</ClearBtn>}
|
||||
</PanelHeader>
|
||||
<PanelBody>{content}</PanelBody>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
573
frontend/components/office/OfficeScene.tsx
Normal file
573
frontend/components/office/OfficeScene.tsx
Normal file
@@ -0,0 +1,573 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
|
||||
export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
|
||||
|
||||
export interface SubAgent {
|
||||
id: string;
|
||||
name: string;
|
||||
label: string;
|
||||
sister: SisterName;
|
||||
state: AgentState;
|
||||
}
|
||||
|
||||
export interface SisterNode {
|
||||
name: SisterName;
|
||||
displayName: string;
|
||||
role: string;
|
||||
emoji: string;
|
||||
state: AgentState;
|
||||
currentTask: string | null;
|
||||
subagents: SubAgent[];
|
||||
}
|
||||
|
||||
export type SelectedAgent =
|
||||
| { type: 'sister'; name: SisterName }
|
||||
| { type: 'subagent'; id: string; sister: SisterName };
|
||||
|
||||
interface OfficeSceneProps {
|
||||
sisters: SisterNode[];
|
||||
selected: SelectedAgent | null;
|
||||
onSelectSister: (name: SisterName) => void;
|
||||
onSelectSubagent: (id: string, sister: SisterName) => void;
|
||||
dataMode: 'live' | 'snapshot' | 'fallback';
|
||||
}
|
||||
|
||||
// ─── Styled wrappers ──────────────────────────────────────────────────────────
|
||||
|
||||
const SceneWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 800 / 460;
|
||||
max-height: 60vh;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-surface);
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const FreshnessLabel = styled.div`
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const WsDot = styled.span<{ $connected: boolean }>`
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: ${({ $connected }) => ($connected ? '#00FF00' : '#666')};
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
`;
|
||||
|
||||
// ─── SVG constants ────────────────────────────────────────────────────────────
|
||||
|
||||
const VB_W = 800;
|
||||
const VB_H = 460;
|
||||
type Point = [number, number];
|
||||
|
||||
// Zone rects [x, y, w, h]
|
||||
const ZONES = {
|
||||
harang: [5, 5, 345, 200] as const,
|
||||
darang: [450, 5, 345, 200] as const,
|
||||
narang: [5, 260, 345, 195] as const,
|
||||
erang: [450, 260, 345, 195] as const,
|
||||
};
|
||||
|
||||
// Sister desk center positions
|
||||
const SISTER_POS: Record<SisterName, [number, number]> = {
|
||||
harang: [75, 105],
|
||||
darang: [725, 105],
|
||||
narang: [75, 358],
|
||||
erang: [725, 358],
|
||||
};
|
||||
|
||||
// Conference room
|
||||
const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };
|
||||
|
||||
// Subagent grid positions (cx, cy) per sister
|
||||
const SUBAGENT_POSITIONS: Record<SisterName, Point[]> = {
|
||||
harang: [[175, 65], [270, 65], [220, 160]],
|
||||
darang: [[460, 65], [560, 65], [660, 65], [460, 160], [560, 160]],
|
||||
narang: [[175, 295], [270, 295], [175, 395], [270, 395]],
|
||||
erang: [[460, 295], [555, 295], [650, 295], [460, 395], [555, 395]],
|
||||
};
|
||||
|
||||
const SUBAGENT_TARGETS: Record<SisterName, Point[]> = {
|
||||
harang: [[295, 112], [338, 148], [365, 190]],
|
||||
darang: [[505, 94], [560, 112], [462, 148], [438, 188], [520, 196]],
|
||||
narang: [[292, 332], [330, 302], [362, 276], [344, 374]],
|
||||
erang: [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
|
||||
};
|
||||
|
||||
// Zone accent colors
|
||||
const ZONE_COLORS: Record<SisterName, string> = {
|
||||
harang: 'rgba(41, 121, 255, 0.06)',
|
||||
narang: 'rgba(0, 191, 165, 0.06)',
|
||||
darang: 'rgba(255, 64, 129, 0.06)',
|
||||
erang: 'rgba(255, 109, 0, 0.06)',
|
||||
};
|
||||
|
||||
const ZONE_BORDER: Record<SisterName, string> = {
|
||||
harang: 'rgba(41, 121, 255, 0.25)',
|
||||
narang: 'rgba(0, 191, 165, 0.25)',
|
||||
darang: 'rgba(255, 64, 129, 0.25)',
|
||||
erang: 'rgba(255, 109, 0, 0.25)',
|
||||
};
|
||||
|
||||
// State ring colors
|
||||
const STATE_COLORS: Record<AgentState, string> = {
|
||||
idle: '#444444',
|
||||
thinking: '#2979FF',
|
||||
tool_calling:'#FF9800',
|
||||
speaking: '#00BFA5',
|
||||
error: '#FF1744',
|
||||
};
|
||||
|
||||
const STATE_PROGRESS: Record<AgentState, number> = {
|
||||
idle: 0,
|
||||
error: 0,
|
||||
thinking: 0.48,
|
||||
tool_calling: 0.88,
|
||||
speaking: 0.66,
|
||||
};
|
||||
|
||||
function lerpPoint(from: Point, to: Point, progress: number): Point {
|
||||
return [
|
||||
from[0] + (to[0] - from[0]) * progress,
|
||||
from[1] + (to[1] - from[1]) * progress,
|
||||
];
|
||||
}
|
||||
|
||||
function getSubagentPosition(sister: SisterName, index: number, state: AgentState): Point {
|
||||
const from = SUBAGENT_POSITIONS[sister][index] ?? SUBAGENT_POSITIONS[sister][0];
|
||||
const to = SUBAGENT_TARGETS[sister][index] ?? from;
|
||||
return lerpPoint(from, to, STATE_PROGRESS[state]);
|
||||
}
|
||||
|
||||
function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
|
||||
const phase = index % 2 === 0 ? 1 : -1;
|
||||
|
||||
if (state === 'thinking') {
|
||||
return { dx: 5 * phase, dy: -6, dur: '3.6s' };
|
||||
}
|
||||
|
||||
if (state === 'tool_calling') {
|
||||
return { dx: 10 * phase, dy: -14, dur: '2s' };
|
||||
}
|
||||
|
||||
if (state === 'speaking') {
|
||||
return { dx: 6 * phase, dy: -4, dur: '2.8s' };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// ─── Helper: AgentCircle (rendered as SVG group) ──────────────────────────────
|
||||
|
||||
function SisterCircle({
|
||||
cx, cy, r, state, emoji, selected, onClick,
|
||||
}: {
|
||||
cx: number; cy: number; r: number;
|
||||
state: AgentState; emoji: string; selected: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const color = STATE_COLORS[state];
|
||||
return (
|
||||
<g onClick={onClick} style={{ cursor: 'pointer' }}>
|
||||
{/* Outer selection ring */}
|
||||
{selected && (
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r + 8}
|
||||
fill="none"
|
||||
stroke="var(--text-primary)"
|
||||
strokeWidth={1}
|
||||
strokeDasharray="4 3"
|
||||
opacity={0.6}
|
||||
/>
|
||||
)}
|
||||
{/* State ring */}
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r + 4}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={state === 'error' ? 2.5 : 1.5}
|
||||
opacity={state === 'idle' ? 0.4 : 1}
|
||||
>
|
||||
{state === 'thinking' && (
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.45;1;0.45"
|
||||
dur="1.8s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
{state === 'tool_calling' && (
|
||||
<animate
|
||||
attributeName="stroke-opacity"
|
||||
values="1;0.2;1"
|
||||
dur="0.9s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
</circle>
|
||||
{/* Body */}
|
||||
<circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
|
||||
{/* Emoji */}
|
||||
<text
|
||||
x={cx} y={cy + 7}
|
||||
textAnchor="middle"
|
||||
fontSize={r * 0.9}
|
||||
style={{ userSelect: 'none', pointerEvents: 'none' }}
|
||||
>
|
||||
{emoji}
|
||||
</text>
|
||||
{/* State label below */}
|
||||
<text
|
||||
x={cx} y={cy + r + 16}
|
||||
textAnchor="middle"
|
||||
fontSize={9}
|
||||
fontFamily="var(--font-mono)"
|
||||
fill={color}
|
||||
style={{ textTransform: 'uppercase', letterSpacing: '0.06em', userSelect: 'none', pointerEvents: 'none' }}
|
||||
>
|
||||
{state}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
function SubagentCircle({
|
||||
cx, cy, r, state, label, selected, motion, motionBegin, onClick,
|
||||
}: {
|
||||
cx: number; cy: number; r: number;
|
||||
state: AgentState; label: string; selected: boolean;
|
||||
motion: { dx: number; dy: number; dur: string } | null;
|
||||
motionBegin: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const color = STATE_COLORS[state];
|
||||
return (
|
||||
<g onClick={onClick} style={{ cursor: 'pointer' }}>
|
||||
{motion && (
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="translate"
|
||||
values={`0 0; ${motion.dx} ${motion.dy}; 0 0`}
|
||||
dur={motion.dur}
|
||||
begin={motionBegin}
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
{selected && (
|
||||
<circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
|
||||
)}
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r + 2}
|
||||
fill="none" stroke={color} strokeWidth={1}
|
||||
opacity={state === 'idle' ? 0.3 : 0.8}
|
||||
>
|
||||
{state === 'thinking' && (
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.35;0.95;0.35"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
</circle>
|
||||
<circle cx={cx} cy={cy} r={r} fill="#1a1a1a" stroke={color} strokeWidth={0.8} />
|
||||
<text
|
||||
x={cx} y={cy + 4}
|
||||
textAnchor="middle"
|
||||
fontSize={8}
|
||||
fontFamily="var(--font-mono)"
|
||||
fill={color}
|
||||
opacity={0.9}
|
||||
style={{ userSelect: 'none', pointerEvents: 'none' }}
|
||||
>
|
||||
{label.length > 8 ? label.slice(0, 7) + '…' : label}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
function ConnectorLine({
|
||||
x1, y1, x2, y2, active,
|
||||
}: {
|
||||
x1: number; y1: number; x2: number; y2: number; active: boolean;
|
||||
}) {
|
||||
return (
|
||||
<line
|
||||
x1={x1} y1={y1} x2={x2} y2={y2}
|
||||
stroke={active ? 'rgba(245,245,245,0.35)' : 'rgba(255,255,255,0.08)'}
|
||||
strokeWidth={active ? 1.5 : 1}
|
||||
strokeDasharray={active ? '6 4' : '3 4'}
|
||||
strokeDashoffset={active ? 40 : 0}
|
||||
>
|
||||
{active && (
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
values="40;0"
|
||||
dur="1.4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
</line>
|
||||
);
|
||||
}
|
||||
|
||||
function PathConnector({
|
||||
d, active,
|
||||
}: {
|
||||
d: string; active: boolean;
|
||||
}) {
|
||||
return (
|
||||
<path
|
||||
d={d}
|
||||
fill="none"
|
||||
stroke={active ? 'rgba(245,245,245,0.3)' : 'rgba(255,255,255,0.06)'}
|
||||
strokeWidth={active ? 1.5 : 1}
|
||||
strokeDasharray={active ? '6 4' : '3 4'}
|
||||
strokeDashoffset={active ? 40 : 0}
|
||||
>
|
||||
{active && (
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
values="40;0"
|
||||
dur="1.8s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
)}
|
||||
</path>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Component ───────────────────────────────────────────────────────────
|
||||
|
||||
const SISTER_EMOJIS: Record<SisterName, string> = {
|
||||
harang: '🦊',
|
||||
narang: '🦊',
|
||||
darang: '🐱',
|
||||
erang: '🐺',
|
||||
};
|
||||
|
||||
const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
|
||||
|
||||
export default function OfficeScene({
|
||||
sisters,
|
||||
selected,
|
||||
onSelectSister,
|
||||
onSelectSubagent,
|
||||
dataMode,
|
||||
}: OfficeSceneProps) {
|
||||
const getSister = useCallback(
|
||||
(name: SisterName) => sisters.find((s) => s.name === name),
|
||||
[sisters],
|
||||
);
|
||||
|
||||
const isActive = useCallback(
|
||||
(name: SisterName) => {
|
||||
const s = getSister(name);
|
||||
return s?.state === 'thinking' || s?.state === 'tool_calling' || s?.state === 'speaking';
|
||||
},
|
||||
[getSister],
|
||||
);
|
||||
|
||||
const isSisterSelected = (name: SisterName) =>
|
||||
selected?.type === 'sister' && selected.name === name;
|
||||
|
||||
const isSubSelected = (id: string) =>
|
||||
selected?.type === 'subagent' && selected.id === id;
|
||||
|
||||
// Derive active handoff lines from sister states
|
||||
const harangActive = isActive('harang');
|
||||
const narangActive = isActive('narang');
|
||||
const darangActive = isActive('darang');
|
||||
const erangActive = isActive('erang');
|
||||
|
||||
return (
|
||||
<SceneWrapper>
|
||||
<FreshnessLabel>
|
||||
<WsDot $connected={dataMode === 'live'} />
|
||||
{dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
|
||||
{' · subagents: fallback'}
|
||||
</FreshnessLabel>
|
||||
|
||||
<svg
|
||||
viewBox={`0 0 ${VB_W} ${VB_H}`}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{/* ── Zone backgrounds ── */}
|
||||
{SISTER_ORDER.map((name) => {
|
||||
const [zx, zy, zw, zh] = ZONES[name];
|
||||
return (
|
||||
<g key={`zone-${name}`}>
|
||||
<rect
|
||||
x={zx} y={zy} width={zw} height={zh}
|
||||
rx={4}
|
||||
fill={ZONE_COLORS[name]}
|
||||
stroke={ZONE_BORDER[name]}
|
||||
strokeWidth={1}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ── Center corridor (vertical) ── */}
|
||||
<rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
|
||||
|
||||
{/* ── Center corridor (horizontal) ── */}
|
||||
<rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
|
||||
|
||||
{/* ── Conference room ── */}
|
||||
<ellipse
|
||||
cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry}
|
||||
fill="#1a1a1a"
|
||||
stroke="rgba(255,255,255,0.15)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
<text
|
||||
x={CONF.cx} y={CONF.cy + 4}
|
||||
textAnchor="middle"
|
||||
fontSize={9}
|
||||
fontFamily="var(--font-mono)"
|
||||
fill="rgba(255,255,255,0.4)"
|
||||
style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
|
||||
>
|
||||
회의실
|
||||
</text>
|
||||
|
||||
{/* ── Connectors ── */}
|
||||
|
||||
{/* harang ↔ narang (left vertical through corridor) */}
|
||||
<ConnectorLine
|
||||
x1={SISTER_POS.harang[0]} y1={SISTER_POS.harang[1] + 30}
|
||||
x2={SISTER_POS.narang[0]} y2={SISTER_POS.narang[1] - 30}
|
||||
active={harangActive || narangActive}
|
||||
/>
|
||||
|
||||
{/* darang ↔ erang (right vertical through corridor) */}
|
||||
<ConnectorLine
|
||||
x1={SISTER_POS.darang[0]} y1={SISTER_POS.darang[1] + 30}
|
||||
x2={SISTER_POS.erang[0]} y2={SISTER_POS.erang[1] - 30}
|
||||
active={darangActive || erangActive}
|
||||
/>
|
||||
|
||||
{/* harang ↔ darang (through conference, horizontal top) */}
|
||||
<ConnectorLine
|
||||
x1={SISTER_POS.harang[0] + 30} y1={SISTER_POS.harang[1]}
|
||||
x2={SISTER_POS.darang[0] - 30} y2={SISTER_POS.darang[1]}
|
||||
active={harangActive || darangActive}
|
||||
/>
|
||||
|
||||
{/* narang ↔ erang (horizontal bottom) */}
|
||||
<ConnectorLine
|
||||
x1={SISTER_POS.narang[0] + 30} y1={SISTER_POS.narang[1]}
|
||||
x2={SISTER_POS.erang[0] - 30} y2={SISTER_POS.erang[1]}
|
||||
active={narangActive || erangActive}
|
||||
/>
|
||||
|
||||
{/* narang → darang (review path through conference, curved) */}
|
||||
<PathConnector
|
||||
d={`M${SISTER_POS.narang[0] + 20},${SISTER_POS.narang[1] - 20} Q${CONF.cx},${CONF.cy} ${SISTER_POS.darang[0] - 20},${SISTER_POS.darang[1] + 20}`}
|
||||
active={narangActive && darangActive}
|
||||
/>
|
||||
|
||||
{/* ── Zone labels ── */}
|
||||
{([
|
||||
['harang', 18, 22, '하랑이 · Planning'] as const,
|
||||
['darang', 463, 22, '다랑이 · QA'] as const,
|
||||
['narang', 18, 272, '나랑이 · Dev'] as const,
|
||||
['erang', 463, 272, '이랑이 · Infra'] as const,
|
||||
] as const).map(([name, lx, ly, text]) => (
|
||||
<text
|
||||
key={`label-${name}`}
|
||||
x={lx} y={ly}
|
||||
fontSize={10}
|
||||
fontFamily="var(--font-mono)"
|
||||
fill={ZONE_BORDER[name]}
|
||||
style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
))}
|
||||
|
||||
{/* ── Sister nodes ── */}
|
||||
{SISTER_ORDER.map((name) => {
|
||||
const sisterData = getSister(name);
|
||||
const state: AgentState = sisterData?.state ?? 'idle';
|
||||
const [cx, cy] = SISTER_POS[name];
|
||||
return (
|
||||
<SisterCircle
|
||||
key={`sister-${name}`}
|
||||
cx={cx} cy={cy} r={28}
|
||||
state={state}
|
||||
emoji={SISTER_EMOJIS[name]}
|
||||
selected={isSisterSelected(name)}
|
||||
onClick={() => onSelectSister(name)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ── Subagent nodes ── */}
|
||||
{SISTER_ORDER.map((sisterName) => {
|
||||
const sisterData = getSister(sisterName);
|
||||
const subagents = sisterData?.subagents ?? [];
|
||||
return subagents.map((sub, i) => {
|
||||
const pos = getSubagentPosition(sisterName, i, sub.state);
|
||||
const motion = getSubagentMotion(sub.state, i);
|
||||
return (
|
||||
<SubagentCircle
|
||||
key={sub.id}
|
||||
cx={pos[0]} cy={pos[1]} r={14}
|
||||
state={sub.state}
|
||||
label={sub.name}
|
||||
selected={isSubSelected(sub.id)}
|
||||
motion={motion}
|
||||
motionBegin={`${i * 0.22}s`}
|
||||
onClick={() => onSelectSubagent(sub.id, sisterName)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
|
||||
{/* ── Subagent → Sister connector lines (thin) ── */}
|
||||
{SISTER_ORDER.map((sisterName) => {
|
||||
const sisterData = getSister(sisterName);
|
||||
const subagents = sisterData?.subagents ?? [];
|
||||
const [sx, sy] = SISTER_POS[sisterName];
|
||||
return subagents.map((sub, i) => {
|
||||
const pos = getSubagentPosition(sisterName, i, sub.state);
|
||||
const active = sub.state !== 'idle' && sub.state !== 'error';
|
||||
return (
|
||||
<line
|
||||
key={`conn-${sub.id}`}
|
||||
x1={sx} y1={sy}
|
||||
x2={pos[0]} y2={pos[1]}
|
||||
stroke={active ? ZONE_BORDER[sisterName] : 'rgba(255,255,255,0.05)'}
|
||||
strokeWidth={active ? 0.8 : 0.5}
|
||||
strokeDasharray="2 3"
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</svg>
|
||||
</SceneWrapper>
|
||||
);
|
||||
}
|
||||
254
frontend/components/office/PipelinePanel.tsx
Normal file
254
frontend/components/office/PipelinePanel.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface PipelinePanelProps {
|
||||
activeTask: string;
|
||||
focus: string;
|
||||
reviewLoopCount: number;
|
||||
escalationCount: number;
|
||||
deployState: string;
|
||||
nodes: PipelineNode[];
|
||||
freshness: string;
|
||||
}
|
||||
|
||||
// ─── Animations ──────────────────────────────────────────────────────────────
|
||||
|
||||
const flowAnim = keyframes`
|
||||
0% { transform: translateX(-100%); opacity: 0; }
|
||||
40% { opacity: 0.8; }
|
||||
100% { transform: translateX(100%); opacity: 0; }
|
||||
`;
|
||||
|
||||
// ─── Styled Components ────────────────────────────────────────────────────────
|
||||
|
||||
const Panel = styled.section`
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
`;
|
||||
|
||||
const PanelHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-lg);
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const TitleGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const Eyebrow = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
`;
|
||||
|
||||
const Title = styled.h3`
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Focus = styled.div`
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const Stats = styled.div`
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Stat = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 80px;
|
||||
`;
|
||||
|
||||
const StatLabel = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const StatValue = styled.div`
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
`;
|
||||
|
||||
const NodeRow = styled.div`
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
align-items: stretch;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-color) transparent;
|
||||
`;
|
||||
|
||||
const stateColors: Record<PipelineNode['state'], string> = {
|
||||
idle: 'var(--border-color)',
|
||||
active: '#6fc3ff',
|
||||
review: '#ff7ac6',
|
||||
blocked: '#ff8d7a',
|
||||
ready: '#8dffb2',
|
||||
};
|
||||
|
||||
const NodeCard = styled.div<{ $state: PipelineNode['state'] }>`
|
||||
border: 1px solid ${({ $state }) => stateColors[$state]};
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
min-width: 140px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const NodeName = styled.div`
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
`;
|
||||
|
||||
const NodeRole = styled.div`
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const NodeState = styled.div<{ $state: PipelineNode['state'] }>`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: ${({ $state }) => stateColors[$state]};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const NodeDetail = styled.div`
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
`;
|
||||
|
||||
const Connector = styled.div<{ $active: boolean }>`
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
height: 1px;
|
||||
background: ${({ $active }) => $active ? 'rgba(245,245,245,0.4)' : 'var(--border-color)'};
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
align-self: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: ${({ $active }) => $active ? 'rgba(245,245,245,0.8)' : 'transparent'};
|
||||
animation: ${({ $active }) => $active ? `${flowAnim} 1.6s linear infinite` : 'none'};
|
||||
}
|
||||
`;
|
||||
|
||||
const FreshnessNote = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function PipelinePanel({
|
||||
activeTask,
|
||||
focus,
|
||||
reviewLoopCount,
|
||||
escalationCount,
|
||||
deployState,
|
||||
nodes,
|
||||
freshness,
|
||||
}: PipelinePanelProps) {
|
||||
return (
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<TitleGroup>
|
||||
<Eyebrow>pipeline panel · snapshot</Eyebrow>
|
||||
<Title>{activeTask}</Title>
|
||||
<Focus>{focus}</Focus>
|
||||
</TitleGroup>
|
||||
<Stats>
|
||||
<Stat>
|
||||
<StatLabel>review loop</StatLabel>
|
||||
<StatValue>{reviewLoopCount}x</StatValue>
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatLabel>escalations</StatLabel>
|
||||
<StatValue>{escalationCount}</StatValue>
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatLabel>deploy state</StatLabel>
|
||||
<StatValue>{deployState}</StatValue>
|
||||
</Stat>
|
||||
</Stats>
|
||||
</PanelHeader>
|
||||
|
||||
{nodes.length > 0 ? (
|
||||
<NodeRow>
|
||||
{nodes.map((node, i) => {
|
||||
const active = node.state === 'active' || node.state === 'review' || node.state === 'ready';
|
||||
return (
|
||||
<React.Fragment key={node.id}>
|
||||
<NodeCard $state={node.state}>
|
||||
<NodeName>{node.label}</NodeName>
|
||||
<NodeRole>{node.role}</NodeRole>
|
||||
<NodeState $state={node.state}>{node.state}</NodeState>
|
||||
<NodeDetail>{node.detail}</NodeDetail>
|
||||
</NodeCard>
|
||||
{i < nodes.length - 1 && <Connector $active={active} />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</NodeRow>
|
||||
) : (
|
||||
<NodeRole style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
|
||||
파이프라인 데이터 없음
|
||||
</NodeRole>
|
||||
)}
|
||||
|
||||
<FreshnessNote>snapshot · {freshness}</FreshnessNote>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
185
frontend/components/office/ServerHealthPanel.tsx
Normal file
185
frontend/components/office/ServerHealthPanel.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ServerEntry {
|
||||
id: string;
|
||||
label: string;
|
||||
type: 'sister' | 'dev' | 'docker';
|
||||
status: 'online' | 'offline' | 'working' | 'unknown';
|
||||
detail?: string | null;
|
||||
source: 'live' | 'snapshot' | 'fallback';
|
||||
}
|
||||
|
||||
interface ServerHealthPanelProps {
|
||||
servers: ServerEntry[];
|
||||
dataMode: 'live' | 'snapshot' | 'fallback';
|
||||
generatedAt: string;
|
||||
}
|
||||
|
||||
// ─── Styled Components ────────────────────────────────────────────────────────
|
||||
|
||||
const Panel = styled.section`
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-surface);
|
||||
padding: var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
`;
|
||||
|
||||
const PanelHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const Eyebrow = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
`;
|
||||
|
||||
const WsDot = styled.span<{ $connected: boolean }>`
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: ${({ $connected }) => ($connected ? '#00FF00' : '#555')};
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
`;
|
||||
|
||||
const FreshnessNote = styled.div`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const Grid = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-sm);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
`;
|
||||
|
||||
const statusColors: Record<ServerEntry['status'], string> = {
|
||||
online: '#00FF00',
|
||||
offline: '#FF1744',
|
||||
working: '#2979FF',
|
||||
unknown: '#555555',
|
||||
};
|
||||
|
||||
const ServerCard = styled.div<{ $status: ServerEntry['status'] }>`
|
||||
border: 1px solid var(--border-color);
|
||||
border-left: 2px solid ${({ $status }) => statusColors[$status]};
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const CardLabel = styled.div`
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
`;
|
||||
|
||||
const StatusDot = styled.span<{ $status: ServerEntry['status'] }>`
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: ${({ $status }) => statusColors[$status]};
|
||||
`;
|
||||
|
||||
const CardStatus = styled.div<{ $status: ServerEntry['status'] }>`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: ${({ $status }) => statusColors[$status]};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
const CardDetail = styled.div`
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const SourceBadge = styled.span`
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
`;
|
||||
|
||||
// ─── Component ────────────────────────────────────────────────────────────────
|
||||
|
||||
function formatGeneratedAt(ts: string): string {
|
||||
try {
|
||||
const date = new Date(ts);
|
||||
const diff = Date.now() - date.getTime();
|
||||
const sec = Math.floor(diff / 1000);
|
||||
if (sec < 60) return `${sec}s ago`;
|
||||
const min = Math.floor(sec / 60);
|
||||
if (min < 60) return `${min}m ago`;
|
||||
return `${Math.floor(min / 60)}h ago`;
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
export default function ServerHealthPanel({
|
||||
servers,
|
||||
dataMode,
|
||||
generatedAt,
|
||||
}: ServerHealthPanelProps) {
|
||||
const onlineCount = servers.filter((s) => s.status === 'online' || s.status === 'working').length;
|
||||
|
||||
return (
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<Eyebrow>
|
||||
<WsDot $connected={dataMode === 'live'} />
|
||||
server health · {dataMode}
|
||||
{' · '}{onlineCount}/{servers.length} online
|
||||
</Eyebrow>
|
||||
<FreshnessNote>refreshed {formatGeneratedAt(generatedAt)}</FreshnessNote>
|
||||
</PanelHeader>
|
||||
|
||||
<Grid>
|
||||
{servers.map((server) => (
|
||||
<ServerCard key={server.id} $status={server.status}>
|
||||
<CardLabel>
|
||||
<StatusDot $status={server.status} />
|
||||
{server.label}
|
||||
</CardLabel>
|
||||
<CardStatus $status={server.status}>{server.status}</CardStatus>
|
||||
{server.detail && <CardDetail>{server.detail}</CardDetail>}
|
||||
<SourceBadge>{server.source}</SourceBadge>
|
||||
</ServerCard>
|
||||
))}
|
||||
</Grid>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user