Compare commits
4 Commits
feature/sp
...
feature/ho
| Author | SHA1 | Date | |
|---|---|---|---|
| 1d851a3b14 | |||
| 6f0ed33424 | |||
| 1af31cbe89 | |||
| 93b92a41ec |
@@ -1,86 +1,42 @@
|
|||||||
# 하나랑 대시보드 — 실행 개요
|
# 하나랑 대시보드 — 실행 개요
|
||||||
|
|
||||||
## 프로젝트 목표
|
## 프로젝트 목표
|
||||||
- 4자매 운영 상태를 실제 source-of-truth 기준으로 보여준다
|
- 4자매 운영 상태를 실시간으로 보여준다
|
||||||
- 프로젝트, Sprint, Hotfix, QA, Deploy 흐름을 한 운영 정보 구조로 연결한다
|
- 프로젝트/Sprint/Hotfix/QA/Deploy 흐름을 시각화한다
|
||||||
- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영 문서에 같이 반영한다
|
- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영에 함께 반영한다
|
||||||
- `/office`, `/`, `/projects/[id]`, `/org`가 서로 다른 역할을 가지되 같은 상태 계약을 공유하게 만든다
|
|
||||||
|
|
||||||
## 저장소 / Git 기준
|
## 현재 표준 구조
|
||||||
- Repo: `hanarang-dashboard`
|
- 루트: `README.md`, `ARCHITECTURE.md`
|
||||||
- Git URL: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
|
- 실행 문서: `.plans/`
|
||||||
- 기본 브랜치: `main`
|
- `design/`
|
||||||
- 현재 구현 기준 경로:
|
- `sprints/`
|
||||||
- `frontend/app/office/page.tsx`
|
- `hotfix/`
|
||||||
- `frontend/app/page.tsx`
|
- `qa/`
|
||||||
- `frontend/app/projects/[id]/page.tsx`
|
- `deploy/`
|
||||||
- `frontend/app/org/page.tsx`
|
- 장기 문서: `docs/`
|
||||||
- `backend/src/sisters/sisters.service.ts`
|
|
||||||
- `backend/src/sisters/sister-detail.service.ts`
|
|
||||||
- `backend/src/dashboard/dashboard.service.ts`
|
|
||||||
|
|
||||||
## 현재 상태
|
## 활성 작업
|
||||||
- **SPRINT-016**: `/office` 기본 화면과 핵심 컴포넌트가 `main`에 반영됨
|
- **SPRINT-015**: Master Dashboard v3 정보 구조 리디자인
|
||||||
- **SPRINT-017**: `/office` 모바일 IA와 direct chat 중심 재배치 범위를 문서로 잠금
|
- **HOTFIX-007**: 프로젝트/자매 상세/메인 운영면 보정
|
||||||
- **HOTFIX-006**: 메인 대시보드 문구 절제와 source/freshness 정합성 보정 범위를 잠금
|
|
||||||
- **다음 활성 작업**: **SPRINT-018** 대시보드 truth redesign
|
|
||||||
|
|
||||||
## SPRINT-018 active scope
|
## 이번 Sprint 핵심 요구사항
|
||||||
이번 Sprint는 단순 모바일 정리가 아니라, `/office`, `/`, `/projects/[id]`, `/org`를 **같은 운영 사실 계약**으로 다시 잠그는 작업이야.
|
1. 메인 대시보드를 4자매 운영 관제의 대표 화면으로 재정의
|
||||||
|
2. 현행 미니멀 터미널 UI를 유지한 채 레퍼런스의 강한 정보 구조를 흡수
|
||||||
|
3. 상단 global status bar / 4자매 상태 카드 / `ACTIVE PIPELINE` 중심 구조 도입
|
||||||
|
4. `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`를 운영 문맥으로 재배치
|
||||||
|
5. 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
|
||||||
|
|
||||||
### 이번에 반드시 해결할 것
|
## 이행 전략
|
||||||
1. 페이지 역할을 고정한다.
|
- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
|
||||||
- `/office`: live operations workspace
|
- 문서는 신 구조를 기준으로 선반영
|
||||||
- `/`: executive snapshot
|
- 신규 QA 문서는 `.plans/qa/` 기준
|
||||||
- `/projects/[id]`: delivery detail
|
- 신규 Hotfix 문서는 `.plans/hotfix/` 기준
|
||||||
- `/org`: company org map
|
|
||||||
2. 공통 용어를 고정한다.
|
|
||||||
- `connection`, `activity`, `working`, `owner`, `participant`, `assignee`, `freshness`, `source`
|
|
||||||
3. `working`, `owner`, `participant`를 추정치와 확정치를 섞지 않게 다시 정의한다.
|
|
||||||
4. `fallback`, `snapshot`, `live`가 같은 사실처럼 보이지 않게 규칙을 문서화한다.
|
|
||||||
5. `360px`, `390px` 기준으로 긴 문장, 긴 badge, 카드 overflow, horizontal scroll을 금지한다.
|
|
||||||
6. `/office`는 기존 office group mental model 장점을 살리되, 4개 긴 박스 분해형이 아니라 group/scene/context 중심으로 재배치한다.
|
|
||||||
7. `/projects/[id]`의 `ASSIGNED NODES`를 truthful participant model로 교체한다.
|
|
||||||
8. `/org`는 자매 트리 데모가 아니라 실제 회사형 조직도 + independent agents 구조로 재설계한다.
|
|
||||||
|
|
||||||
### 이번에 하지 않을 것
|
|
||||||
- ACP harness 자체 구조 변경
|
|
||||||
- WebSocket 프로토콜 재설계
|
|
||||||
- 별도 모바일 앱 설계
|
|
||||||
- 실제 배포 자동화 플로우 재작성
|
|
||||||
- 조직도용 신규 비주얼 엔진 도입
|
|
||||||
|
|
||||||
## truth redesign 원칙
|
|
||||||
- `360px`, `390px`에서 카드와 badge는 줄바꿈되어야 하고 horizontal scroll이 없어야 한다
|
|
||||||
- websocket 연결 여부와 데이터 최신성은 같은 뜻으로 쓰지 않는다
|
|
||||||
- `working`은 단순 `thinking/tool_calling/speaking + gatewayConnected`의 프론트 추정치로 고정하지 않는다
|
|
||||||
- `owner`, `participant`, `assignee`는 같은 사람 목록으로 재사용하지 않는다
|
|
||||||
- fallback seed는 확정 owner, working, participant를 주입하지 않는다
|
|
||||||
- null/empty 상태도 사실대로 보여준다
|
|
||||||
|
|
||||||
## breakpoint 기준
|
|
||||||
- **Mobile compact:** `360px`
|
|
||||||
- **Mobile default:** `390px`
|
|
||||||
- **Tablet:** `768px`
|
|
||||||
- **Desktop:** `1280px+`
|
|
||||||
|
|
||||||
## 문서 맵
|
## 문서 맵
|
||||||
- 구조 기준: `../ARCHITECTURE.md`
|
- 구조 기준: `../ARCHITECTURE.md`
|
||||||
- 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
|
- 디자인 인덱스: `./design/index.md`
|
||||||
- Sprint 017: `./sprints/SPRINT-017.md`
|
- Sprint 계획: `./sprints/SPRINT-015.md`
|
||||||
- Sprint 018: `./sprints/SPRINT-018.md`
|
- Sprint handoff: `./sprints/SPRINT-015-NARANG-HANDOFF.md`
|
||||||
- HOTFIX-006: `./hotfix/HOTFIX-006.md`
|
- Hotfix 계획: `./hotfix/HOTFIX-007.md`
|
||||||
- API / truth contract: `./design/api-design.md`
|
- Hotfix handoff: `./hotfix/HOTFIX-007-NARANG-HANDOFF.md`
|
||||||
- `/office` UI: `./design/ui/office-dashboard-design.md`
|
- 배포 플로우: `./deploy/main-release-flow.md`
|
||||||
- `/office` chat 기준: `./design/ui/office-chat-design.md`
|
|
||||||
- `/` UI: `./design/ui/dashboard-design.md`
|
|
||||||
- `/projects/[id]` UI: `./design/ui/project-detail-design.md`
|
|
||||||
- `/org` UI: `./design/ui/org-design.md`
|
|
||||||
- QA draft: `./qa/SPRINT-018-review-1.md`
|
|
||||||
|
|
||||||
## 교차 참조 규칙
|
|
||||||
- Sprint 문서는 관련 design, QA, hotfix 문서를 반드시 링크한다
|
|
||||||
- design 문서는 실제 구현 파일 경로와 breakpoint를 함께 적는다
|
|
||||||
- API, UI, QA 문서에서 `working / owner / participant / source / freshness` 의미를 동일하게 쓴다
|
|
||||||
- `live / mirrored event / snapshot / doc-derived / fallback` source 라벨은 페이지 간 동일하게 쓴다
|
|
||||||
- 여기까지가 SPRINT-018 기준 scope야.
|
|
||||||
|
|||||||
@@ -20,13 +20,10 @@
|
|||||||
|
|
||||||
## PM2 설정
|
## PM2 설정
|
||||||
```
|
```
|
||||||
backend: pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard --env production
|
backend: pm2 start dist/main.js --name hanarang-api --env production
|
||||||
frontend: pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004
|
frontend: pm2 start npm --name hanarang-web -- start -- -p 3004
|
||||||
```
|
```
|
||||||
|
|
||||||
- backend 엔트리포인트는 실제 Nest 빌드 산출물 기준 `backend/dist/src/main.js`를 사용해.
|
|
||||||
- repo 루트에서 실행하면 `--cwd`를 명시해서 PM2가 올바른 작업 디렉터리를 잡도록 해.
|
|
||||||
|
|
||||||
## SSH 키 배포
|
## SSH 키 배포
|
||||||
- Dev 서버(10.10.10.169)에서 4자매 서버로 SSH 접속할 수 있도록 키 배포 필요
|
- Dev 서버(10.10.10.169)에서 4자매 서버로 SSH 접속할 수 있도록 키 배포 필요
|
||||||
- 이랑이가 SSH 키 생성 + 각 자매 서버에 authorized_keys 추가
|
- 이랑이가 SSH 키 생성 + 각 자매 서버에 authorized_keys 추가
|
||||||
|
|||||||
@@ -1,280 +1,71 @@
|
|||||||
# API 설계 — SPRINT-018 truth contract
|
# API 설계
|
||||||
|
|
||||||
## 목적
|
|
||||||
SPRINT-018 기준 API 문서는 `/office`, `/`, `/projects/[id]`, `/org`가 같은 운영 사실 계약을 공유하도록 잠그는 문서야. 기존 SPRINT-017의 `REST snapshot + WebSocket push` 모델은 유지하지만, 이번에는 `connection`, `activity`, `working`, `freshness`, `source`를 분리해서 정의한다.
|
|
||||||
|
|
||||||
## 참고 문서
|
|
||||||
- 실행 개요: `../OVERVIEW.md`
|
|
||||||
- Sprint: `../sprints/SPRINT-018.md`
|
|
||||||
- HOTFIX-006: `../hotfix/HOTFIX-006.md`
|
|
||||||
- UI 문서:
|
|
||||||
- `./ui/office-dashboard-design.md`
|
|
||||||
- `./ui/dashboard-design.md`
|
|
||||||
- `./ui/project-detail-design.md`
|
|
||||||
- `./ui/org-design.md`
|
|
||||||
|
|
||||||
## 공통 규칙
|
## 공통 규칙
|
||||||
- Base URL: `https://hanarang-api.nabomhalang.co.kr`
|
- Base URL: `https://hanarang-api.nabomhalang.co.kr`
|
||||||
- 응답 형식: JSON
|
- 응답 형식: JSON
|
||||||
- WS Namespace: `/ws`
|
- 인증: MVP에서는 인증 없음 (내부망 전용). 추후 JWT 추가 가능.
|
||||||
- 기본 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
|
- 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
|
||||||
- 읽기 API와 쓰기 API 권한은 분리해서 다룬다
|
|
||||||
|
|
||||||
## source taxonomy
|
## Sisters (자매 상태)
|
||||||
| source | 의미 | UI 규칙 |
|
|
||||||
|---|---|---|
|
|
||||||
| `live` | runtime 또는 websocket 기준 최신 상태 | 가장 강한 source |
|
|
||||||
| `mirrored_event` | event stream을 dashboard용으로 미러링한 상태 | live처럼 과장하지 않음 |
|
|
||||||
| `snapshot` | polling / REST 스냅샷 | 최신 시각과 같이 표시 |
|
|
||||||
| `doc_derived` | QA/HOTFIX/문서에서 파생한 값 | 운영 기록으로 표시 |
|
|
||||||
| `fallback` | 원본 없음, seed/default/보정 데이터 | 추정치임을 숨기지 않음 |
|
|
||||||
|
|
||||||
## 용어 계약
|
| Method | Endpoint | 설명 |
|
||||||
| 필드 | 의미 | 비고 |
|
|--------|----------|------|
|
||||||
|---|---|---|
|
| GET | `/api/sisters` | 4자매 상태 목록 (SSH로 실시간 조회) |
|
||||||
| `connection` | 연결 상태 | socket/gateway/runtime 가능 여부 |
|
| GET | `/api/sisters/:name` | 자매 상세 (설정 + 상태) |
|
||||||
| `activity` | 최근 활동 상태 | event/session/task evidence |
|
| GET | `/api/sisters/:name/config` | openclaw.json 내용 |
|
||||||
| `working` | 명시적 운영 상태 | 추정치와 확정치를 분리 |
|
| GET | `/api/sisters/:name/sessions` | 최근 세션 목록 |
|
||||||
| `freshness` | 생성/동기화 시각 | source와 별도 필드 |
|
| GET | `/api/sisters/:name/subagents` | 서브에이전트 사용 현황 |
|
||||||
| `source` | 값의 출처 | field-level 또는 section-level |
|
| POST | `/api/sisters/:name/restart` | Gateway 재시작 (관리자) |
|
||||||
|
| POST | `/api/sisters/:name/reset` | 세션 리셋 (관리자) |
|
||||||
## 공통 view-model 규칙
|
|
||||||
### 1. 연결과 활동을 분리한다
|
|
||||||
- `connection.connected=true`여도 `activity.state='idle'`일 수 있다
|
|
||||||
- `connection.connected=false`여도 마지막 `snapshot`은 남아 있을 수 있다
|
|
||||||
|
|
||||||
### 2. `working`은 별도 필드다
|
|
||||||
`working`은 단순히 `thinking/tool_calling/speaking + gatewayConnected` 조합으로 확정하지 않는다.
|
|
||||||
|
|
||||||
권장 형태:
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"working": {
|
|
||||||
"state": "active",
|
|
||||||
"confidence": "confirmed",
|
|
||||||
"reason": "active_session",
|
|
||||||
"label": "PR review in progress"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. fallback은 확정 owner/participant를 주입하지 않는다
|
|
||||||
- fallback은 `owner: null`, `participants: []`를 허용한다
|
|
||||||
- UI는 empty 상태를 그대로 렌더링해야 한다
|
|
||||||
|
|
||||||
### 4. freshness는 최소 2종 이상 준다
|
|
||||||
- `generatedAt`
|
|
||||||
- `lastActiveAt` 또는 `latestEventAt`
|
|
||||||
- 필요 시 `lastSnapshotAt`, `lastDocAt`
|
|
||||||
|
|
||||||
## Sisters / Office contract
|
|
||||||
|
|
||||||
### GET `/api/sisters`
|
### GET `/api/sisters`
|
||||||
`/office`와 `/`가 함께 쓰는 snapshot source다.
|
|
||||||
|
|
||||||
권장 응답 shape:
|
|
||||||
```json
|
```json
|
||||||
|
// Response 200
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"name": "harang",
|
"name": "harang",
|
||||||
"role": "Orchestrator",
|
"displayName": "하랑이",
|
||||||
"connection": {
|
"ip": "10.10.10.112",
|
||||||
"gateway": "connected",
|
"status": "online",
|
||||||
"runtime": "connected"
|
"lastSeen": "2026-04-04T01:45:00Z",
|
||||||
},
|
"role": "Orchestrator"
|
||||||
"activity": {
|
|
||||||
"state": "idle",
|
|
||||||
"label": "No recent operator event",
|
|
||||||
"lastActiveAt": "2026-04-09T01:20:00.000Z"
|
|
||||||
},
|
|
||||||
"working": {
|
|
||||||
"state": "idle",
|
|
||||||
"confidence": "confirmed",
|
|
||||||
"reason": null,
|
|
||||||
"label": null
|
|
||||||
},
|
|
||||||
"source": "snapshot",
|
|
||||||
"freshness": {
|
|
||||||
"lastSnapshotAt": "2026-04-09T01:20:10.000Z"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
### GET `/api/sisters/runtime`
|
## Projects (프로젝트)
|
||||||
runtime 세부 source다.
|
|
||||||
|
|
||||||
최소 필드:
|
| Method | Endpoint | 설명 |
|
||||||
- `gatewayConnected`
|
|--------|----------|------|
|
||||||
- `mainState`
|
| GET | `/api/projects` | 프로젝트 목록 (Gitea API 연동) |
|
||||||
- `currentTask`
|
| GET | `/api/projects/:id` | 프로젝트 상세 + Sprint + Task |
|
||||||
- `activeSessionLabel`
|
| GET | `/api/projects/:id/tasks` | Task Ledger |
|
||||||
- `activeSessionUpdatedAt`
|
| GET | `/api/projects/:id/activity` | 활동 로그 |
|
||||||
- `recentMessages`
|
|
||||||
- `subagents`
|
|
||||||
- `source`
|
|
||||||
- `freshness`
|
|
||||||
|
|
||||||
### sister state mapping 규칙
|
## Activity (활동 피드)
|
||||||
| UI 상태 | API 판단 기준 |
|
|
||||||
|---|---|
|
|
||||||
| `connected idle` | `connection.connected=true` + `working.state='idle'` |
|
|
||||||
| `active working` | `working.state='active'` + reason 존재 |
|
|
||||||
| `snapshot only` | `source='snapshot'` + live connection 없음 |
|
|
||||||
| `fallback only` | `source='fallback'` |
|
|
||||||
| `offline` | `connection.runtime='disconnected'` + snapshot도 stale |
|
|
||||||
|
|
||||||
## Dashboard ops contract
|
| Method | Endpoint | 설명 |
|
||||||
|
|--------|----------|------|
|
||||||
|
| GET | `/api/activity` | 전체 최근 활동 피드 (limit, offset) |
|
||||||
|
|
||||||
### GET `/api/dashboard/ops`
|
## Org (조직도)
|
||||||
`/`와 `/office` 상단 summary가 같이 보는 executive contract다.
|
|
||||||
|
|
||||||
최소 필드:
|
| Method | Endpoint | 설명 |
|
||||||
```json
|
|--------|----------|------|
|
||||||
{
|
| GET | `/api/org` | 조직도 데이터 (자매 + 서브에이전트 트리) |
|
||||||
"focusProject": {
|
|
||||||
"name": "hanarang-dashboard",
|
|
||||||
"phase": "IMPLEMENT",
|
|
||||||
"progress": 62,
|
|
||||||
"deployStatus": "READY FOR DEPLOY",
|
|
||||||
"owner": {
|
|
||||||
"name": null,
|
|
||||||
"source": "snapshot",
|
|
||||||
"whyVisible": null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"pipeline": {
|
|
||||||
"activeTask": "SPRINT-018",
|
|
||||||
"focus": "dashboard truth redesign",
|
|
||||||
"nodes": [],
|
|
||||||
"source": "mirrored_event",
|
|
||||||
"freshness": {
|
|
||||||
"generatedAt": "2026-04-09T01:20:10.000Z",
|
|
||||||
"latestEventAt": "2026-04-09T01:18:00.000Z"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"board": [],
|
|
||||||
"freshness": {
|
|
||||||
"generatedAt": "2026-04-09T01:20:10.000Z",
|
|
||||||
"activityLatestAt": "2026-04-09T01:18:00.000Z",
|
|
||||||
"sistersLatestAt": "2026-04-09T01:20:00.000Z",
|
|
||||||
"qaDocLatestAt": "2026-04-09T00:55:00.000Z"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### dashboard 계약 규칙
|
## Admin (관리자)
|
||||||
- `socket on/off`는 connection badge로만 쓴다
|
|
||||||
- `freshness` badge는 별도로 보여준다
|
|
||||||
- `owner`가 없으면 `null` 유지, fallback sister 고정 노출 금지
|
|
||||||
- `focus`가 recent activity 기반 추정이면 `source='mirrored_event'` 또는 `snapshot`으로 표기한다
|
|
||||||
|
|
||||||
## Project detail contract
|
| Method | Endpoint | 설명 |
|
||||||
|
|--------|----------|------|
|
||||||
|
| GET | `/api/admin/harness/:sister/:file` | 하네스 파일 읽기 (AGENTS.md 등) |
|
||||||
|
| PUT | `/api/admin/harness/:sister/:file` | 하네스 파일 수정 + SSOT push |
|
||||||
|
| GET | `/api/admin/repos` | Gitea repo 목록 |
|
||||||
|
| GET | `/api/admin/logs/:sister` | 세션 로그 |
|
||||||
|
| GET | `/api/admin/costs` | 토큰 사용량/비용 |
|
||||||
|
|
||||||
### GET `/api/projects/:id`
|
## Health
|
||||||
프로젝트 상세 응답은 participant와 assignee를 분리한다.
|
|
||||||
|
|
||||||
권장 shape:
|
| Method | Endpoint | 설명 |
|
||||||
```json
|
|--------|----------|------|
|
||||||
{
|
| GET | `/health` | 서버 상태 확인 |
|
||||||
"id": 18,
|
|
||||||
"name": "hanarang-dashboard",
|
|
||||||
"phase": "QA",
|
|
||||||
"participantSummary": {
|
|
||||||
"currentOwners": [],
|
|
||||||
"participants": [
|
|
||||||
{
|
|
||||||
"name": "darang",
|
|
||||||
"whyVisible": ["reviewer", "latest_qa_author"],
|
|
||||||
"source": "snapshot",
|
|
||||||
"freshness": { "lastActiveAt": "2026-04-09T01:10:00.000Z" }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"emptyState": "NO CONFIRMED ACTIVE PARTICIPANT"
|
|
||||||
},
|
|
||||||
"taskAssigneeAggregate": {
|
|
||||||
"uniqueAssignees": ["narang", "darang"],
|
|
||||||
"taskCountByAssignee": {
|
|
||||||
"narang": 4,
|
|
||||||
"darang": 1
|
|
||||||
},
|
|
||||||
"source": "snapshot"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### project participant 규칙
|
|
||||||
- `participants`는 why-visible 없는 항목을 허용하지 않는다
|
|
||||||
- `currentOwners`와 `taskAssigneeAggregate`는 별도 섹션으로 쓴다
|
|
||||||
- 참여자 없음은 정상 상태다. `null`/empty를 숨기지 않는다
|
|
||||||
|
|
||||||
## Org contract
|
|
||||||
|
|
||||||
### GET `/api/org`
|
|
||||||
단순 sister tree 대신 회사형 데이터 구조를 준다.
|
|
||||||
|
|
||||||
권장 shape:
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"orgUnits": [
|
|
||||||
{
|
|
||||||
"id": "hq",
|
|
||||||
"name": "하나랑 HQ",
|
|
||||||
"kind": "hq",
|
|
||||||
"lead": "harang",
|
|
||||||
"memberIds": ["harang"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "delivery",
|
|
||||||
"name": "Delivery",
|
|
||||||
"kind": "functional_team",
|
|
||||||
"lead": "narang",
|
|
||||||
"memberIds": ["narang", "darang"]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"members": [
|
|
||||||
{
|
|
||||||
"id": "harang",
|
|
||||||
"type": "sister",
|
|
||||||
"role": "Orchestrator",
|
|
||||||
"status": { "connection": "connected", "working": "idle" },
|
|
||||||
"source": "snapshot",
|
|
||||||
"freshness": { "lastSnapshotAt": "2026-04-09T01:20:00.000Z" }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"reportingLines": [
|
|
||||||
{ "from": "hq", "to": "delivery", "kind": "manages" }
|
|
||||||
],
|
|
||||||
"independentAgents": [
|
|
||||||
{
|
|
||||||
"id": "security-auditor",
|
|
||||||
"name": "security-auditor",
|
|
||||||
"ownerSister": null,
|
|
||||||
"source": "snapshot"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### org 계약 규칙
|
|
||||||
- `independentAgents`와 `sisterOwnedAgents`를 구분한다
|
|
||||||
- 특정 자매를 항상 root로 하드코딩하지 않는다
|
|
||||||
- org 화면에서도 `status / source / freshness` 필드를 재사용한다
|
|
||||||
|
|
||||||
## 인증 규칙
|
|
||||||
- 읽기 API는 현재 공개 조회와 관리자 조회가 섞여 있으므로 endpoint별로 명시한다
|
|
||||||
- direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수
|
|
||||||
- WebSocket 연결은 JWT 필수
|
|
||||||
- JWT 없음 상태는 프론트에서 `send disabled reason`까지 표시해야 한다
|
|
||||||
|
|
||||||
## QA 체크 포인트
|
|
||||||
- `working`이 fallback seed에서 주입되지 않는지
|
|
||||||
- `socket`과 `freshness`가 같은 label로 뭉치지 않는지
|
|
||||||
- `owner`, `participant`, `assignee`가 서로 다른 필드로 내려오는지
|
|
||||||
- `/api/org`가 independent agents를 누락하지 않는지
|
|
||||||
- `360px`, `390px` UI에서 긴 source 문구가 줄바꿈되는지
|
|
||||||
|
|
||||||
## out-of-scope
|
|
||||||
- 실제 DTO 구현 상세
|
|
||||||
- activity evidence 저장소 개선
|
|
||||||
- org 편집 API
|
|
||||||
|
|||||||
@@ -44,5 +44,5 @@ Backend가 SSH로 각 자매 서버에서 수집:
|
|||||||
## 배포
|
## 배포
|
||||||
- **Dev 서버:** 10.10.10.169
|
- **Dev 서버:** 10.10.10.169
|
||||||
- **프로세스 관리:** PM2
|
- **프로세스 관리:** PM2
|
||||||
- **FE:** `pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004`
|
- **FE:** pm2 start npm --name hanarang-web -- start (포트 3004)
|
||||||
- **BE:** `pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard` (포트 3005)
|
- **BE:** pm2 start dist/main.js --name hanarang-api (포트 3005)
|
||||||
|
|||||||
@@ -8,8 +8,6 @@
|
|||||||
|
|
||||||
## 페이지별 UI
|
## 페이지별 UI
|
||||||
- `ui/dashboard-design.md`
|
- `ui/dashboard-design.md`
|
||||||
- `ui/office-dashboard-design.md`
|
|
||||||
- `ui/office-chat-design.md`
|
|
||||||
- `ui/projects-page-design.md`
|
- `ui/projects-page-design.md`
|
||||||
- `ui/project-detail-design.md`
|
- `ui/project-detail-design.md`
|
||||||
- `ui/sister-detail-design.md`
|
- `ui/sister-detail-design.md`
|
||||||
@@ -21,20 +19,8 @@
|
|||||||
## 레퍼런스
|
## 레퍼런스
|
||||||
- `references/07-master-dashboard-v3-reference.md`
|
- `references/07-master-dashboard-v3-reference.md`
|
||||||
|
|
||||||
## 현재 우선 문서
|
## Sprint 015에서 반드시 반영할 화면
|
||||||
- Sprint 실행 기준: `../sprints/SPRINT-017.md`
|
- 대시보드 메인: Master Dashboard v3 구조 반영
|
||||||
- 제품 비전: `../../docs/product-specs/openclaw-office-dashboard-prd.md`
|
- 핵심 섹션: Global Status Bar / 4자매 상태 카드 / `ACTIVE PIPELINE`
|
||||||
- 실행 개요: `../OVERVIEW.md`
|
- 운영 패널: `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`
|
||||||
|
- 모바일: 데스크톱 구조를 억지로 축소하지 말고 세로 읽기 흐름으로 재배열
|
||||||
## SPRINT-017에서 반드시 잠글 것
|
|
||||||
- 오피스 메인: Desktop / Tablet / Mobile 정보 우선순위
|
|
||||||
- 오피스 채팅: JWT 필요, 전송 실패, empty state 처리
|
|
||||||
- 운영 패널: active workflow / sprint / review loop / deploy gate / server health 상태 톤 통일
|
|
||||||
- 실시간 모델: `live / snapshot / fallback` 판정 규칙
|
|
||||||
- WS + polling reconciliation: stale / reconnect / downgrade 기준
|
|
||||||
|
|
||||||
## Git 기준 확인 경로
|
|
||||||
- `/office` entry: `frontend/app/office/page.tsx`
|
|
||||||
- scene: `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- chat: `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- ws gateway: `backend/src/events/events.gateway.ts`
|
|
||||||
|
|||||||
@@ -1,122 +1,239 @@
|
|||||||
# `/` UI 기준 — SPRINT-018 executive snapshot
|
# 대시보드 메인 (`/`) — Sprint 015 Master Dashboard v3
|
||||||
|
|
||||||
## 문서 목적
|
## 목적
|
||||||
메인 대시보드(`/`)를 가장 중요한 운영 변화만 짧게 읽는 **executive snapshot**으로 다시 잠근다. HOTFIX-006의 문구 절제와 source 정합성 보정을 포함하고, 이번 Sprint에서는 `socket`, `freshness`, `owner`, `source`를 오해 없이 분리한다.
|
대시보드 메인은 단순 요약 화면이 아니라, 자기야가 들어오자마자 `지금 4자매 파이프라인이 어디까지 와 있는지` 즉시 판단할 수 있는 대표 운영 화면이어야 해.
|
||||||
|
|
||||||
## 참고 문서
|
이번 v3의 핵심은 **현행 미니멀 터미널 UI를 유지하면서, 더 강한 정보 구조와 흐름 시각화로 메인 화면을 재구성하는 것**이야.
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
|
||||||
- Sprint: `.plans/sprints/SPRINT-018.md`
|
|
||||||
- HOTFIX-006: `.plans/hotfix/HOTFIX-006.md`
|
|
||||||
- API 설계: `.plans/design/api-design.md`
|
|
||||||
|
|
||||||
## 기준 구현 파일
|
## 유지할 것
|
||||||
- `frontend/app/page.tsx`
|
- 현재 제품의 미니멀 터미널 톤
|
||||||
- `backend/src/dashboard/dashboard.service.ts`
|
- 짙은 배경 + 얇은 border + mono 보조 텍스트
|
||||||
- `backend/src/sisters/sisters.service.ts`
|
- 4자매 중심 세계관/역할 구분
|
||||||
|
- 모바일 하단 탭바와 기존 페이지 동선
|
||||||
|
|
||||||
## 페이지 역할
|
## 강하게 가져올 것
|
||||||
`/`는 live intervention 화면이 아니야. 여기서는 운영자가 아래를 빠르게 판단해야 한다.
|
- 상단 global status bar 구조
|
||||||
- 지금 focus가 어디 있나
|
- 4자매 카드 1행 배치
|
||||||
- 최근 event는 언제 있었나
|
- `ACTIVE PIPELINE` 중심 운영 다이어그램
|
||||||
- active owner가 있나 없나
|
- `ACTIVITY FEED` + `SPRINT METRICS` 병렬 구조
|
||||||
- 어떤 섹션이 live / mirrored event / snapshot / doc-derived / fallback 인가
|
- `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS` 하단 운영 패널 구조
|
||||||
|
|
||||||
## 핵심 문제
|
## 줄일 것
|
||||||
현재 구현에서 바로 고쳐야 하는 점:
|
- 과한 glow
|
||||||
- `socket off`가 전체 오류처럼 읽힌다
|
- 장식성 애니메이션 남발
|
||||||
- snapshot freshness와 socket 연결 여부가 같은 줄에서 섞인다
|
- 의미 없이 많은 뱃지/배경 장식
|
||||||
- owner가 없을 때 fallback sister가 고정 노출된다
|
- mock 대시보드처럼 보이는 가짜 숫자 강조
|
||||||
- focus summary와 panel copy가 길고 설명형이다
|
|
||||||
|
|
||||||
## top bar 규칙
|
---
|
||||||
### 좌측
|
|
||||||
- `MASTER DASHBOARD` 또는 동급 짧은 label
|
|
||||||
- focus headline 1개
|
|
||||||
|
|
||||||
### 중앙
|
## 전체 레이아웃
|
||||||
- current project / current sprint / deploy state
|
### 1. Top Global Status Bar
|
||||||
|
한 줄 또는 반응형 2단 구조.
|
||||||
|
|
||||||
### 우측
|
#### 좌측
|
||||||
- connection badge
|
- 브랜드/제품명
|
||||||
- freshness badge
|
- 현재 페이지 정체성 (`Master Dashboard`)
|
||||||
- active owner 또는 `NO ACTIVE OWNER`
|
|
||||||
|
|
||||||
## connection / freshness 분리 규칙
|
#### 중앙
|
||||||
| badge | 의미 | 예시 |
|
- 현재 Sprint / Day / focus summary
|
||||||
|---|---|---|
|
- 진행률 bar 또는 current cycle 요약
|
||||||
| connection | websocket/event stream 연결 상태 | `EVENT STREAM ON`, `EVENT STREAM OFF` |
|
|
||||||
| freshness | 데이터 최신성 | `SYNC 18s AGO`, `SNAPSHOT 2m AGO` |
|
|
||||||
| source | 값의 출처 | `MIRRORED EVENT`, `SNAPSHOT`, `DOC-DERIVED`, `FALLBACK` |
|
|
||||||
|
|
||||||
### 금지
|
#### 우측
|
||||||
- `socket off` 하나만 보고 오류처럼 보이게 만들기
|
- Discord/Runtime 연결 상태
|
||||||
- connection badge를 source badge 대신 쓰기
|
- 알림 진입점
|
||||||
- freshness 없는 `LIVE` 라벨 단독 사용
|
- operator/avatar 요약
|
||||||
|
|
||||||
## owner 표현 규칙
|
#### UX 기준
|
||||||
- active owner는 source와 why-visible이 있을 때만 강하게 노출
|
- 상단에서 현재 운영 국면을 짧게 읽을 수 있어야 함
|
||||||
- owner가 없으면 `NO ACTIVE OWNER` 또는 `UNASSIGNED`로 표시
|
- 모바일에서는 좌/중/우를 무리하게 한 줄에 우겨넣지 말고 2단으로 자연스럽게 접기
|
||||||
- fallback sister를 기본 owner로 고정 노출하지 않는다
|
|
||||||
- snapshot owner면 `SNAPSHOT OWNER`를 badge로 분리한다
|
|
||||||
|
|
||||||
## information architecture
|
---
|
||||||
### 1. top snapshot bar
|
|
||||||
- focus headline
|
|
||||||
- connection / freshness / source badges
|
|
||||||
- active owner
|
|
||||||
|
|
||||||
### 2. sister status row
|
### 2. Sister Status Cards Row
|
||||||
카드는 짧고 운영형으로 유지한다.
|
4자매 카드는 1행 핵심 상태 영역.
|
||||||
|
|
||||||
각 카드 최소 정보:
|
#### 공통 정보
|
||||||
- name
|
- 이름
|
||||||
- role
|
- 역할
|
||||||
- truthful state (`active working`, `connected idle`, `snapshot only`, `offline`)
|
- 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE`, `DEPLOYING` 등)
|
||||||
- short summary 1줄
|
- CPU / RAM 또는 대응 리소스 지표
|
||||||
- source/freshness meta
|
- 현재 작업 한 줄 요약
|
||||||
|
|
||||||
### 3. active pipeline
|
#### 역할별 색 기준
|
||||||
- 실제 event mirrored인지, snapshot inference인지 표시
|
- Harang: amber
|
||||||
- `NO ACTIVE HANDOFF`, `NO CONFIRMED REVIEW LOOP` 같은 neutral empty state 허용
|
- Narang: sky
|
||||||
- 추정치 문장을 확정 사실처럼 쓰지 않는다
|
- Darang: pink
|
||||||
|
- Irang: violet
|
||||||
|
|
||||||
### 4. activity feed / metrics
|
#### 상태 표현 규칙
|
||||||
- activity feed는 근거
|
- 색은 역할 + 현재 상태를 같이 전달해야 함
|
||||||
- metrics는 요약
|
- working/reviewing처럼 active 상태일 때만 강한 강조
|
||||||
- source가 다른 값은 같은 카드 안에서 섞지 않는다
|
- idle은 조용하게
|
||||||
|
- offline은 회색/경고 계열로 분명히 구분
|
||||||
|
|
||||||
### 5. infra / board
|
#### 카드 UX 기준
|
||||||
- infra: runtime/snapshot 상태
|
- 네 카드의 높이/구조는 최대한 동일
|
||||||
- board: harness/qa 같은 doc-derived 또는 activity-derived 기록
|
- 긴 텍스트는 1줄 또는 2줄 clamp
|
||||||
- 각 카드에 source badge를 유지한다
|
- CPU/RAM은 숫자와 bar를 함께 보여줘도 되지만 과장하지 말 것
|
||||||
|
- 아바타/아이콘은 보조 요소고, 상태 텍스트가 주인공이어야 함
|
||||||
|
|
||||||
## copy rules
|
---
|
||||||
- 짧은 운영형 문장 우선
|
|
||||||
- 설명문, 감상문, 구현 메타 문장 금지
|
|
||||||
- `~정리했어`, `~보여준다` 같은 자기설명 금지
|
|
||||||
- owner/focus/fallback 문구는 neutral tone 사용
|
|
||||||
|
|
||||||
권장 예시:
|
### 3. `ACTIVE PIPELINE`
|
||||||
- `EVENT STREAM OFF`
|
이번 v3의 대표 섹션.
|
||||||
- `SNAPSHOT 58s AGO`
|
|
||||||
- `NO ACTIVE OWNER`
|
|
||||||
- `DOC-DERIVED`
|
|
||||||
- `NO RECENT QA`
|
|
||||||
- `MIRRORED EVENT`
|
|
||||||
|
|
||||||
## mobile 360 / 390 rules
|
#### 목적
|
||||||
- top bar chip은 wrap 허용
|
User → Harang → Narang → Darang → Irang 흐름과, maker-checker loop, escalation 조건을 한눈에 보여준다.
|
||||||
- owner 영역은 avatar + label 고정폭 금지
|
|
||||||
- focus summary는 1~2문장 대신 짧은 label + short detail 사용
|
|
||||||
- sister card, pipeline card, board card, git/meta row에서 horizontal scroll 금지
|
|
||||||
|
|
||||||
## acceptance
|
#### 기본 노드
|
||||||
- socket 연결 여부와 freshness가 별도 라벨로 보인다
|
- User
|
||||||
- `socket off`가 오류처럼 읽히지 않는다
|
- Harang (`Plan & Assign`)
|
||||||
- owner가 없을 때 fallback owner 고정 노출이 사라진다
|
- Narang (`Implement` or active task id)
|
||||||
- 카드 문구가 짧은 운영형 문장으로 정리된다
|
- Darang (`Review / QA`)
|
||||||
- 주요 섹션이 `live / mirrored event / snapshot / doc-derived / fallback` 중 무엇인지 일관되게 보인다
|
- Irang (`Deploy / Idle`)
|
||||||
|
|
||||||
## rollout note
|
#### 보여줄 정보
|
||||||
- HOTFIX-006에서 잠근 source/freshness 원칙을 홈 전체 IA에 확대 적용한다
|
- 현재 active task 또는 ticket id
|
||||||
- `/office`와 달리 `/`는 intervention CTA보다 snapshot readability를 우선한다
|
- Narang ↔ Darang review loop
|
||||||
|
- escalation 조건 또는 누적 실패 횟수
|
||||||
|
- Irang이 아직 idle인지, redeploy 대기인지
|
||||||
|
|
||||||
|
#### 구현 기준
|
||||||
|
- SVG 기반 라인/화살표 허용
|
||||||
|
- active state가 있을 때만 제한적 pulse/flow
|
||||||
|
- 정적인 설명보다 실제 운영 상태가 우선
|
||||||
|
- loop / escalation은 읽히되 과하게 복잡하면 안 됨
|
||||||
|
|
||||||
|
#### 금지
|
||||||
|
- 예쁘기만 한 다이어그램
|
||||||
|
- 현재 상태를 읽을 수 없는 장식형 선/화살표
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Middle Row — `ACTIVITY FEED` + `SPRINT METRICS`
|
||||||
|
운영 근거와 정량 판단을 나란히 배치한다.
|
||||||
|
|
||||||
|
#### A. Activity Feed
|
||||||
|
운영 이벤트 타임라인.
|
||||||
|
|
||||||
|
##### 우선 정보
|
||||||
|
- 시각
|
||||||
|
- 주체/대상 (예: Narang → Darang)
|
||||||
|
- 이벤트 타입 (`handoff`, `review_request`, `review_fail`, `deploy`, `hotfix` 등)
|
||||||
|
- 관련 task/sprint/hotfix id
|
||||||
|
- 실패/경고 시 짧은 원인
|
||||||
|
|
||||||
|
##### UX 기준
|
||||||
|
- 텍스트 로그가 아니라 읽히는 이벤트 카드여야 함
|
||||||
|
- event type 색은 통일감 있게 관리
|
||||||
|
- 필요하면 details/JSON 결과는 접어서 보여줌
|
||||||
|
|
||||||
|
#### B. Sprint Metrics
|
||||||
|
한 Sprint의 진행 체감치를 운영 지표로 압축.
|
||||||
|
|
||||||
|
##### 포함 후보
|
||||||
|
- total tasks
|
||||||
|
- done / in progress / review / planning 비중
|
||||||
|
- sister별 completed count
|
||||||
|
- avg iterations
|
||||||
|
- first-pass rate
|
||||||
|
- escalation count
|
||||||
|
|
||||||
|
##### UX 기준
|
||||||
|
- 차트는 보조, 숫자 읽기가 우선
|
||||||
|
- donut + mini bar + stat box 조합 허용
|
||||||
|
- `활동 피드와 같은 행에서 비교`했을 때 자연스러워야 함
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Bottom Row — `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS`
|
||||||
|
운영 기반과 학습 자산을 하단에 둔다.
|
||||||
|
|
||||||
|
#### A. Infrastructure Overview
|
||||||
|
##### 목적
|
||||||
|
현재 시스템이 어디서 어떻게 돌아가는지 빠르게 파악.
|
||||||
|
|
||||||
|
##### 포함 요소
|
||||||
|
- gateway
|
||||||
|
- sisters runtime host/lxc/vm
|
||||||
|
- deploy access path
|
||||||
|
- health / load / uptime 요약
|
||||||
|
|
||||||
|
##### 표현 방식
|
||||||
|
- 단순 카드 나열보다 연결 관계가 보이는 가벼운 맵 구조 선호
|
||||||
|
- 다만 실제 데이터가 빈약하면 과장된 네트워크 다이어그램으로 만들지 말 것
|
||||||
|
|
||||||
|
#### B. Mistake Log & Harness
|
||||||
|
##### 목적
|
||||||
|
운영 중 쌓인 실수/규칙/학습 자산을 한 눈에 보여줌.
|
||||||
|
|
||||||
|
##### 포함 요소
|
||||||
|
- 최신 mistake/harness rule 몇 개
|
||||||
|
- 작성 시점
|
||||||
|
- 누가 추가했는지
|
||||||
|
- category (`DB Schema`, `Frontend`, `Deployment` 등)
|
||||||
|
- 필요하면 작은 trend visualization
|
||||||
|
|
||||||
|
##### UX 기준
|
||||||
|
- 단순 문서 링크가 아니라 운영 학습 보드처럼 보여야 함
|
||||||
|
- `View Full` 또는 상세 문서 링크는 보조로 유지
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 데스크톱 정보 순서
|
||||||
|
1. Top Global Status Bar
|
||||||
|
2. Sister Status Cards
|
||||||
|
3. Active Pipeline
|
||||||
|
4. Activity Feed / Sprint Metrics
|
||||||
|
5. Infrastructure Overview / Mistake Log & Harness
|
||||||
|
|
||||||
|
## 모바일 정보 순서
|
||||||
|
1. Top Status Summary
|
||||||
|
2. Sister Status Cards (2열 또는 1열)
|
||||||
|
3. Active Pipeline
|
||||||
|
4. Activity Feed
|
||||||
|
5. Sprint Metrics
|
||||||
|
6. Infrastructure Overview
|
||||||
|
7. Mistake Log & Harness
|
||||||
|
|
||||||
|
모바일에서는 복잡한 수평 관계보다 세로 읽기 흐름이 우선이야.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 데이터 연결 원칙
|
||||||
|
- mock 텍스트/숫자로 고정하지 말고 실제 데이터가 들어올 자리를 먼저 설계할 것
|
||||||
|
- 값이 없을 때는 `No recent activity`, `No active deployment`, `No harness rules yet`처럼 조용한 empty state 제공
|
||||||
|
- offline / missing / unavailable 상태는 숨기지 말고 명확히 드러낼 것
|
||||||
|
- websocket 연결 상태와 데이터 freshness를 같은 의미로 쓰지 말 것
|
||||||
|
- 각 섹션은 가능하면 아래 source 중 하나로 구분할 것
|
||||||
|
- `runtime live`
|
||||||
|
- `event mirrored`
|
||||||
|
- `polling snapshot`
|
||||||
|
- `doc derived`
|
||||||
|
- `empty / unavailable`
|
||||||
|
- 추정/합성값이면 사실처럼 단정하지 말고 neutral wording 사용
|
||||||
|
|
||||||
|
## 카피 원칙
|
||||||
|
- 설명문보다 라벨형 문구 우선
|
||||||
|
- 첫 화면 문구는 짧고 건조해야 함
|
||||||
|
- `~만들었어`, `~정리했어`, `~읽히게` 같은 메타 설명 금지
|
||||||
|
- 보드/패널 body는 원문 요약 또는 상태 문구 위주로 짧게 유지
|
||||||
|
|
||||||
|
## 인터랙션 원칙
|
||||||
|
- hover 없어도 핵심 정보가 읽혀야 함
|
||||||
|
- 클릭 가능한 영역은 페이지 이동 또는 상세 패널 열기처럼 의미가 분명해야 함
|
||||||
|
- notification / details / expand는 보조 수단
|
||||||
|
|
||||||
|
## 스타일 원칙
|
||||||
|
- background는 현행 다크 톤 유지
|
||||||
|
- border 1px 중심
|
||||||
|
- 그림자/glow는 active state 강조용 최소치만 사용
|
||||||
|
- 하드한 터미널 감성과 현대적 운영 패널 느낌 사이 균형 유지
|
||||||
|
|
||||||
|
## 연결 페이지
|
||||||
|
- 프로젝트 페이지는 phase/QA/deploy 세부 판단용
|
||||||
|
- 활동 페이지는 장기 로그 열람용
|
||||||
|
- 자매 상세는 개별 runtime/세션 분석용
|
||||||
|
- 관리 페이지는 조작/재시작/관리용
|
||||||
|
|
||||||
|
즉, 홈은 모든 걸 다 보여주는 곳이 아니라 **지금 어디를 눌러야 하는지 판단시키는 운영 출발점**이어야 해.
|
||||||
|
|||||||
@@ -1,150 +0,0 @@
|
|||||||
# 오피스 direct chat UI 기준 — SPRINT-017 모바일 개편
|
|
||||||
|
|
||||||
## 문서 목적
|
|
||||||
`ChatWorkspace.tsx`를 모바일 direct chat 기준으로 다시 정리하기 위한 문서야. 기준 Sprint는 `.plans/sprints/SPRINT-017.md`이고, 메인 IA와 first viewport 원칙은 `.plans/design/ui/office-dashboard-design.md`를 따른다.
|
|
||||||
|
|
||||||
## 기준 구현 파일
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- 연관 문서: `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
|
|
||||||
## breakpoint 기준
|
|
||||||
- `360px`: minimum mobile compact
|
|
||||||
- `390px`: primary mobile baseline
|
|
||||||
- `768px`: tablet transition
|
|
||||||
- `1280px+`: desktop baseline
|
|
||||||
|
|
||||||
## 현재 main 구현에서 확인된 문제
|
|
||||||
- `page.tsx`에서 chat은 `ChatArea` 고정 높이(`520px`, 모바일 `460px`) 안에 들어가 세로 흐름을 끊는다.
|
|
||||||
- `ChatWorkspace.tsx`는 모바일에서도 데스크톱 구조의 흔적이 강하다.
|
|
||||||
- 자매 탭, 메시지, 보조 컨텍스트가 분리되어 있다.
|
|
||||||
- `SisterContext`는 `1199px` 미만에서 숨겨져 모바일 보조 정보가 사라진다.
|
|
||||||
- `SendBtn`은 토큰이 없으면 disabled라서, `JWT 없음` 이유를 화면에서 놓치기 쉽다.
|
|
||||||
- empty 상태 문구는 있지만, `JWT 없음 / error / runtime 확인 중`이 같은 강도로 정리되어 있지 않다.
|
|
||||||
|
|
||||||
## 모바일 direct chat 원칙
|
|
||||||
1. **한 컬럼 흐름**
|
|
||||||
- mobile(` <768`)에서는 탭 → 상태 → 타임라인 → composer → 보조 정보 순서로 한 컬럼으로 간다.
|
|
||||||
2. **전송 가능 여부를 숨기지 않기**
|
|
||||||
- `JWT 없음`이면 입력 근처에서 바로 이유를 보여준다.
|
|
||||||
3. **상태는 상단에 짧게**
|
|
||||||
- runtime/source 상태는 header 또는 composer 상단에서 한 번에 읽히게 한다.
|
|
||||||
4. **메시지가 우선**
|
|
||||||
- 보조 컨텍스트보다 타임라인과 입력창이 우선이다.
|
|
||||||
5. **고정 높이 최소화**
|
|
||||||
- 460px 박스 안에 억지로 채우지 않는다.
|
|
||||||
|
|
||||||
## mobile layout
|
|
||||||
모바일 기본 순서는 아래야.
|
|
||||||
|
|
||||||
### 1. sister switcher
|
|
||||||
- 4자매 전환을 상단 compact tab 또는 segmented control로 둔다
|
|
||||||
- 이름과 active 상태만 짧게 보여준다
|
|
||||||
- role 전체 문구는 모바일에서 숨기거나 축약한다
|
|
||||||
|
|
||||||
### 2. runtime / source badge row
|
|
||||||
상단 배지 영역에서 아래를 보여준다.
|
|
||||||
- runtime 상태: `연결됨`, `확인 중`, `stale`, `error`
|
|
||||||
- source badge: `live`, `snapshot`, `fallback`
|
|
||||||
- 필요 시 현재 자매 상태(`thinking`, `tool_calling`, `speaking`, `idle`)
|
|
||||||
|
|
||||||
### 3. timeline
|
|
||||||
- 메시지 타임라인은 화면에서 가장 큰 비중을 차지한다
|
|
||||||
- `user / assistant / tool` 구분은 유지한다
|
|
||||||
- tool 메시지는 mono 또는 강조 배경 유지
|
|
||||||
- 버블 최대 폭은 모바일에서 너무 좁아지지 않게 조정한다
|
|
||||||
|
|
||||||
### 4. composer
|
|
||||||
- 입력창과 전송 버튼은 타임라인 바로 아래
|
|
||||||
- `Enter = 전송`, `Shift+Enter = 줄바꿈` 힌트는 짧게 유지
|
|
||||||
- 전송 불가 상태면 버튼만 막지 말고 이유를 붙인다
|
|
||||||
|
|
||||||
### 5. support state block
|
|
||||||
모바일에서는 숨기지 말고 composer 아래 또는 접이식 블록으로 둔다.
|
|
||||||
- current task
|
|
||||||
- active session label
|
|
||||||
- data source 설명 한 줄
|
|
||||||
|
|
||||||
## 상태 배지 규칙
|
|
||||||
### source badge
|
|
||||||
- `live`: runtime 연결 또는 최신 상태 반영 중
|
|
||||||
- `snapshot`: 마지막 조회 스냅샷 표시 중
|
|
||||||
- `fallback`: 기본값 또는 보조 데이터 기준
|
|
||||||
|
|
||||||
### runtime badge
|
|
||||||
- `연결됨`: gatewayConnected = true
|
|
||||||
- `확인 중`: 아직 runtime snapshot 수신 전
|
|
||||||
- `stale`: 최근 업데이트가 늦음
|
|
||||||
- `오류`: 전송 또는 조회 실패
|
|
||||||
|
|
||||||
### 배지 위치
|
|
||||||
- header 오른쪽 또는 바로 아래 1줄
|
|
||||||
- 모바일에서는 긴 설명 대신 짧은 라벨 + 보조 문구 1개만 둔다
|
|
||||||
|
|
||||||
## empty / error / JWT 없음 UX
|
|
||||||
### empty
|
|
||||||
조건:
|
|
||||||
- 메시지 없음
|
|
||||||
- 최근 runtime 메시지도 없음
|
|
||||||
|
|
||||||
표현:
|
|
||||||
- "아직 대화가 없어"
|
|
||||||
- 바로 보낼 수 있는 예시 액션 1개 또는 placeholder
|
|
||||||
- runtime 상태 보조 문구
|
|
||||||
|
|
||||||
### JWT 없음
|
|
||||||
조건:
|
|
||||||
- `localStorage` 토큰 없음
|
|
||||||
- 또는 인증이 풀려 전송 불가
|
|
||||||
|
|
||||||
표현:
|
|
||||||
- 입력 근처에 즉시 보이는 경고 문구
|
|
||||||
- 예: `로그인이 풀려서 지금은 전송할 수 없어. 다시 로그인해.`
|
|
||||||
- 전송 버튼 disabled만 두고 끝내지 않는다
|
|
||||||
|
|
||||||
### 전송 실패
|
|
||||||
조건:
|
|
||||||
- `/api/sisters/:name/chat` 실패
|
|
||||||
|
|
||||||
표현:
|
|
||||||
- 타임라인 내 실패 메시지 유지
|
|
||||||
- composer 근처에 `다시 시도` 또는 실패 이유 보조 문구
|
|
||||||
- 실패와 empty를 같은 문구로 합치지 않는다
|
|
||||||
|
|
||||||
### runtime 확인 중
|
|
||||||
조건:
|
|
||||||
- runtime snapshot 미수신 또는 gateway 미연결
|
|
||||||
|
|
||||||
표현:
|
|
||||||
- header 배지 또는 상태 줄에 표시
|
|
||||||
- 메시지 전송 가능 여부와 별개인지 함께 설명
|
|
||||||
|
|
||||||
## 메시지 규칙
|
|
||||||
- `user`: 우측 또는 구분되는 배경
|
|
||||||
- `assistant`: 기본 응답 버블
|
|
||||||
- `tool`: mono 스타일과 별도 톤 유지
|
|
||||||
- timestamp는 보조 정보로만 노출
|
|
||||||
- 모바일에서 버블 폭이 지나치게 좁아 읽기 어렵지 않게 한다
|
|
||||||
|
|
||||||
## mobile에서 숨기면 안 되는 정보
|
|
||||||
- active sister
|
|
||||||
- runtime/source 상태
|
|
||||||
- current task 또는 active session 중 하나
|
|
||||||
- JWT 없음 / 전송 실패 이유
|
|
||||||
|
|
||||||
## desktop / tablet 유지 규칙
|
|
||||||
### desktop (`1280px+`)
|
|
||||||
- 현재 3열 느낌을 유지해도 돼
|
|
||||||
- 다만 source/runtime 라벨과 상태 문구는 모바일 기준과 통일해
|
|
||||||
|
|
||||||
### tablet (`768px`)
|
|
||||||
- 좌측 자매 전환 + 중앙 타임라인 구조 유지 가능
|
|
||||||
- 우측 보조 패널이 사라져도 핵심 상태는 상단에서 읽혀야 해
|
|
||||||
|
|
||||||
## QA 체크 포인트
|
|
||||||
- `360px`, `390px`에서 탭, 타임라인, 입력창이 겹치지 않는지
|
|
||||||
- 입력창이 키보드 노출 시 잘리지 않는지
|
|
||||||
- `JWT 없음` 상태가 버튼 disabled 외에 문구로도 보이는지
|
|
||||||
- `empty`, `runtime 확인 중`, `전송 실패`가 서로 다른 문구로 보이는지
|
|
||||||
- `user / assistant / tool` 구분이 모바일에서도 유지되는지
|
|
||||||
- source badge와 runtime badge가 다른 의미로 명확히 읽히는지
|
|
||||||
@@ -1,172 +0,0 @@
|
|||||||
# `/office` UI 기준 — SPRINT-018 live operations workspace
|
|
||||||
|
|
||||||
## 문서 목적
|
|
||||||
`/office`를 4개 긴 박스 조합이 아니라 **group mental model 중심 live operations workspace**로 다시 잠그는 문서야. SPRINT-017의 mobile-first IA를 유지하되, 이번 Sprint에서는 `working`, `source`, `freshness`, `default context` 의미를 더 엄격하게 정의한다.
|
|
||||||
|
|
||||||
## 참고 문서
|
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
|
||||||
- Sprint: `.plans/sprints/SPRINT-018.md`
|
|
||||||
- API 설계: `.plans/design/api-design.md`
|
|
||||||
- 관련 chat 문서: `.plans/design/ui/office-chat-design.md`
|
|
||||||
|
|
||||||
## 기준 구현 파일
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ContextPanel.tsx`
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
|
|
||||||
## 페이지 역할
|
|
||||||
`/office`는 executive summary가 아니라 **바로 개입하는 운영 화면**이야.
|
|
||||||
|
|
||||||
핵심 질문:
|
|
||||||
1. 누가 연결돼 있나
|
|
||||||
2. 누가 실제로 working 중인가
|
|
||||||
3. 어떤 group이 막혀 있나
|
|
||||||
4. 지금 어디에 말 걸면 되나
|
|
||||||
|
|
||||||
## 정보 구조 원칙
|
|
||||||
1. **group mental model 유지**
|
|
||||||
- 자매를 개별 카드 나열로만 보지 않고 `planning / delivery / review / deploy` group 흐름으로 묶는다
|
|
||||||
2. **scene은 운영 지도여야 함**
|
|
||||||
- 데스크톱 scene은 decorative office가 아니라 group 상태와 선택을 보여주는 요약 지도여야 한다
|
|
||||||
3. **빈 context 금지**
|
|
||||||
- 첫 진입 시 `선택하세요` 대신 기본 운영 summary를 보여준다
|
|
||||||
4. **truthful status**
|
|
||||||
- `connected idle`, `active working`, `snapshot only`, `fallback`, `offline`을 구분한다
|
|
||||||
5. **mobile overflow 금지**
|
|
||||||
- `360px`, `390px` 기준 긴 badge, 긴 detail, 긴 source 문구는 wrap되고 horizontal scroll이 없어야 한다
|
|
||||||
|
|
||||||
## source / status 라벨
|
|
||||||
| 라벨 | 의미 | 금지 |
|
|
||||||
|---|---|---|
|
|
||||||
| `live` | runtime 또는 ws 기반 최신 상태 | snapshot과 같은 톤으로 보이게 하기 |
|
|
||||||
| `snapshot` | polling 기준 마지막 스냅샷 | live처럼 pulse 주기 |
|
|
||||||
| `fallback` | 보정 데이터 | working으로 읽히는 색 주기 |
|
|
||||||
| `connected idle` | 연결됨, 최근 작업 없음 | working 색 재사용 |
|
|
||||||
| `active working` | 명시적 작업 중 | 단순 task string 존재만으로 확정하기 |
|
|
||||||
| `offline` | 연결 불가 | stale snapshot과 같은 카드 처리 |
|
|
||||||
|
|
||||||
## desktop IA (`1280px+`)
|
|
||||||
### 레이아웃
|
|
||||||
`summary rail + group scene + context rail + bottom detail panels`
|
|
||||||
|
|
||||||
### 1. summary rail
|
|
||||||
- 현재 focus
|
|
||||||
- connection summary
|
|
||||||
- active working count
|
|
||||||
- source/freshness badges
|
|
||||||
|
|
||||||
### 2. group scene
|
|
||||||
기존 4개 긴 박스 분해형 대신 아래 group block을 scene 안에 배치한다.
|
|
||||||
- Planning group: 하랑이 + planner/prd-writer
|
|
||||||
- Delivery group: 나랑이 + implementation subagents
|
|
||||||
- Review group: 다랑이 + reviewer/qa/security
|
|
||||||
- Deploy group: 이랑이 + infra/deploy agents
|
|
||||||
|
|
||||||
각 group 최소 정보:
|
|
||||||
- group label
|
|
||||||
- connected count / working count
|
|
||||||
- primary blocker 또는 `all clear`
|
|
||||||
- 대표 source badge
|
|
||||||
|
|
||||||
### 3. context rail
|
|
||||||
선택 상태와 무관하게 기본 summary가 먼저 보인다.
|
|
||||||
|
|
||||||
기본 summary 우선순위:
|
|
||||||
1. current focus
|
|
||||||
2. current blocker
|
|
||||||
3. active working group
|
|
||||||
4. quick actions
|
|
||||||
|
|
||||||
선택 후 context는 아래로 바뀐다.
|
|
||||||
- selected sister summary
|
|
||||||
- recent session / task evidence
|
|
||||||
- why this looks active
|
|
||||||
- open chat CTA
|
|
||||||
|
|
||||||
### 4. bottom detail panels
|
|
||||||
순서:
|
|
||||||
1. chat
|
|
||||||
2. pipeline
|
|
||||||
3. server health
|
|
||||||
|
|
||||||
패널 역할:
|
|
||||||
- chat: intervention
|
|
||||||
- pipeline: delivery flow evidence
|
|
||||||
- health: infra/runtime evidence
|
|
||||||
|
|
||||||
## mobile IA (`<768`)
|
|
||||||
### 고정 순서
|
|
||||||
`summary → group blocks → detail flow`
|
|
||||||
|
|
||||||
### 1. summary
|
|
||||||
첫 viewport 안에 아래가 모두 들어와야 한다.
|
|
||||||
- current focus
|
|
||||||
- connection summary
|
|
||||||
- active working summary
|
|
||||||
- quick action
|
|
||||||
|
|
||||||
### 2. group blocks
|
|
||||||
- 4자매 individual card보다 group block 우선
|
|
||||||
- 각 block 안에서 대표 sister와 상태를 요약
|
|
||||||
- 선택 시 inline expand 또는 accordion으로 detail 표시
|
|
||||||
|
|
||||||
### 3. detail flow
|
|
||||||
모바일에서는 `800x460` scene 축소판을 사용하지 않는다.
|
|
||||||
세부 흐름 순서:
|
|
||||||
1. chat
|
|
||||||
2. pipeline
|
|
||||||
3. health
|
|
||||||
4. context detail
|
|
||||||
|
|
||||||
## default context 규칙
|
|
||||||
선택 전 기본 카드 예시:
|
|
||||||
- `현재 focus`: active task / no active focus
|
|
||||||
- `현재 가장 바쁜 그룹`: delivery / review / none
|
|
||||||
- `개입 권장`: direct chat target 또는 `no direct target`
|
|
||||||
- `data note`: live/snapshot/fallback 구분
|
|
||||||
|
|
||||||
## ChatWorkspace 반영 규칙
|
|
||||||
- JWT 없음, runtime 확인 중, empty, error, send disabled reason을 상단 또는 입력부 근처에 즉시 노출
|
|
||||||
- chat이 열리지 않은 기본 상태에서도 요약 CTA는 보여야 한다
|
|
||||||
- mobile에서 고정 높이 중심 설계 금지
|
|
||||||
|
|
||||||
## PipelinePanel 반영 규칙
|
|
||||||
- 가로 카드열 금지
|
|
||||||
- 세로 단계 흐름 또는 responsive stack 사용
|
|
||||||
- `focus`, `review loop`, `deploy state`, `source/freshness`를 상단 요약으로 먼저 보여준다
|
|
||||||
|
|
||||||
## ServerHealthPanel 반영 규칙
|
|
||||||
- 상단에는 health summary만 먼저 노출
|
|
||||||
- 긴 detail/source 문구는 wrap되어야 한다
|
|
||||||
- `connected idle`, `snapshot only`, `fallback`, `offline`을 다른 상태로 읽히게 한다
|
|
||||||
|
|
||||||
## 상태 표현 규칙
|
|
||||||
| 상태 | 문구 예시 |
|
|
||||||
|---|---|
|
|
||||||
| loading | `데이터 확인 중` |
|
|
||||||
| empty | `표시할 운영 항목 없음` |
|
|
||||||
| error | `가져오지 못함` |
|
|
||||||
| stale | `마지막 확인값 표시 중` |
|
|
||||||
| jwt_missing | `JWT 없음, 전송 불가` |
|
|
||||||
|
|
||||||
`empty`와 `error`는 절대 같은 문구를 쓰지 않는다.
|
|
||||||
|
|
||||||
## 360 / 390 responsive rules
|
|
||||||
- 카드 title, badge, meta는 2줄까지 wrap 허용
|
|
||||||
- source label은 short token 우선 (`live`, `snapshot`, `fallback`)
|
|
||||||
- `generated 10:31:02` 같은 긴 freshness 문구는 한 줄 고정 금지
|
|
||||||
- 전체 페이지와 하위 패널에서 horizontal scroll 금지
|
|
||||||
|
|
||||||
## acceptance
|
|
||||||
- `/office` desktop이 4개 긴 박스 분해형이 아니라 group/scene 중심으로 재구성된다
|
|
||||||
- mobile에서 scene 축소판이 사라지고 `summary → group blocks → detail flow`가 된다
|
|
||||||
- 첫 진입 시 빈 context가 아니라 기본 운영 summary가 보인다
|
|
||||||
- selected / unselected 상태 모두 `360px`, `390px`에서 overflow 없이 읽힌다
|
|
||||||
- `working`은 source-of-truth 기준으로만 강조된다
|
|
||||||
|
|
||||||
## rollout note
|
|
||||||
- SPRINT-017의 모바일 정보 순서는 유지한다
|
|
||||||
- 이번 Sprint에서 바꾸는 건 scene semantics, default context, truthful state labels다
|
|
||||||
@@ -1,121 +1,97 @@
|
|||||||
# `/org` UI 기준 — SPRINT-018 company org map
|
# 조직도 (`/org`) — 디자인 v2
|
||||||
|
|
||||||
## 문서 목적
|
> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #6
|
||||||
`/org`를 자매 트리 데모가 아니라 **회사형 조직도 + independent agents map**으로 전면 재설계한다. 이번 문서는 하드코딩된 root tree 대신, 실제 데이터 계약으로 렌더링 가능한 org 화면 기준을 잠근다.
|
|
||||||
|
|
||||||
## 참고 문서
|
## 레이아웃
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
|
||||||
- Sprint: `.plans/sprints/SPRINT-018.md`
|
|
||||||
- API 설계: `.plans/design/api-design.md`
|
|
||||||
|
|
||||||
## 기준 구현 파일
|
```
|
||||||
- `frontend/app/org/page.tsx`
|
┌─────┬──────────────────────────────────────────────────────┐
|
||||||
- `backend/src/sisters/sister-detail.service.ts`
|
│ 64px│ SYS_TYPE: CORE_ROOT_01 2023.10.27_14:42 │
|
||||||
|
│ │ ────────────────────────────────────────────────── │
|
||||||
|
│ │ │
|
||||||
|
│ DASH│ ┌─────────────────┐ │
|
||||||
|
│ PROJ│ │ [HQ] 하나랑 글로벌 │ │
|
||||||
|
│◗ORG │ │ MEM:142 S_ADMIN │ │
|
||||||
|
│ CONF│ └────────┬────────┘ │
|
||||||
|
│ │ ┌───────────┼───────────┐ │
|
||||||
|
│ │ ┌──────┴──────┐ ┌─┴────┐ ┌───┴───┐ │
|
||||||
|
│ │ │[R&D] 기술연구│ │[OPS] │ │[EXT] │ │
|
||||||
|
│ │ │ MEM:48 LEAD │ │운영팀 │ │외부협력│ │
|
||||||
|
│ │ └──────┬──────┘ └──┬───┘ └───┬───┘ │
|
||||||
|
│ │ ┌─────┼─────┐ │ │ │
|
||||||
|
│ │ ┌──┴──┐ ┌┴─────┐ ┌──┴───┐ ┌───┴────┐ │
|
||||||
|
│ │ │Core │ │Infra │ │Monitor│ │Security│ │
|
||||||
|
│ │ │Eng. │ │struct│ │ing │ │Audit │ │
|
||||||
|
│ │ └─────┘ └──────┘ └──────┘ └────────┘ │
|
||||||
|
│ │ │
|
||||||
|
│ │ TOTAL_NODES: 07 STATUS: SYNC_COMPLETE │
|
||||||
|
└─────┴──────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
## 현재 문제
|
## 사이드바 (조직도 전용)
|
||||||
- 현재 화면은 하랑이 root 고정형 terminal tree다
|
- **64px 너비** (다른 페이지의 240px과 다름)
|
||||||
- 자매 외 조직 단위가 없다
|
- 세로 텍스트: `writing-mode: vertical-rl`
|
||||||
- independent agents가 표현되지 않는다
|
- 아이콘 모드: DASH / PROJ / ORG_TREE / CONF
|
||||||
- mobile에서는 tree 한 벌이 사실상 읽기 어렵다
|
- 로고: 세로 배치 (circle-full 위, circle-half 아래)
|
||||||
- source / freshness / status가 다른 페이지와 같은 의미로 보이지 않는다
|
|
||||||
|
|
||||||
## 페이지 역할
|
## 메인 뷰포트
|
||||||
핵심 질문:
|
- 배경: dot grid pattern — `radial-gradient(circle, #1a1a1a 1px, transparent 1px)` / 30px 30px
|
||||||
1. 회사 조직 단위는 어떻게 나뉘어 있나
|
- `overflow: auto` (스크롤 가능)
|
||||||
2. 각 unit lead와 member는 누구인가
|
- padding: 40px, 중앙 정렬
|
||||||
3. independent agents는 어느 영역에 속하지 않는가
|
|
||||||
4. 현재 status / source / freshness는 무엇인가
|
|
||||||
|
|
||||||
## 정보 구조
|
## 헤더
|
||||||
### 1. org summary header
|
- 좌: `SYS_TYPE: CORE_ROOT_01` (mono, 값은 흰색)
|
||||||
- org generated time
|
- 우: `TIMESTAMP: 2023.10.27_14:42` (mono secondary)
|
||||||
- source badge
|
- border-bottom 1px
|
||||||
- total units
|
|
||||||
- total members
|
|
||||||
- independent agents count
|
|
||||||
|
|
||||||
### 2. HQ section
|
## 트리 구조
|
||||||
- HQ card
|
|
||||||
- lead
|
|
||||||
- 핵심 responsibility
|
|
||||||
- direct reports summary
|
|
||||||
|
|
||||||
### 3. functional teams
|
### Terminal Card
|
||||||
예시:
|
- 200px 너비, padding 12px
|
||||||
- Planning / Program
|
- `border: 1px solid var(--border-color)`
|
||||||
- Delivery
|
- **border-left: 3px solid** (레벨별 색상)
|
||||||
- QA / Review
|
- high (`#f43f5e`): HQ
|
||||||
- Infra / Deploy
|
- mid (`#3b82f6`): R&D, Core Engine, Infrastructure
|
||||||
|
- low (`#10b981`): OPS, EXT, Monitoring, Security Audit
|
||||||
|
- `box-shadow: 0 10px 30px rgba(0,0,0,0.5)`
|
||||||
|
- node-label: mono 13px 600
|
||||||
|
- 접두사 span: `[HQ]` `[R&D]` `[OPS]` `[EXT]` — secondary 11px
|
||||||
|
- badge-row: flex wrap, gap 6px
|
||||||
|
- badge: mono 9px, `#1a1a1a` bg, border 1px `#262626`
|
||||||
|
- `MEM: 142` (값은 primary)
|
||||||
|
- `S_ADMIN`, `LEAD`, `MGR`, `GUEST` 등
|
||||||
|
- `LV_09`, `LV_07` 등
|
||||||
|
|
||||||
각 team card 최소 정보:
|
### 접기/펼치기 토글
|
||||||
- team name
|
- `−` / `+` 아이콘, 16x16px
|
||||||
- lead
|
- 카드 하단 중앙 absolute 배치
|
||||||
- member chips
|
- bg: card bg, border 1px
|
||||||
- active status summary
|
|
||||||
- source/freshness
|
|
||||||
|
|
||||||
### 4. independent agents
|
### 연결선
|
||||||
조직도 하단 또는 병렬 rail에 별도 배치한다.
|
- 세로선: `width: 1px; background: var(--border-color)`
|
||||||
|
- 가로선 (형제 연결): children `::before` — 상단 -40px
|
||||||
|
|
||||||
각 항목 최소 정보:
|
### 트리 구조
|
||||||
- name
|
```
|
||||||
- type (`independent` / `sister-owned`)
|
하나랑 글로벌 (HQ, high)
|
||||||
- owner sister 또는 `none`
|
├── 기술연구소 (R&D, mid)
|
||||||
- role / purpose
|
│ ├── Core Engine (mid)
|
||||||
- status / source / freshness
|
│ └── Infrastructure (mid)
|
||||||
|
├── 운영지원팀 (OPS, low)
|
||||||
|
│ └── Monitoring (low)
|
||||||
|
└── 외부 협력사 (EXT, low)
|
||||||
|
└── Security Audit (low)
|
||||||
|
```
|
||||||
|
|
||||||
### 5. reporting lines
|
## 푸터
|
||||||
desktop에서는 라인/connector를 써도 되지만, line이 없어도 hierarchy를 읽을 수 있어야 한다. mobile은 connector보다 section order와 labels를 우선한다.
|
- `margin-top: auto; border-top: 1px solid`
|
||||||
|
- 좌: `TOTAL_NODES: 07`
|
||||||
|
- 우: `STATUS: SYNC_COMPLETE`
|
||||||
|
- mono 10px secondary
|
||||||
|
|
||||||
## data contract rules
|
## 모바일 반응형
|
||||||
- `orgUnits`, `members`, `reportingLines`, `independentAgents`로 렌더링 가능해야 한다
|
- 사이드바: 하단 탭바로 전환
|
||||||
- hard-coded `harang -> narang/darang/erang` 구조 금지
|
- 트리: 수평 스크롤 컨테이너 + 핀치 줌
|
||||||
- member status는 다른 페이지와 같은 vocabulary를 사용한다
|
- terminal-card: 너비 160px으로 축소
|
||||||
- `active working`
|
- badge 폰트: 8px
|
||||||
- `connected idle`
|
- dot grid: 20px 간격으로 축소
|
||||||
- `snapshot only`
|
|
||||||
- `fallback`
|
|
||||||
- `offline`
|
|
||||||
|
|
||||||
## layout rules
|
|
||||||
### desktop (`1280px+`)
|
|
||||||
- `summary header`
|
|
||||||
- `HQ + top org units`
|
|
||||||
- `functional teams grid`
|
|
||||||
- `independent agents rail`
|
|
||||||
- optional reporting lines overlay
|
|
||||||
|
|
||||||
### tablet (`768px`)
|
|
||||||
- 2열 card grid 허용
|
|
||||||
- connector 최소화
|
|
||||||
|
|
||||||
### mobile (`360px`, `390px`)
|
|
||||||
- section stack
|
|
||||||
- team card 내부 member chips wrap
|
|
||||||
- independent agents 별도 section 유지
|
|
||||||
- horizontal scroll 금지
|
|
||||||
|
|
||||||
## copy rules
|
|
||||||
- `TOTAL_NODES` 같은 데모형 문구보다 실제 조직 label 사용
|
|
||||||
- `SYNC_COMPLETE` 같은 과장 표현 금지
|
|
||||||
- source와 freshness를 분리해서 표기
|
|
||||||
- 없는 조직 단위는 억지 생성하지 않는다
|
|
||||||
|
|
||||||
## empty states
|
|
||||||
| 상태 | 표현 |
|
|
||||||
|---|---|
|
|
||||||
| no org data | `ORG DATA 없음` |
|
|
||||||
| no independent agents | `INDEPENDENT AGENTS 없음` |
|
|
||||||
| no lead | `LEAD 미정` |
|
|
||||||
| fallback only | `FALLBACK ORG SNAPSHOT` |
|
|
||||||
|
|
||||||
## acceptance
|
|
||||||
- `/api/org` 계약만으로 회사형 조직도를 렌더링할 수 있다
|
|
||||||
- independent agents와 sister-owned agents를 분리해서 표현할 수 있다
|
|
||||||
- 특정 자매 top 고정 하드코딩 없이 렌더링 가능하다
|
|
||||||
- org 화면에서도 `status / source / freshness` 의미를 재사용한다
|
|
||||||
- `360px`, `390px` 기준 핵심 요약과 카드가 overflow 없이 읽힌다
|
|
||||||
|
|
||||||
## rollout note
|
|
||||||
- 첫 구현은 connector보다 card semantics를 우선한다
|
|
||||||
- terminal tree 미감은 보조 요소로만 남기고, hierarchy readability를 우선한다
|
|
||||||
|
|||||||
@@ -1,129 +1,43 @@
|
|||||||
# `/projects/[id]` UI 기준 — SPRINT-018 delivery detail
|
# 프로젝트 상세 (`/projects/[id]`) — Sprint 014 리뉴얼
|
||||||
|
|
||||||
## 문서 목적
|
## 목적
|
||||||
프로젝트 상세는 delivery flow를 읽는 화면이지, unique assignee 목록을 현재 참여자처럼 보여주는 화면이 아니야. 이번 Sprint에서는 `participants`, `current owners`, `task assignees`를 truthfully 분리한다.
|
프로젝트 상세는 Sprint 이력만 보여주는 화면이 아니라, 계획 → 구현 → QA → 배포 흐름이 실제로 어디까지 왔는지 판단하는 운영 화면이어야 해.
|
||||||
|
|
||||||
## 참고 문서
|
## 상단 헤더
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
- breadcrumb 유지
|
||||||
- Sprint: `.plans/sprints/SPRINT-018.md`
|
- 제목 우측 메타:
|
||||||
- API 설계: `.plans/design/api-design.md`
|
- project status
|
||||||
|
|
||||||
## 기준 구현 파일
|
|
||||||
- `frontend/app/projects/[id]/page.tsx`
|
|
||||||
- `backend/src/projects/*`
|
|
||||||
|
|
||||||
## 현재 문제
|
|
||||||
- `ASSIGNED NODES`가 실제 participant와 task assignee를 섞어 읽히게 한다
|
|
||||||
- 나랑이 단독 노출이 실제 active participant 확정처럼 보일 수 있다
|
|
||||||
- 상단 overview, QA, deploy, flow, participant 시선 흐름이 답답하다
|
|
||||||
- mobile `360px`, `390px`에서 flow/meta/git row가 쉽게 넘친다
|
|
||||||
|
|
||||||
## 페이지 역할
|
|
||||||
핵심 질문:
|
|
||||||
1. 이 프로젝트는 delivery flow 어디에 있나
|
|
||||||
2. QA와 deploy 준비 상태는 어떤가
|
|
||||||
3. 지금 왜 이 사람이 participant로 보이나
|
|
||||||
4. task assignee 집계와 current owner는 누구인가
|
|
||||||
|
|
||||||
## 정보 구조
|
|
||||||
### 상단 overview
|
|
||||||
- project title
|
|
||||||
- phase
|
|
||||||
- current sprint
|
- current sprint
|
||||||
- deploy status
|
- latest deploy state (`MAIN DEPLOYED` / `READY FOR REDEPLOY` 등)
|
||||||
- repo link
|
- repo 링크 유지
|
||||||
|
|
||||||
### 본문 1열 우선 순서
|
## 본문 구조
|
||||||
1. delivery overview
|
### 좌측 메인
|
||||||
2. QA status
|
1. `DELIVERY FLOW`
|
||||||
3. deploy status
|
- Planning
|
||||||
4. participants / current owners
|
- Implement
|
||||||
5. sprint ledger
|
- QA
|
||||||
6. hotfix history
|
- Merge to Main
|
||||||
7. git tabs
|
- Redeploy
|
||||||
|
2. `SPRINT LEDGER`
|
||||||
|
- Sprint 번호 / 이름 / 진행률 / task 수 / 완료 수
|
||||||
|
3. `HOTFIX HISTORY`
|
||||||
|
- Hotfix 번호 / 한 줄 요약 / 반영 상태
|
||||||
|
|
||||||
desktop에서는 2열 배치를 허용하지만, participant 의미가 사이드카드 하나로 축소되면 안 된다.
|
### 우측 보조
|
||||||
|
1. `QA STATUS`
|
||||||
|
- latest passed/failed
|
||||||
|
- blocker 수
|
||||||
|
- latest QA 문서 식별자
|
||||||
|
2. `DEPLOY STATUS`
|
||||||
|
- 현재 배포 기준 브랜치 (`main` 고정)
|
||||||
|
- last deploy time
|
||||||
|
- redeploy pending 여부
|
||||||
|
3. `ASSIGNED NODES`
|
||||||
|
- 하랑/나랑/다랑/이랑 각 역할 표기
|
||||||
|
|
||||||
## participant model
|
## UX 규칙
|
||||||
### section naming
|
- Sprint와 Hotfix는 분리해서 보여주되, 흐름상 연결감은 유지
|
||||||
- `CURRENT OWNERS`
|
- "보정/수정 이력" 같은 모호한 문구 대신 실제 요약 노출
|
||||||
- `PARTICIPANTS`
|
- 모바일에서는 `DELIVERY FLOW → QA STATUS → DEPLOY STATUS → SPRINT/HOTFIX` 순으로 재배치
|
||||||
- `TASK ASSIGNEES`
|
- `NodeDot`는 실제 상태 기반으로 색이 바뀌어야 하며, 무조건 초록 고정이면 안 돼
|
||||||
|
|
||||||
`ASSIGNED NODES`는 사용하지 않는다.
|
|
||||||
|
|
||||||
### participant item 필수 정보
|
|
||||||
- name
|
|
||||||
- role label
|
|
||||||
- why-visible badge
|
|
||||||
- source badge
|
|
||||||
- freshness or last-active label
|
|
||||||
|
|
||||||
예시 why-visible:
|
|
||||||
- `owner`
|
|
||||||
- `current_implementer`
|
|
||||||
- `reviewer`
|
|
||||||
- `deploy_owner`
|
|
||||||
- `task_assignee`
|
|
||||||
- `latest_qa_author`
|
|
||||||
|
|
||||||
### current owner 규칙
|
|
||||||
- 확정 owner가 없으면 `NO ACTIVE OWNER`
|
|
||||||
- fallback sister를 owner로 주입하지 않음
|
|
||||||
|
|
||||||
### participant 규칙
|
|
||||||
- why-visible 없는 participant 금지
|
|
||||||
- participant가 0명이면 empty state 허용
|
|
||||||
- assignee aggregate는 participant와 별도 목록 또는 metric으로 노출
|
|
||||||
|
|
||||||
## layout rules
|
|
||||||
### delivery flow
|
|
||||||
- stage 5개를 유지해도 mobile에서는 1열 stack 사용
|
|
||||||
- active stage만 강조
|
|
||||||
- 긴 상태 키는 wrap 허용
|
|
||||||
|
|
||||||
### QA status
|
|
||||||
- latest QA label
|
|
||||||
- pass/fail/unknown
|
|
||||||
- blocker count
|
|
||||||
- short summary
|
|
||||||
- source: `doc-derived` 또는 `snapshot`
|
|
||||||
|
|
||||||
### deploy status
|
|
||||||
- branch
|
|
||||||
- deploy state
|
|
||||||
- latest deploy time
|
|
||||||
- redeploy required
|
|
||||||
|
|
||||||
### participants area
|
|
||||||
우선순위:
|
|
||||||
1. current owners
|
|
||||||
2. active participants
|
|
||||||
3. task assignee aggregate
|
|
||||||
|
|
||||||
참여자 카드에는 `reason/source`가 보여야 하고, 단순 live dot만으로 참여 확정처럼 보이면 안 된다.
|
|
||||||
|
|
||||||
## empty / null states
|
|
||||||
| 상태 | 표현 |
|
|
||||||
|---|---|
|
|
||||||
| no current owner | `NO ACTIVE OWNER` |
|
|
||||||
| no active participant | `NO CONFIRMED ACTIVE PARTICIPANT` |
|
|
||||||
| no task assignee | `NO TASK ASSIGNEE DATA` |
|
|
||||||
| no QA | `QA DOC 없음` |
|
|
||||||
|
|
||||||
## mobile 360 / 390 rules
|
|
||||||
- flow card는 1열 stack
|
|
||||||
- label/meta/git row는 wrap 허용
|
|
||||||
- participant badge row는 wrap 필수
|
|
||||||
- name, role, reason, source가 같은 줄 고정폭으로 잘리지 않게 한다
|
|
||||||
- horizontal scroll 금지
|
|
||||||
|
|
||||||
## acceptance
|
|
||||||
- `ASSIGNED NODES`가 truthful section 이름으로 교체된다
|
|
||||||
- participant, current owner, task assignee가 다른 데이터 의미로 분리된다
|
|
||||||
- 나랑이만 보여도 reason/source badge가 함께 붙어 확정 참여처럼 읽히지 않는다
|
|
||||||
- `360px`, `390px`에서 flow card, meta, git row가 넘치지 않는다
|
|
||||||
|
|
||||||
## rollout note
|
|
||||||
- participant summary는 backend contract를 먼저 나누고 렌더링을 맞춘다
|
|
||||||
- 기존 `allTasks.assignee` unique set은 `TASK ASSIGNEES` 섹션으로만 후퇴시킨다
|
|
||||||
|
|||||||
35
.plans/hotfix/HOTFIX-007-NARANG-HANDOFF.md
Normal file
35
.plans/hotfix/HOTFIX-007-NARANG-HANDOFF.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# HOTFIX-007 Narang Handoff
|
||||||
|
|
||||||
|
## repo / branch
|
||||||
|
- repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
|
||||||
|
- branch: `feature/hotfix-007-projects-sisters-surface-fixes`
|
||||||
|
|
||||||
|
## 읽을 문서
|
||||||
|
1. `.plans/hotfix/HOTFIX-007.md`
|
||||||
|
2. `.plans/design/ui/projects-page-design.md`
|
||||||
|
3. `.plans/design/ui/project-detail-design.md`
|
||||||
|
4. 필요하면 `.plans/sprints/SPRINT-014.md`
|
||||||
|
|
||||||
|
## 이번 수정 핵심
|
||||||
|
자기야가 바로 짚은 실제 사용감 문제를 고쳐.
|
||||||
|
|
||||||
|
- `/projects`에 `전체 | public | private` 필터 추가
|
||||||
|
- 프로젝트 상세 진행 상황 박스 배치 보정
|
||||||
|
- `ASSIGNED NODES`를 4자매 기준으로 복구
|
||||||
|
- `.plans/qa`, `.plans/hotfix`, 구 구조 fallback 다시 점검
|
||||||
|
- 메인 우측 나랑이 단독 박스 제거 또는 실제 operator 기준으로 교체
|
||||||
|
- `/sisters/[name]` 개요 / 세션 / 활동 / 로그 복구
|
||||||
|
|
||||||
|
## 절대 기준
|
||||||
|
- 보여주기용 고정값 넣지 마
|
||||||
|
- 문서 구조가 바뀌었으면 새 구조 우선 + 구 구조 fallback 유지
|
||||||
|
- 자매 상세에서 데이터 없음과 조회 실패를 섞지 마
|
||||||
|
- `ASSIGNED NODES`가 다시 나랑이 하나처럼 보이면 실패야
|
||||||
|
- 메인 우측 박스는 더 이상 단일 프로필 카드처럼 보이면 안 돼
|
||||||
|
|
||||||
|
## QA 전 필수
|
||||||
|
- `frontend npm run build`
|
||||||
|
- `backend npm run lint`
|
||||||
|
- `backend npm test -- --runInBand`
|
||||||
|
- `backend npm run build`
|
||||||
|
- 실브라우저 기준 `/`, `/projects`, `/projects/[id]`, `/sisters/[name]` 확인 포인트 정리
|
||||||
137
.plans/hotfix/HOTFIX-007.md
Normal file
137
.plans/hotfix/HOTFIX-007.md
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
# HOTFIX-007: 프로젝트/자매 상세/메인 운영면 보정
|
||||||
|
|
||||||
|
## 목표
|
||||||
|
자기야가 바로 짚은 실제 사용감 문제를 한 번에 정리한다.
|
||||||
|
|
||||||
|
- 프로젝트 목록에 `전체 | public | private` 필터 추가
|
||||||
|
- 프로젝트 상세 진행 상황 박스 배치 보정
|
||||||
|
- `ASSIGNED NODES` / 에이전트 노드 구성이 `나랑이만 있는 것처럼` 보이는 문제 수정
|
||||||
|
- 바뀐 파일 구조 기준으로 QA / Hotfix 문서 탐색 경로 재점검
|
||||||
|
- 메인 대시보드 우측 오퍼레이터 박스 정리 (`나랑이 사진만 보이는 박스` 제거 또는 실제 operator 기준 반영)
|
||||||
|
- 자매 상세의 `개요 / 세션 / 활동 / 로그`가 비거나 조회되지 않는 문제 복구
|
||||||
|
|
||||||
|
## 왜 이걸 고치나
|
||||||
|
지금 상태는 일부 화면이 기능은 있지만 운영 판단에는 어색하거나, 아예 실데이터가 안 뜨는 구간이 있어.
|
||||||
|
|
||||||
|
특히 이건 실제 사용성 문제야.
|
||||||
|
1. `/projects`에서 프로젝트 구분 필터가 부족함
|
||||||
|
2. `/projects/[id]` 진행 현황 박스 배치가 어색함
|
||||||
|
3. `ASSIGNED NODES`가 실제 4자매 구조를 못 보여줌
|
||||||
|
4. `.plans/qa`, `.plans/hotfix` 구조 변경 이후 문서 탐색 누락 가능성이 남아 있음
|
||||||
|
5. 메인 우측 operator 영역이 지금은 나랑이 사진만 보이는 식으로 오해를 줌
|
||||||
|
6. `/sisters/[name]`의 overview / sessions / activity / logs가 비면 대시보드 핵심 기능이 무너짐
|
||||||
|
|
||||||
|
## 범위
|
||||||
|
- 프로젝트 목록 페이지
|
||||||
|
- 프로젝트 상세 페이지
|
||||||
|
- 메인 대시보드 우측 operator 영역
|
||||||
|
- backend project detail / dashboard / sisters / logs / sessions 관련 서비스
|
||||||
|
- 문서 탐색 fallback (`.plans/qa`, `.plans/hotfix`, 구 구조 fallback) 재검증
|
||||||
|
|
||||||
|
## 태스크
|
||||||
|
|
||||||
|
### TASK-084: 프로젝트 목록 visibility 필터 추가
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `frontend/app/projects/page.tsx`
|
||||||
|
- 필요 시 `backend/src/projects/projects.service.ts`
|
||||||
|
- **설명:** `/projects` 상단에 `전체 | public | private` 필터를 추가한다.
|
||||||
|
- **구현 메모:**
|
||||||
|
- 현재 데이터 모델에 public/private 구분 필드가 있으면 그걸 그대로 사용
|
||||||
|
- 없으면 우선 source-of-truth 확인 후 안전한 derived rule을 쓰되, 임시 추론이면 문서에 남길 것
|
||||||
|
- **완료 기준:**
|
||||||
|
- 사용자가 프로젝트 목록을 visibility 기준으로 바로 걸러 볼 수 있음
|
||||||
|
- 필터 상태가 UI에서 분명히 보임
|
||||||
|
|
||||||
|
### TASK-085: 프로젝트 상세 진행 현황 박스 레이아웃 보정
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `frontend/app/projects/[id]/page.tsx`
|
||||||
|
- 관련 공통 컴포넌트
|
||||||
|
- **설명:** 진행 상황 / QA / Deploy / Sprint / Hotfix 박스 배치가 더 자연스럽게 읽히도록 재배치한다.
|
||||||
|
- **완료 기준:**
|
||||||
|
- 정보 블록 간 위계가 자연스러움
|
||||||
|
- 데스크톱/모바일에서 박스가 어색하게 끊기거나 밀리지 않음
|
||||||
|
- `DELIVERY FLOW → QA STATUS → DEPLOY STATUS → SPRINT/HOTFIX` 읽기 흐름이 더 선명함
|
||||||
|
|
||||||
|
### TASK-086: `ASSIGNED NODES` 4자매 기준 복구
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `backend/src/projects/projects.service.ts`
|
||||||
|
- `frontend/app/projects/[id]/page.tsx`
|
||||||
|
- 필요 시 관련 타입/DTO
|
||||||
|
- **설명:** 프로젝트 상세의 노드/에이전트 구성이 나랑이만 있는 것처럼 보이지 않게 실제 4자매 역할 기준으로 복구한다.
|
||||||
|
- **구현 메모:**
|
||||||
|
- 최소한 하랑/나랑/다랑/이랑 역할이 모두 보이게 할 것
|
||||||
|
- 실할당 데이터가 있으면 우선 사용, 없으면 역할 기반 기본 노드라도 4개가 보여야 함
|
||||||
|
- **완료 기준:**
|
||||||
|
- `ASSIGNED NODES`가 4자매 구조를 제대로 보여줌
|
||||||
|
- 단일 나랑 노드처럼 오해되지 않음
|
||||||
|
|
||||||
|
### TASK-087: QA / Hotfix 문서 탐색 경로 재점검
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `backend/src/projects/projects.service.ts`
|
||||||
|
- `backend/src/projects/sprint-sync.service.ts`
|
||||||
|
- 관련 문서 탐색 유틸
|
||||||
|
- **설명:** 파일 구조가 조금 바뀐 현재 기준으로 `.plans/qa`, `.plans/hotfix`, 구 구조 fallback이 실제로 다 읽히는지 다시 확인하고 보정한다.
|
||||||
|
- **완료 기준:**
|
||||||
|
- 새 구조 문서가 우선 반영됨
|
||||||
|
- 구 구조 fallback도 깨지지 않음
|
||||||
|
- QA / Hotfix history가 누락 없이 노출됨
|
||||||
|
|
||||||
|
### TASK-088: 메인 우측 operator 영역 정리
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `frontend/app/page.tsx`
|
||||||
|
- **설명:** 메인 우측 상자에서 나랑이 사진만 떠 있는 어색한 구성을 제거한다.
|
||||||
|
- **선택지:**
|
||||||
|
1. 박스 자체 제거
|
||||||
|
2. 실제 current operator/focus owner 기준으로 표시
|
||||||
|
3. 단일 프로필 대신 운영 메타 카드로 교체
|
||||||
|
- **완료 기준:**
|
||||||
|
- 우측 상자가 더 이상 특정 자매 단독 프로필처럼 오해되지 않음
|
||||||
|
- 메인 화면 정보 위계가 더 깔끔함
|
||||||
|
|
||||||
|
### TASK-089: 자매 상세 `개요 / 세션 / 활동 / 로그` 데이터 복구
|
||||||
|
- **담당:** 나랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **주요 파일:**
|
||||||
|
- `frontend/app/sisters/[name]/page.tsx`
|
||||||
|
- `backend/src/sisters/sister-detail.service.ts`
|
||||||
|
- `backend/src/sisters/sisters.service.ts`
|
||||||
|
- `backend/src/admin/admin.service.ts`
|
||||||
|
- 관련 controller / DTO / 경로 탐색 유틸
|
||||||
|
- **설명:** 자매 상세 페이지에서 개요/세션/활동이 비고 로그 조회가 안 되는 문제를 실제 데이터 기준으로 복구한다.
|
||||||
|
- **구현 메모:**
|
||||||
|
- Hermes 우선 + `.openclaw` fallback 경로 다시 확인
|
||||||
|
- sessions / logs 경로 변경 이후 깨진 지점 점검
|
||||||
|
- empty state와 진짜 조회 실패를 구분
|
||||||
|
- **완료 기준:**
|
||||||
|
- `/sisters/[name]`에서 overview / sessions / activity / logs가 실제 데이터로 노출됨
|
||||||
|
- 데이터가 없을 때와 조회 실패일 때 UI가 다르게 보임
|
||||||
|
|
||||||
|
### TASK-090: 실브라우저 기준 확인 포인트 정리
|
||||||
|
- **담당:** 나랑이 → 다랑이
|
||||||
|
- **상태:** pending
|
||||||
|
- **설명:** 이번 hotfix는 화면/구조/실데이터가 섞여 있으니 실브라우저 확인 포인트를 함께 남긴다.
|
||||||
|
- **완료 기준:**
|
||||||
|
- `/projects`
|
||||||
|
- `/projects/[id]`
|
||||||
|
- `/sisters/[name]`
|
||||||
|
- 메인 `/`
|
||||||
|
이 네 화면의 확인 포인트가 QA에 전달됨
|
||||||
|
|
||||||
|
## QA 핵심 체크
|
||||||
|
- `/projects`에서 `전체 | public | private` 필터 동작
|
||||||
|
- 프로젝트 상세 박스 배치 개선 확인
|
||||||
|
- `ASSIGNED NODES`가 4자매 구조로 보임
|
||||||
|
- QA / Hotfix 문서 구조 변경 이후도 history 누락 없음
|
||||||
|
- 메인 우측 상자 어색함 해소
|
||||||
|
- `/sisters/[name]` overview / sessions / activity / logs 복구
|
||||||
|
- 외부 URL + 모바일 포함 확인 필수
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
# SPRINT-016 Release Preflight
|
|
||||||
|
|
||||||
- 검증 대상 repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
|
|
||||||
- 검증 대상 branch: `main`
|
|
||||||
- 검증 대상 commit: `a9e1e677b0f129cc2f45e4f2624020d9d4626159` (`feat: merge SPRINT-016 isometric office dashboard`)
|
|
||||||
- 기준 문서:
|
|
||||||
- `.plans/sprints/SPRINT-016.md`
|
|
||||||
- `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- `.plans/design/ui/office-chat-design.md`
|
|
||||||
- `docs/product-specs/openclaw-office-dashboard-prd.md`
|
|
||||||
- `.plans/deploy/deploy-plan.md`
|
|
||||||
- 검증자: 하랑
|
|
||||||
- 검증일시: `2026-04-07 13:55 KST`
|
|
||||||
- 결과: `✅ PASSED`
|
|
||||||
- 재검증 필요 여부: `아니야. 다만 배포 직전 운영 env / WS 프록시 확인은 필요해.`
|
|
||||||
|
|
||||||
## 1. 이번 문서 보강 이유
|
|
||||||
이번 `/office` 변경분은 코드 자체 preflight는 통과했는데, 배포 직전 확인 과정에서 아래 두 가지가 배포 게이트로 걸렸어.
|
|
||||||
|
|
||||||
1. PM2 backend 실행 경로 문서가 실제 산출물과 달랐어.
|
|
||||||
2. `/office` 변경에 대한 배포 전 검증 근거 문서가 `.plans/qa/`에 없었어.
|
|
||||||
|
|
||||||
그래서 이번 문서는 **다랑이의 별도 브라우저 QA 보고서 대체가 아니라**, 현재 `main` 기준 배포 판단에 필요한 **release preflight 근거**를 남기는 용도야.
|
|
||||||
|
|
||||||
## 2. 실행 결과
|
|
||||||
- [x] `frontend npm run lint` — 성공 (`0 errors`, `20 warnings`, 전부 기존 unused-var 경고)
|
|
||||||
- [x] `frontend npm run build` — 성공
|
|
||||||
- [x] `backend npm run build` — 성공
|
|
||||||
- [x] `backend npm test -- --runInBand` — 성공 (`9 suites`, `26 tests` passed)
|
|
||||||
- [x] `backend/dist/src/main.js` 실제 산출물 존재 확인
|
|
||||||
- [x] Next build 결과에 `/office` route 포함 확인
|
|
||||||
|
|
||||||
## 3. 확인한 핵심 근거
|
|
||||||
### 배포 문서/산출물 정합성
|
|
||||||
- 기존 문서의 backend PM2 경로 `dist/main.js`는 실제 빌드 결과와 달랐어.
|
|
||||||
- 실제 Nest 진입 파일은 `backend/dist/src/main.js`였고, 배포 문서와 아키텍처 문서를 이 기준으로 수정했어.
|
|
||||||
|
|
||||||
### `/office` 변경분 상태
|
|
||||||
- 오피스 대시보드 관련 파일이 `main`에 반영돼 있어.
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ContextPanel.tsx`
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
- Next production build 산출물에서 `/office`가 정적 라우트로 생성되는 것까지 확인했어.
|
|
||||||
|
|
||||||
### 코드 preflight
|
|
||||||
- frontend는 lint/build 모두 통과했어.
|
|
||||||
- backend는 build/test 모두 통과했어.
|
|
||||||
- 현재 `main` 헤드는 `a9e1e67`로 고정 확인했어.
|
|
||||||
|
|
||||||
## 4. 배포 전 운영 체크
|
|
||||||
이건 코드 blocker는 아니고, 이랑이가 배포 직전에 확인하면 돼.
|
|
||||||
|
|
||||||
- Dev 서버 env
|
|
||||||
- `DATABASE_URL`
|
|
||||||
- `JWT_SECRET`
|
|
||||||
- `SSH_KEY_PATH`
|
|
||||||
- `GITEA_BASE_URL`
|
|
||||||
- `GITEA_TOKEN`
|
|
||||||
- `CORS_ORIGINS`
|
|
||||||
- Frontend env
|
|
||||||
- `NEXT_PUBLIC_API_URL`
|
|
||||||
- 필요 시 `NEXT_PUBLIC_WS_URL`
|
|
||||||
- Nginx websocket 프록시 또는 WS URL 설정
|
|
||||||
|
|
||||||
## 5. 최종 판정
|
|
||||||
- **배포 문서 경로 오류 수정 완료**
|
|
||||||
- **`/office` 변경분 release preflight 근거 문서화 완료**
|
|
||||||
- **현재 기준 코드/빌드/테스트 blocker 없음**
|
|
||||||
|
|
||||||
## 6. 최종 JSON
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"type": "release_preflight",
|
|
||||||
"from": "harang",
|
|
||||||
"task_id": "SPRINT-016-RELEASE-PREFLIGHT",
|
|
||||||
"repo": "https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard",
|
|
||||||
"branch": "main",
|
|
||||||
"commit": "a9e1e677b0f129cc2f45e4f2624020d9d4626159",
|
|
||||||
"passed": true,
|
|
||||||
"errors": [],
|
|
||||||
"notes": [
|
|
||||||
"PM2 backend entry corrected to backend/dist/src/main.js",
|
|
||||||
"frontend lint/build passed",
|
|
||||||
"backend build/test passed",
|
|
||||||
"office route present in production build output",
|
|
||||||
"deploy-time env and websocket proxy checks remain operational checks only"
|
|
||||||
],
|
|
||||||
"suggestion": "Safe to proceed with deploy after environment and websocket configuration checks."
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
# SPRINT-018 review-1 QA draft
|
|
||||||
|
|
||||||
## 목적
|
|
||||||
SPRINT-018의 truth contract가 `/office`, `/`, `/projects/[id]`, `/org` 전반에서 같은 의미로 보이는지 확인하는 QA 초안이야.
|
|
||||||
|
|
||||||
## 참고 문서
|
|
||||||
- `.plans/sprints/SPRINT-018.md`
|
|
||||||
- `.plans/design/api-design.md`
|
|
||||||
- `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- `.plans/design/ui/dashboard-design.md`
|
|
||||||
- `.plans/design/ui/project-detail-design.md`
|
|
||||||
- `.plans/design/ui/org-design.md`
|
|
||||||
|
|
||||||
## 공통 확인 항목
|
|
||||||
- `working`, `owner`, `participant`, `source`, `freshness` 의미가 페이지 간 동일한가
|
|
||||||
- `360px`, `390px`, `768px`, `1280px+`에서 horizontal scroll이 없는가
|
|
||||||
- 긴 badge, 긴 meta, 긴 source 문구가 wrap되는가
|
|
||||||
- null/empty 상태가 fallback 고정값으로 대체되지 않는가
|
|
||||||
|
|
||||||
## 상태 시나리오 매트릭스
|
|
||||||
| 시나리오 | `/office` | `/` | `/projects/[id]` | `/org` |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| socket disconnected | connection off + snapshot/fallback 유지 | event stream off, freshness 유지 | 영향 없음 또는 snapshot note | 영향 없음 |
|
|
||||||
| snapshot only | `snapshot only` 상태 구분 | `SNAPSHOT n AGO` 표기 | participant/source snapshot 표기 | org snapshot 표기 |
|
|
||||||
| fallback only | fallback seed가 working 주입 안 함 | owner null 유지 | participant empty 유지 | fallback org snapshot 표기 |
|
|
||||||
| connected idle | working 강조 없음 | sister row idle 표기 | participant로 과장 노출 안 함 | member idle 표기 |
|
|
||||||
| active working | why active 근거 노출 | active focus만 짧게 표시 | current owner/participant reason 표기 | member active badge 표기 |
|
|
||||||
| no active owner | 기본 owner 없음 | `NO ACTIVE OWNER` | `NO ACTIVE OWNER` | unit lead 미정 가능 |
|
|
||||||
| empty chat | empty state 즉시 노출 | N/A | N/A | N/A |
|
|
||||||
| JWT missing | send disabled reason 노출 | N/A | N/A | N/A |
|
|
||||||
|
|
||||||
## breakpoint 체크
|
|
||||||
|
|
||||||
### 360px
|
|
||||||
#### `/office`
|
|
||||||
- [ ] 첫 viewport에 summary, group blocks, quick action이 보인다
|
|
||||||
- [ ] scene 축소판이 없다
|
|
||||||
- [ ] chat/pipeline/health에서 horizontal scroll이 없다
|
|
||||||
|
|
||||||
#### `/`
|
|
||||||
- [ ] top chips가 wrap된다
|
|
||||||
- [ ] owner 영역이 잘리지 않는다
|
|
||||||
- [ ] sister/status/pipeline cards가 넘치지 않는다
|
|
||||||
|
|
||||||
#### `/projects/[id]`
|
|
||||||
- [ ] flow card가 1열 stack으로 보인다
|
|
||||||
- [ ] participant reason/source badge가 wrap된다
|
|
||||||
- [ ] git row가 넘치지 않는다
|
|
||||||
|
|
||||||
#### `/org`
|
|
||||||
- [ ] org summary와 team cards가 1열로 읽힌다
|
|
||||||
- [ ] independent agents section이 누락되지 않는다
|
|
||||||
|
|
||||||
### 390px
|
|
||||||
- [ ] 360px 체크를 모두 통과한다
|
|
||||||
- [ ] 긴 한글 문장과 영문 source label이 wrap된다
|
|
||||||
|
|
||||||
### 768px
|
|
||||||
- [ ] 2열 전환 시 시선 흐름이 깨지지 않는다
|
|
||||||
- [ ] scene/context, pipeline, org units가 애매한 overflow 없이 재배치된다
|
|
||||||
|
|
||||||
### 1280px+
|
|
||||||
- [ ] `/office` desktop group scene이 유지된다
|
|
||||||
- [ ] `/` executive snapshot hierarchy가 분명하다
|
|
||||||
- [ ] `/projects/[id]` participant 의미가 sidebar 축약으로 무너지지 않는다
|
|
||||||
- [ ] `/org` functional teams + independent agents가 함께 읽힌다
|
|
||||||
|
|
||||||
## 페이지별 semantic checks
|
|
||||||
### `/office`
|
|
||||||
- [ ] `working`이 fallback seed에서 나오지 않는다
|
|
||||||
- [ ] default context가 선택 전에도 보인다
|
|
||||||
- [ ] `connected idle`, `active working`, `snapshot only`, `fallback`, `offline`이 구분된다
|
|
||||||
|
|
||||||
### `/`
|
|
||||||
- [ ] connection badge와 freshness badge가 분리된다
|
|
||||||
- [ ] owner null 상태에서 특정 자매 fallback 고정 노출이 없다
|
|
||||||
- [ ] source badge가 `mirrored event`, `snapshot`, `doc-derived`, `fallback` 중 하나로 읽힌다
|
|
||||||
|
|
||||||
### `/projects/[id]`
|
|
||||||
- [ ] `ASSIGNED NODES`가 제거된다
|
|
||||||
- [ ] participant와 task assignee가 분리된다
|
|
||||||
- [ ] why-visible 없는 participant가 없다
|
|
||||||
|
|
||||||
### `/org`
|
|
||||||
- [ ] hard-coded root tree 의존이 없다
|
|
||||||
- [ ] independent agents가 별도 그룹으로 보인다
|
|
||||||
- [ ] status/source/freshness vocabulary가 다른 페이지와 같다
|
|
||||||
|
|
||||||
## 남은 follow-up / scope cut
|
|
||||||
- 실제 DTO 구현 후 field naming 최종 점검 필요
|
|
||||||
- activity evidence가 부족한 환경에서 `working confidence` 정책 추가 검토 필요
|
|
||||||
- independent agents data sourcing이 부족하면 v1에서는 snapshot 기반으로 제한 가능
|
|
||||||
@@ -1,218 +0,0 @@
|
|||||||
# 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/`에 정리됨
|
|
||||||
@@ -1,212 +0,0 @@
|
|||||||
# SPRINT-017: `/office` 모바일 화면 전면 개편
|
|
||||||
|
|
||||||
## 목표
|
|
||||||
`/office`를 데스크톱 축소판이 아니라 **모바일 전용 운영 화면**으로 다시 정리해. 이번 Sprint의 성공 기준은 단순 반응형이 아니야. `360px`, `390px` 첫 화면에서 운영자가 바로 읽어야 할 정보가 세로 흐름으로 보이고, direct chat, pipeline, health, context가 모바일 기준으로 다시 배치되어야 해.
|
|
||||||
|
|
||||||
## 이번 Sprint의 한 줄 정의
|
|
||||||
`main`에 이미 있는 `/office` 구현을 기준으로, **새 API 없이** `frontend/app/office/page.tsx`와 `frontend/components/office/*`의 모바일 IA와 상태 표현을 다시 잠근다.
|
|
||||||
|
|
||||||
## 배경
|
|
||||||
현재 `main` 구현은 데스크톱 기준 구조가 먼저 잡혀 있어.
|
|
||||||
|
|
||||||
### 현재 구현에서 확인된 문제
|
|
||||||
1. `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `aspect-ratio: 800 / 460` 고정 씬이라 `mobile(<768)`에서 데스크톱 축소판처럼 보인다.
|
|
||||||
2. `frontend/app/office/page.tsx`
|
|
||||||
- 헤더 아래에 모바일 전용 summary hero가 없다.
|
|
||||||
- `ChatArea`가 `520px`, 모바일에서 `460px` 고정 높이라 세로 흐름을 끊는다.
|
|
||||||
- 핵심 정보가 `OfficeScene`, `ContextPanel`, 하단 패널로 흩어져 첫 viewport 우선순위가 없다.
|
|
||||||
3. `frontend/components/office/ContextPanel.tsx`
|
|
||||||
- 선택 전에는 "에이전트를 선택하면 상세 정보가 표시됩니다"만 보여서 첫 진입 정보가 비어 있다.
|
|
||||||
4. `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `overflow-x: auto`와 `min-width` 카드에 기대고 있어 모바일에서 가로 스크롤이 전제된다.
|
|
||||||
5. `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- direct chat이 모바일 세로 흐름보다 데스크톱 3열 구조에 가깝다.
|
|
||||||
- `JWT 없음`, `runtime 확인 중`, `empty`, `전송 실패`가 모바일에서 즉시 읽히는 구조가 아니다.
|
|
||||||
|
|
||||||
## 참고 문서
|
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
|
||||||
- 이전 Sprint: `.plans/sprints/SPRINT-016.md`
|
|
||||||
- 오피스 모바일 IA: `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- 오피스 direct chat 모바일 기준: `.plans/design/ui/office-chat-design.md`
|
|
||||||
- API 참고: `.plans/design/api-design.md`
|
|
||||||
- 제품 PRD: `docs/product-specs/openclaw-office-dashboard-prd.md`
|
|
||||||
|
|
||||||
## 기준 구현 경로
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ContextPanel.tsx`
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
|
|
||||||
## breakpoint 기준
|
|
||||||
- **360px:** 최소 지원 모바일 폭, 첫 viewport 가독성 기준
|
|
||||||
- **390px:** 기본 모바일 기준 폭
|
|
||||||
- **768px:** tablet 전환 시작점
|
|
||||||
- **1280px+:** desktop 기존 구조 유지 기준
|
|
||||||
|
|
||||||
## Sprint 범위
|
|
||||||
### 포함
|
|
||||||
- `mobile(<768)` 전용 상단 summary view-model 정의
|
|
||||||
- 첫 viewport 정보 우선순위 재설계
|
|
||||||
- compact sister status 블록 도입
|
|
||||||
- focus / health / quick action 블록 도입
|
|
||||||
- 모바일에서 office scene을 compact sister stack 또는 selectable status cards로 대체
|
|
||||||
- direct chat 모바일 1열 레이아웃 재정의
|
|
||||||
- pipeline / health 패널의 모바일 카드 흐름 재정의
|
|
||||||
- `live / snapshot / fallback` 및 `loading / empty / error / stale` 표현 통일
|
|
||||||
- `360 / 390 / 768 / 1280+` QA 기준 작성
|
|
||||||
|
|
||||||
### 제외
|
|
||||||
- 신규 백엔드 API
|
|
||||||
- WebSocket reconnect 정책 재설계
|
|
||||||
- 새 도메인 데이터 모델 추가
|
|
||||||
- 별도 모바일 앱
|
|
||||||
- 데스크톱 오피스 씬 컨셉 리뉴얼
|
|
||||||
|
|
||||||
## mobile first success criteria
|
|
||||||
### 첫 viewport 필수 정보 (`360px`, `390px`)
|
|
||||||
첫 화면 안에서 아래가 모두 보여야 해.
|
|
||||||
1. 4자매 상태 요약
|
|
||||||
2. current focus
|
|
||||||
3. health summary
|
|
||||||
4. quick actions
|
|
||||||
|
|
||||||
### 금지 사항
|
|
||||||
- 가로 스크롤
|
|
||||||
- 데스크톱 씬 축소판 유지
|
|
||||||
- 선택 전 빈 상태로 시작하는 context 구조
|
|
||||||
- 채팅 타임라인/입력창 잘림
|
|
||||||
|
|
||||||
### 유지 사항
|
|
||||||
- `live / snapshot / fallback` 의미 자체는 바꾸지 않는다
|
|
||||||
- desktop(`1280px+`)에서는 기존 scene + side panel 구조를 기능적으로 유지한다
|
|
||||||
- 기존 fetch 결과만 재조합하고 새 API는 추가하지 않는다
|
|
||||||
|
|
||||||
## 실행 계획
|
|
||||||
|
|
||||||
### T1. scope와 mobile IA 잠금
|
|
||||||
**대상 문서**
|
|
||||||
- `.plans/OVERVIEW.md`
|
|
||||||
- `.plans/sprints/SPRINT-017.md`
|
|
||||||
- `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- `.plans/design/ui/office-chat-design.md`
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- 첫 viewport 필수 정보가 문서에 명시된다
|
|
||||||
- 금지 사항과 유지 사항이 문서에 명시된다
|
|
||||||
- 실제 구현 파일 경로가 교차 참조된다
|
|
||||||
|
|
||||||
### T2. 모바일 상단 summary view-model 정의
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- 기존 sisters / ops / server 데이터를 재조합해 모바일 summary에 필요한 값을 만든다
|
|
||||||
- 선택 전에도 빈 화면이 아니라 기본 summary 콘텐츠가 먼저 보이게 한다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- sister status 집계가 계산된다
|
|
||||||
- current focus가 상단에서 바로 보인다
|
|
||||||
- health summary와 quick action 대상이 함께 계산된다
|
|
||||||
|
|
||||||
### T3. `/office` 레이아웃을 mobile-first 세로 스택으로 재배치
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- 모바일에서는 `summary hero → compact sister status → focus/health/action block → panel sections` 순서로 재구성한다
|
|
||||||
- desktop(`1280px+`)에서만 기존 scene + context + bottom panels 구조를 유지한다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- `360px`, `390px` 첫 viewport에서 핵심 정보 4종이 읽힌다
|
|
||||||
- 페이지 전체에 가로 스크롤이 없다
|
|
||||||
- desktop 구조가 기능적으로 유지된다
|
|
||||||
|
|
||||||
### T4. scene / context 모바일 대체
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ContextPanel.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- 모바일에서는 `800x460` 씬을 그대로 축소하지 않는다
|
|
||||||
- compact sister stack 또는 selectable status cards로 바꾼다
|
|
||||||
- context는 별도 우측 패널이 아니라 인라인 상세, accordion, sheet 중 하나로 흡수한다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- 선택 없이도 기본 context가 보인다
|
|
||||||
- sister 선택과 상세 확인이 세로 흐름 안에서 끝난다
|
|
||||||
- 모바일에서 scene은 상징이 아니라 정보 전달 수단이 된다
|
|
||||||
|
|
||||||
### T5. direct chat 모바일 1열 재정렬
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- 자매 전환, runtime badge, 타임라인, composer, 보조 상태를 한 컬럼 흐름으로 재배치한다
|
|
||||||
- 고정 높이 의존을 줄인다
|
|
||||||
- `JWT 없음`, `empty`, `전송 실패`, `runtime 확인 중` 상태를 상단 또는 입력 근처에서 즉시 읽히게 한다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- `360px`, `390px`에서 메시지, 입력창, 상태 라벨이 겹치지 않는다
|
|
||||||
- send disabled 이유가 숨겨지지 않는다
|
|
||||||
- `user / assistant / tool` 메시지 구분이 유지된다
|
|
||||||
|
|
||||||
### T6. pipeline / health 모바일 카드화
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- pipeline은 가로 노드열 대신 세로 단계 카드로 재배치한다
|
|
||||||
- health는 summary 우선, 상세는 확장 또는 후순위 카드로 정리한다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- 모바일에서 가로 스크롤이 없다
|
|
||||||
- active task, focus, review loop, deploy state가 1~2스크린 안에 파악된다
|
|
||||||
- online count와 source badge가 유지된다
|
|
||||||
|
|
||||||
### T7. 상태 라벨 통일
|
|
||||||
**대상 파일**
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- `live / snapshot / fallback` 라벨을 모바일 기준으로 짧게 통일한다
|
|
||||||
- `loading / empty / error / stale` 표현을 패널 간 같은 톤으로 맞춘다
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- source 의미가 첫 화면과 각 패널에서 같은 단어로 보인다
|
|
||||||
- `empty`와 `error`가 다른 문구로 표현된다
|
|
||||||
- `fallback` 의미가 사라지지 않는다
|
|
||||||
|
|
||||||
### T8. breakpoint QA
|
|
||||||
**산출물**
|
|
||||||
- `.plans/qa/SPRINT-017-review-1.md` 이상
|
|
||||||
|
|
||||||
**작업**
|
|
||||||
- `360 / 390 / 768 / 1280+` 실브라우저 체크
|
|
||||||
- 첫 viewport 정보 충족 여부와 horizontal scroll 부재 확인
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- breakpoint별 결과가 분리 기록된다
|
|
||||||
- blocker / warning / follow-up이 분리된다
|
|
||||||
- direct chat, pipeline, health, context 재배치 검증이 남는다
|
|
||||||
|
|
||||||
## 완료 기준
|
|
||||||
- `360px`, `390px` 첫 화면에서 4자매 상태, current focus, health summary, quick actions를 모두 읽을 수 있다
|
|
||||||
- `mobile(<768)`에서 데스크톱 축소판이 사라진다
|
|
||||||
- `ContextPanel` 선택 의존 구조가 모바일 기본 흐름 안으로 흡수된다
|
|
||||||
- `PipelinePanel`과 `ServerHealthPanel`이 가로 스크롤 없이 읽힌다
|
|
||||||
- `ChatWorkspace`가 모바일 direct chat로 동작하고, `JWT 없음 / empty / error / runtime 확인 중` 상태가 즉시 읽힌다
|
|
||||||
- `live / snapshot / fallback` 의미가 유지된 채 문구가 통일된다
|
|
||||||
|
|
||||||
## 핸드오프 메모
|
|
||||||
- 하랑이는 scope와 우선순위를 잠근다
|
|
||||||
- 나랑이는 `page.tsx`와 `office/*` 모바일 IA를 구현한다
|
|
||||||
- 다랑이는 `360 / 390 / 768 / 1280+` 기준으로 실브라우저 QA를 남긴다
|
|
||||||
- 이번 Sprint는 "안정화 전체"가 아니라 **모바일 운영 화면 재구성**까지로 좁게 끝낸다
|
|
||||||
@@ -1,202 +0,0 @@
|
|||||||
# SPRINT-018: dashboard truth redesign
|
|
||||||
|
|
||||||
## 목표
|
|
||||||
`/office`, `/`, `/projects/[id]`, `/org`를 하나의 운영 정보 구조로 재정렬하고, `connection`, `activity`, `participation`, `freshness`, `source`를 분리한 source-of-truth로 다시 잠근다.
|
|
||||||
|
|
||||||
## 한 줄 정의
|
|
||||||
SPRINT-017의 모바일 개편 범위와 HOTFIX-006의 정합성 보정 범위를 이어서, 이번 Sprint는 **운영 의미를 다시 정의하는 문서 Sprint**다.
|
|
||||||
|
|
||||||
## 배경
|
|
||||||
현재 구현은 화면마다 정보는 많지만, 운영 의미가 섞여 있다.
|
|
||||||
- `/office`는 fallback seed가 `working`처럼 읽히는 구간이 있다
|
|
||||||
- `/`는 `socket off`와 freshness가 분리되지 않아 전체 오류처럼 보일 수 있다
|
|
||||||
- `/projects/[id]`는 unique assignee 목록을 실제 participant처럼 보여준다
|
|
||||||
- `/org`는 회사형 조직도가 아니라 하드코딩된 자매 트리에 가깝다
|
|
||||||
- 모바일 `360px`, `390px` 기준으로 긴 문장과 카드가 쉽게 넘친다
|
|
||||||
|
|
||||||
## 참고 문서
|
|
||||||
- 실행 개요: `.plans/OVERVIEW.md`
|
|
||||||
- 이전 Sprint: `.plans/sprints/SPRINT-017.md`
|
|
||||||
- 관련 hotfix: `.plans/hotfix/HOTFIX-006.md`
|
|
||||||
- API 설계: `.plans/design/api-design.md`
|
|
||||||
- UI 설계:
|
|
||||||
- `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- `.plans/design/ui/dashboard-design.md`
|
|
||||||
- `.plans/design/ui/project-detail-design.md`
|
|
||||||
- `.plans/design/ui/org-design.md`
|
|
||||||
- QA 초안: `.plans/qa/SPRINT-018-review-1.md`
|
|
||||||
|
|
||||||
## 페이지 역할 고정
|
|
||||||
| 페이지 | 역할 | primary question | source priority |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `/office` | live operations workspace | 지금 누가 연결되어 있고, 누가 실제로 일하고 있으며, 어디에 바로 개입해야 하나 | live → snapshot → fallback |
|
|
||||||
| `/` | executive snapshot | 지금 운영 전체에서 가장 먼저 볼 변화가 무엇인가 | mirrored event + snapshot + doc-derived |
|
|
||||||
| `/projects/[id]` | delivery detail | 이 프로젝트의 구현, QA, deploy, 참여 상태가 어디까지 왔나 | project snapshot + participant summary + task assignee aggregate |
|
|
||||||
| `/org` | company org map | 누가 어떤 조직 단위에 속하고, independent agents는 어디에 위치하나 | org snapshot |
|
|
||||||
|
|
||||||
## 공통 용어 표
|
|
||||||
| 용어 | 정의 | 금지 |
|
|
||||||
|---|---|---|
|
|
||||||
| `connection` | gateway/socket/runtime 연결 가능 여부 | activity와 같은 뜻으로 쓰기 |
|
|
||||||
| `activity` | 최근 event, session, message, task evidence | connection만 보고 activity 추정 확정하기 |
|
|
||||||
| `working` | 명시적 운영 상태. active task, current session, recent operator evidence가 있는 경우만 active 표시 | fallback seed나 단순 animated state로 주입하기 |
|
|
||||||
| `owner` | 현재 책임자. 없으면 null 허용 | fallback 기본값으로 특정 자매 고정하기 |
|
|
||||||
| `participant` | 현재 프로젝트/흐름에서 왜 보이는지 설명 가능한 사람 | unique assignee 목록을 그대로 participant로 표기하기 |
|
|
||||||
| `assignee` | task 할당 기준 인원 | participant와 같은 섹션명 쓰기 |
|
|
||||||
| `freshness` | 언제 생성, 동기화, 미러링되었는지 | socket on/off만으로 freshness 대체하기 |
|
|
||||||
| `source` | 값이 어디서 왔는지 (`live`, `mirrored event`, `snapshot`, `doc-derived`, `fallback`) | 서로 다른 source를 같은 사실처럼 라벨링하기 |
|
|
||||||
|
|
||||||
## Sprint 원칙
|
|
||||||
- `360px`, `390px` 기준 horizontal scroll 금지
|
|
||||||
- 긴 badge, 긴 meta 문구, 긴 이유 문구는 wrap 기준으로 설계
|
|
||||||
- fallback, snapshot, live를 같은 사실처럼 보이게 하지 않음
|
|
||||||
- `working`, `owner`, `participant`는 추정치와 확정치를 분리해 표시
|
|
||||||
- 페이지별 역할은 다르지만 source/freshness contract는 공유
|
|
||||||
|
|
||||||
## 범위
|
|
||||||
### 포함
|
|
||||||
- SPRINT-018 운영 정보 구조와 용어 잠금
|
|
||||||
- sisters/dashboard/project/org API truth contract 재설계 문서화
|
|
||||||
- `/office`, `/`, `/projects/[id]`, `/org` UI 정보 구조 재설계
|
|
||||||
- source badge, freshness label, empty/null 표현 기준 통일
|
|
||||||
- 교차 페이지 QA 시나리오 초안 작성
|
|
||||||
|
|
||||||
### 제외
|
|
||||||
- 실제 API 구현
|
|
||||||
- DB schema migration
|
|
||||||
- websocket namespace 변경
|
|
||||||
- 새 역할 체계 추가
|
|
||||||
- 조직도 authoring 툴 구축
|
|
||||||
|
|
||||||
## 실행 계획
|
|
||||||
|
|
||||||
### T1. 운영 정보 구조 및 source-of-truth 명세 잠금
|
|
||||||
**대상 문서**
|
|
||||||
- `.plans/OVERVIEW.md`
|
|
||||||
- `.plans/sprints/SPRINT-018.md`
|
|
||||||
- `.plans/design/api-design.md`
|
|
||||||
- `.plans/design/ui/office-dashboard-design.md`
|
|
||||||
- `.plans/design/ui/dashboard-design.md`
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- 페이지 역할이 고정된다
|
|
||||||
- 공통 용어 표가 문서에 들어간다
|
|
||||||
- 모바일 overflow 금지 규칙이 문서에 명시된다
|
|
||||||
- fallback / null / empty 처리 기준이 문서에 들어간다
|
|
||||||
|
|
||||||
### T2. 자매 운영 상태 source-of-truth 계약 재설계
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `backend/src/sisters/sisters.service.ts`
|
|
||||||
- `backend/src/dashboard/dashboard.service.ts`
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/app/page.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- `connection`, `activity`, `working`, `lastActiveAt`, `source`, `freshness`를 분리 반환한다
|
|
||||||
- `connected but idle`, `snapshot only`, `fallback`, `offline`을 구분 가능한 상태로 만든다
|
|
||||||
- 프론트 fallback seed는 `working`을 직접 주입하지 않는다
|
|
||||||
|
|
||||||
### T3. 프로젝트 참여자 계약 분리 설계
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/app/projects/[id]/page.tsx`
|
|
||||||
- `backend/src/projects/*`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- participant summary와 task assignee aggregate를 별도 필드로 분리한다
|
|
||||||
- participant마다 `whyVisible`을 붙인다
|
|
||||||
- active participant가 없으면 null/empty를 그대로 보여준다
|
|
||||||
|
|
||||||
### T4. 조직도 데이터 계약 재설계
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `backend/src/sisters/sister-detail.service.ts`
|
|
||||||
- `frontend/app/org/page.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- `/api/org`는 `orgUnits`, `members`, `reportingLines`, `independentAgents`를 반환한다
|
|
||||||
- sister-owned agents와 independent agents를 분리한다
|
|
||||||
- 특정 자매를 하드코딩한 고정 트리에 의존하지 않는다
|
|
||||||
|
|
||||||
### T5. `/office` shell, scene, context 재배치
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/app/office/page.tsx`
|
|
||||||
- `frontend/components/office/OfficeScene.tsx`
|
|
||||||
- `frontend/components/office/ContextPanel.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- desktop은 group/scene 중심 운영 레이아웃으로 재구성한다
|
|
||||||
- mobile(`<768`)은 `summary → group blocks → detail flow`로 바꾼다
|
|
||||||
- 첫 진입 시 빈 context 대신 운영 summary를 보여준다
|
|
||||||
|
|
||||||
### T6. `/office` 하위 패널 모바일 정보 밀도 재정렬
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/components/office/ChatWorkspace.tsx`
|
|
||||||
- `frontend/components/office/PipelinePanel.tsx`
|
|
||||||
- `frontend/components/office/ServerHealthPanel.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- horizontal scroll을 제거한다
|
|
||||||
- `JWT missing`, `runtime checking`, `empty`, `error`, `send disabled`를 즉시 읽히게 한다
|
|
||||||
- 상태 라벨 톤을 패널 간 통일한다
|
|
||||||
|
|
||||||
### T7. 메인 대시보드 운영 의미 재정렬
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/app/page.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- socket connection과 freshness를 분리한다
|
|
||||||
- active owner가 없을 때 fallback owner를 고정 노출하지 않는다
|
|
||||||
- 주요 섹션에 source 라벨을 일관되게 붙인다
|
|
||||||
|
|
||||||
### T8. 프로젝트 상세 레이아웃과 참여자 표현 재설계
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/app/projects/[id]/page.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- `ASSIGNED NODES`를 truthful section으로 교체한다
|
|
||||||
- participant, current owner, task assignee를 분리한다
|
|
||||||
- 나랑이 단독 노출도 확정 참여처럼 읽히지 않게 `reason/source`를 붙인다
|
|
||||||
|
|
||||||
### T9. 회사형 조직도 UI 전면 재설계
|
|
||||||
**기준 구현 파일**
|
|
||||||
- `frontend/app/org/page.tsx`
|
|
||||||
|
|
||||||
**핵심 결정**
|
|
||||||
- HQ, functional teams, members, independent agents 구조로 재배치한다
|
|
||||||
- terminal tree 한 벌이 아니라 mobile에서도 읽히는 카드형 org map을 만든다
|
|
||||||
|
|
||||||
### T10. 교차 페이지 QA 및 문서 마감
|
|
||||||
**산출물**
|
|
||||||
- `.plans/qa/SPRINT-018-review-1.md`
|
|
||||||
- `.plans/OVERVIEW.md`
|
|
||||||
- `.plans/sprints/SPRINT-018.md`
|
|
||||||
|
|
||||||
**done when**
|
|
||||||
- `/office`, `/`, `/projects/[id]`, `/org`를 `360 / 390 / 768 / 1280+`로 분리 기록한다
|
|
||||||
- `socket disconnected`, `snapshot only`, `fallback only`, `connected idle`, `active working`, `no active owner`, `empty chat`, `JWT missing`를 검증한다
|
|
||||||
- `working / owner / participant / source badge` 의미가 페이지 간 같게 보이는지 확인한다
|
|
||||||
|
|
||||||
## acceptance
|
|
||||||
- 각 페이지 역할과 공통 용어가 문서에 고정되어 있다
|
|
||||||
- API 문서에 `connection / activity / working / freshness / source` 분리 계약이 있다
|
|
||||||
- `/office`, `/`, `/projects/[id]`, `/org` UI 문서가 truthful empty/null 상태를 포함한다
|
|
||||||
- 모바일 `360px`, `390px`에서 overflow 금지 규칙이 모든 관련 문서에 반영되어 있다
|
|
||||||
- QA 문서가 breakpoint와 상태 시나리오를 함께 다룬다
|
|
||||||
|
|
||||||
## rollout
|
|
||||||
1. 문서 기준 잠금
|
|
||||||
2. backend contract 구현
|
|
||||||
3. `/office`와 `/` state badge 정리
|
|
||||||
4. project detail participant model 반영
|
|
||||||
5. org contract + UI 반영
|
|
||||||
6. 교차 페이지 QA
|
|
||||||
|
|
||||||
## out-of-scope follow-up
|
|
||||||
- activity evidence를 더 세밀하게 저장하는 schema 정리
|
|
||||||
- participant reason 자동 생성 규칙 정교화
|
|
||||||
- org map edit UI
|
|
||||||
- source badge analytics
|
|
||||||
|
|
||||||
## handoff 메모
|
|
||||||
- SPRINT-017 문서는 `/office` mobile IA 기준으로 유지한다. SPRINT-018은 그 위에 cross-page truth contract를 추가하는 Sprint다.
|
|
||||||
- HOTFIX-006의 `socket / freshness / doc-derived` 문제는 이번 Sprint에서 메인 대시보드 전체 계약으로 승격한다.
|
|
||||||
- 구현 시 문서보다 더 센 추정치 표현이 생기면 문서 기준이 우선이다.
|
|
||||||
20
backend/package-lock.json
generated
20
backend/package-lock.json
generated
@@ -12,7 +12,6 @@
|
|||||||
"@nestjs/common": "^11.0.1",
|
"@nestjs/common": "^11.0.1",
|
||||||
"@nestjs/config": "^4.0.3",
|
"@nestjs/config": "^4.0.3",
|
||||||
"@nestjs/core": "^11.0.1",
|
"@nestjs/core": "^11.0.1",
|
||||||
"@nestjs/event-emitter": "^3.0.1",
|
|
||||||
"@nestjs/jwt": "^11.0.2",
|
"@nestjs/jwt": "^11.0.2",
|
||||||
"@nestjs/passport": "^11.0.5",
|
"@nestjs/passport": "^11.0.5",
|
||||||
"@nestjs/platform-express": "^11.0.1",
|
"@nestjs/platform-express": "^11.0.1",
|
||||||
@@ -2295,19 +2294,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@nestjs/event-emitter": {
|
|
||||||
"version": "3.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@nestjs/event-emitter/-/event-emitter-3.0.1.tgz",
|
|
||||||
"integrity": "sha512-0Ln/x+7xkU6AJFOcQI9tIhUMXVF7D5itiaQGOyJbXtlAfAIt8gzDdJm+Im7cFzKoWkiW5nCXCPh6GSvdQd/3Dw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"eventemitter2": "6.4.9"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@nestjs/common": "^10.0.0 || ^11.0.0",
|
|
||||||
"@nestjs/core": "^10.0.0 || ^11.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@nestjs/jwt": {
|
"node_modules/@nestjs/jwt": {
|
||||||
"version": "11.0.2",
|
"version": "11.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@nestjs/jwt/-/jwt-11.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@nestjs/jwt/-/jwt-11.0.2.tgz",
|
||||||
@@ -6218,12 +6204,6 @@
|
|||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eventemitter2": {
|
|
||||||
"version": "6.4.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
|
|
||||||
"integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/events": {
|
"node_modules/events": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
|
||||||
|
|||||||
@@ -27,7 +27,6 @@
|
|||||||
"@nestjs/common": "^11.0.1",
|
"@nestjs/common": "^11.0.1",
|
||||||
"@nestjs/config": "^4.0.3",
|
"@nestjs/config": "^4.0.3",
|
||||||
"@nestjs/core": "^11.0.1",
|
"@nestjs/core": "^11.0.1",
|
||||||
"@nestjs/event-emitter": "^3.0.1",
|
|
||||||
"@nestjs/jwt": "^11.0.2",
|
"@nestjs/jwt": "^11.0.2",
|
||||||
"@nestjs/passport": "^11.0.5",
|
"@nestjs/passport": "^11.0.5",
|
||||||
"@nestjs/platform-express": "^11.0.1",
|
"@nestjs/platform-express": "^11.0.1",
|
||||||
|
|||||||
@@ -2,9 +2,10 @@ import { Module } from '@nestjs/common';
|
|||||||
import { ActivityController } from './activity.controller';
|
import { ActivityController } from './activity.controller';
|
||||||
import { ActivityService } from './activity.service';
|
import { ActivityService } from './activity.service';
|
||||||
import { PrismaModule } from '../prisma/prisma.module';
|
import { PrismaModule } from '../prisma/prisma.module';
|
||||||
|
import { EventsModule } from '../events/events.module';
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [PrismaModule],
|
imports: [PrismaModule, EventsModule],
|
||||||
controllers: [ActivityController],
|
controllers: [ActivityController],
|
||||||
providers: [ActivityService],
|
providers: [ActivityService],
|
||||||
exports: [ActivityService],
|
exports: [ActivityService],
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { Test, TestingModule } from '@nestjs/testing';
|
import { Test, TestingModule } from '@nestjs/testing';
|
||||||
import { EventEmitter2 } from '@nestjs/event-emitter';
|
|
||||||
import { ActivityService } from './activity.service';
|
import { ActivityService } from './activity.service';
|
||||||
import { PrismaService } from '../prisma/prisma.service';
|
import { PrismaService } from '../prisma/prisma.service';
|
||||||
|
|
||||||
@@ -21,7 +20,6 @@ describe('ActivityService', () => {
|
|||||||
providers: [
|
providers: [
|
||||||
ActivityService,
|
ActivityService,
|
||||||
{ provide: PrismaService, useValue: mockPrisma },
|
{ provide: PrismaService, useValue: mockPrisma },
|
||||||
EventEmitter2,
|
|
||||||
],
|
],
|
||||||
}).compile();
|
}).compile();
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Injectable } from '@nestjs/common';
|
import { Injectable, Optional } from '@nestjs/common';
|
||||||
import { EventEmitter2 } from '@nestjs/event-emitter';
|
|
||||||
import { PrismaService } from '../prisma/prisma.service';
|
import { PrismaService } from '../prisma/prisma.service';
|
||||||
|
import { EventsGateway } from '../events/events.gateway';
|
||||||
|
|
||||||
export interface LogActivityDto {
|
export interface LogActivityDto {
|
||||||
sisterId?: number;
|
sisterId?: number;
|
||||||
@@ -34,7 +34,7 @@ function sanitizeActivityDetail(detail?: string | null): string | undefined {
|
|||||||
export class ActivityService {
|
export class ActivityService {
|
||||||
constructor(
|
constructor(
|
||||||
private readonly prisma: PrismaService,
|
private readonly prisma: PrismaService,
|
||||||
private readonly eventEmitter: EventEmitter2,
|
@Optional() private readonly events?: EventsGateway,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async log(dto: LogActivityDto) {
|
async log(dto: LogActivityDto) {
|
||||||
@@ -49,7 +49,9 @@ export class ActivityService {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
this.eventEmitter.emit('activity.logged', record);
|
if (this.events) {
|
||||||
|
this.events.broadcastActivity(record);
|
||||||
|
}
|
||||||
|
|
||||||
return record;
|
return record;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { Module } from '@nestjs/common';
|
import { Module } from '@nestjs/common';
|
||||||
import { ConfigModule } from '@nestjs/config';
|
import { ConfigModule } from '@nestjs/config';
|
||||||
import { EventEmitterModule } from '@nestjs/event-emitter';
|
|
||||||
import { ThrottlerModule } from '@nestjs/throttler';
|
import { ThrottlerModule } from '@nestjs/throttler';
|
||||||
import { AppController } from './app.controller';
|
import { AppController } from './app.controller';
|
||||||
import { AppService } from './app.service';
|
import { AppService } from './app.service';
|
||||||
@@ -23,7 +22,6 @@ import { DashboardModule } from './dashboard/dashboard.module';
|
|||||||
@Module({
|
@Module({
|
||||||
imports: [
|
imports: [
|
||||||
ConfigModule.forRoot({ isGlobal: true }),
|
ConfigModule.forRoot({ isGlobal: true }),
|
||||||
EventEmitterModule.forRoot(),
|
|
||||||
ThrottlerModule.forRoot([{ ttl: 60000, limit: 100 }]),
|
ThrottlerModule.forRoot([{ ttl: 60000, limit: 100 }]),
|
||||||
PrismaModule,
|
PrismaModule,
|
||||||
SistersModule,
|
SistersModule,
|
||||||
|
|||||||
@@ -1,128 +0,0 @@
|
|||||||
import { randomBytes, timingSafeEqual } from 'crypto';
|
|
||||||
import type { CookieOptions, Request, Response } from 'express';
|
|
||||||
|
|
||||||
export const ACCESS_TOKEN_COOKIE = 'hanarang_access_token';
|
|
||||||
export const REFRESH_TOKEN_COOKIE = 'hanarang_refresh_token';
|
|
||||||
export const CSRF_TOKEN_COOKIE = 'hanarang_csrf_token';
|
|
||||||
|
|
||||||
const ACCESS_TOKEN_MAX_AGE_MS = 15 * 60 * 1000;
|
|
||||||
const REFRESH_TOKEN_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
|
|
||||||
|
|
||||||
function isHttpsRequest(req?: Request): boolean {
|
|
||||||
const forwardedProto = req?.headers['x-forwarded-proto'];
|
|
||||||
const protocol = Array.isArray(forwardedProto)
|
|
||||||
? forwardedProto[0]
|
|
||||||
: forwardedProto;
|
|
||||||
|
|
||||||
return (
|
|
||||||
process.env.NODE_ENV === 'production' ||
|
|
||||||
req?.secure === true ||
|
|
||||||
protocol === 'https'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function baseCookieOptions(req?: Request): CookieOptions {
|
|
||||||
return {
|
|
||||||
path: '/',
|
|
||||||
secure: isHttpsRequest(req),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function parseCookieHeader(
|
|
||||||
header?: string | string[],
|
|
||||||
): Record<string, string> {
|
|
||||||
const raw = Array.isArray(header) ? header.join(';') : header;
|
|
||||||
if (!raw) return {};
|
|
||||||
|
|
||||||
return raw
|
|
||||||
.split(';')
|
|
||||||
.map((part) => part.trim())
|
|
||||||
.filter((part) => part.length > 0)
|
|
||||||
.reduce<Record<string, string>>((cookies, part) => {
|
|
||||||
const eqIndex = part.indexOf('=');
|
|
||||||
if (eqIndex === -1) return cookies;
|
|
||||||
|
|
||||||
const key = decodeURIComponent(part.slice(0, eqIndex).trim());
|
|
||||||
const value = decodeURIComponent(part.slice(eqIndex + 1).trim());
|
|
||||||
cookies[key] = value;
|
|
||||||
return cookies;
|
|
||||||
}, {});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCookieValue(
|
|
||||||
req: Pick<Request, 'headers'>,
|
|
||||||
name: string,
|
|
||||||
): string | undefined {
|
|
||||||
return parseCookieHeader(req.headers.cookie)[name];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function generateCsrfToken(): string {
|
|
||||||
return randomBytes(32).toString('hex');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasValidCsrfToken(req: Request): boolean {
|
|
||||||
const cookieToken = getCookieValue(req, CSRF_TOKEN_COOKIE);
|
|
||||||
const headerToken = req.headers['x-csrf-token'];
|
|
||||||
const requestToken = Array.isArray(headerToken) ? headerToken[0] : headerToken;
|
|
||||||
|
|
||||||
if (!cookieToken || !requestToken) return false;
|
|
||||||
|
|
||||||
const cookieBuffer = Buffer.from(cookieToken);
|
|
||||||
const requestBuffer = Buffer.from(requestToken);
|
|
||||||
|
|
||||||
if (cookieBuffer.length !== requestBuffer.length) return false;
|
|
||||||
|
|
||||||
try {
|
|
||||||
return timingSafeEqual(cookieBuffer, requestBuffer);
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setAuthCookies(
|
|
||||||
res: Response,
|
|
||||||
req: Request,
|
|
||||||
tokens: { accessToken: string; refreshToken: string },
|
|
||||||
csrfToken = generateCsrfToken(),
|
|
||||||
) {
|
|
||||||
res.cookie(ACCESS_TOKEN_COOKIE, tokens.accessToken, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: true,
|
|
||||||
sameSite: 'lax',
|
|
||||||
maxAge: ACCESS_TOKEN_MAX_AGE_MS,
|
|
||||||
});
|
|
||||||
|
|
||||||
res.cookie(REFRESH_TOKEN_COOKIE, tokens.refreshToken, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: true,
|
|
||||||
sameSite: 'strict',
|
|
||||||
maxAge: REFRESH_TOKEN_MAX_AGE_MS,
|
|
||||||
});
|
|
||||||
|
|
||||||
res.cookie(CSRF_TOKEN_COOKIE, csrfToken, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: false,
|
|
||||||
sameSite: 'strict',
|
|
||||||
maxAge: REFRESH_TOKEN_MAX_AGE_MS,
|
|
||||||
});
|
|
||||||
|
|
||||||
return csrfToken;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearAuthCookies(res: Response, req?: Request) {
|
|
||||||
res.clearCookie(ACCESS_TOKEN_COOKIE, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: true,
|
|
||||||
sameSite: 'lax',
|
|
||||||
});
|
|
||||||
res.clearCookie(REFRESH_TOKEN_COOKIE, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: true,
|
|
||||||
sameSite: 'strict',
|
|
||||||
});
|
|
||||||
res.clearCookie(CSRF_TOKEN_COOKIE, {
|
|
||||||
...baseCookieOptions(req),
|
|
||||||
httpOnly: false,
|
|
||||||
sameSite: 'strict',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,30 +1,17 @@
|
|||||||
import {
|
import {
|
||||||
BadRequestException,
|
|
||||||
Body,
|
|
||||||
Controller,
|
Controller,
|
||||||
Get,
|
|
||||||
HttpCode,
|
|
||||||
Post,
|
Post,
|
||||||
Req,
|
Get,
|
||||||
Res,
|
Body,
|
||||||
UnauthorizedException,
|
Headers,
|
||||||
UseGuards,
|
UseGuards,
|
||||||
Request,
|
Request,
|
||||||
|
BadRequestException,
|
||||||
} from '@nestjs/common';
|
} from '@nestjs/common';
|
||||||
import type {
|
import type { Request as ExpressRequest } from 'express';
|
||||||
Request as ExpressRequest,
|
|
||||||
Response as ExpressResponse,
|
|
||||||
} from 'express';
|
|
||||||
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
|
|
||||||
import { AuthService, LoginDto } from './auth.service';
|
import { AuthService, LoginDto } from './auth.service';
|
||||||
import {
|
|
||||||
getCookieValue,
|
|
||||||
hasValidCsrfToken,
|
|
||||||
setAuthCookies,
|
|
||||||
clearAuthCookies,
|
|
||||||
REFRESH_TOKEN_COOKIE,
|
|
||||||
} from './auth-cookies';
|
|
||||||
import { JwtGuard } from './jwt.guard';
|
import { JwtGuard } from './jwt.guard';
|
||||||
|
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
|
||||||
|
|
||||||
interface AuthenticatedRequest extends ExpressRequest {
|
interface AuthenticatedRequest extends ExpressRequest {
|
||||||
user: { userId: number };
|
user: { userId: number };
|
||||||
@@ -34,58 +21,17 @@ interface AuthenticatedRequest extends ExpressRequest {
|
|||||||
export class AuthController {
|
export class AuthController {
|
||||||
constructor(private readonly authService: AuthService) {}
|
constructor(private readonly authService: AuthService) {}
|
||||||
|
|
||||||
@HttpCode(200)
|
|
||||||
@UseGuards(ThrottlerGuard)
|
@UseGuards(ThrottlerGuard)
|
||||||
@Throttle({ default: { limit: 5, ttl: 60000 } })
|
@Throttle({ default: { limit: 5, ttl: 60000 } })
|
||||||
@Post('login')
|
@Post('login')
|
||||||
async login(
|
login(@Body() dto: LoginDto) {
|
||||||
@Body() dto: LoginDto,
|
return this.authService.login(dto);
|
||||||
@Req() req: ExpressRequest,
|
|
||||||
@Res({ passthrough: true }) res: ExpressResponse,
|
|
||||||
) {
|
|
||||||
const tokens = await this.authService.login(dto);
|
|
||||||
setAuthCookies(res, req, tokens);
|
|
||||||
|
|
||||||
return {
|
|
||||||
username: tokens.username,
|
|
||||||
role: tokens.role,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@HttpCode(200)
|
|
||||||
@UseGuards(ThrottlerGuard)
|
|
||||||
@Throttle({ default: { limit: 3, ttl: 60000 } })
|
|
||||||
@Post('refresh')
|
@Post('refresh')
|
||||||
async refresh(
|
refresh(@Headers('x-refresh-token') token: string) {
|
||||||
@Req() req: ExpressRequest,
|
|
||||||
@Res({ passthrough: true }) res: ExpressResponse,
|
|
||||||
) {
|
|
||||||
const cookieToken = getCookieValue(req, REFRESH_TOKEN_COOKIE);
|
|
||||||
const headerToken = req.headers['x-refresh-token'];
|
|
||||||
const token = cookieToken ?? (Array.isArray(headerToken) ? headerToken[0] : headerToken);
|
|
||||||
|
|
||||||
if (!token) throw new BadRequestException('Refresh token required');
|
if (!token) throw new BadRequestException('Refresh token required');
|
||||||
if (cookieToken && !hasValidCsrfToken(req)) {
|
return this.authService.refresh(token);
|
||||||
throw new UnauthorizedException('Invalid CSRF token');
|
|
||||||
}
|
|
||||||
|
|
||||||
const tokens = await this.authService.refresh(token);
|
|
||||||
setAuthCookies(res, req, tokens);
|
|
||||||
|
|
||||||
return {
|
|
||||||
username: tokens.username,
|
|
||||||
role: tokens.role,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
@HttpCode(200)
|
|
||||||
@Post('logout')
|
|
||||||
logout(
|
|
||||||
@Req() req: ExpressRequest,
|
|
||||||
@Res({ passthrough: true }) res: ExpressResponse,
|
|
||||||
) {
|
|
||||||
clearAuthCookies(res, req);
|
|
||||||
return { ok: true };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@UseGuards(JwtGuard)
|
@UseGuards(JwtGuard)
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
import { Injectable, UnauthorizedException } from '@nestjs/common';
|
import { Injectable, UnauthorizedException } from '@nestjs/common';
|
||||||
import { ConfigService } from '@nestjs/config';
|
|
||||||
import { PassportStrategy } from '@nestjs/passport';
|
import { PassportStrategy } from '@nestjs/passport';
|
||||||
import type { Request } from 'express';
|
|
||||||
import { ExtractJwt, Strategy } from 'passport-jwt';
|
import { ExtractJwt, Strategy } from 'passport-jwt';
|
||||||
import { ACCESS_TOKEN_COOKIE, getCookieValue } from './auth-cookies';
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
|
||||||
export interface JwtPayload {
|
export interface JwtPayload {
|
||||||
sub: number;
|
sub: number;
|
||||||
@@ -11,21 +9,13 @@ export interface JwtPayload {
|
|||||||
role: string;
|
role: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function cookieTokenExtractor(req?: Request): string | null {
|
|
||||||
if (!req) return null;
|
|
||||||
return getCookieValue(req, ACCESS_TOKEN_COOKIE) ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
|
export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
|
||||||
constructor(config: ConfigService) {
|
constructor(config: ConfigService) {
|
||||||
const secret = config.get<string>('JWT_SECRET');
|
const secret = config.get<string>('JWT_SECRET');
|
||||||
if (!secret) throw new Error('JWT_SECRET not set');
|
if (!secret) throw new Error('JWT_SECRET not set');
|
||||||
super({
|
super({
|
||||||
jwtFromRequest: ExtractJwt.fromExtractors([
|
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
|
||||||
cookieTokenExtractor,
|
|
||||||
ExtractJwt.fromAuthHeaderAsBearerToken(),
|
|
||||||
]),
|
|
||||||
ignoreExpiration: false,
|
ignoreExpiration: false,
|
||||||
secretOrKey: secret,
|
secretOrKey: secret,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ interface FreshnessMeta {
|
|||||||
qaDocLatestAt: string | null;
|
qaDocLatestAt: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
|
const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/', 'qa/'];
|
||||||
const SISTER_ROLES: Record<string, string> = {
|
const SISTER_ROLES: Record<string, string> = {
|
||||||
harang: 'Plan & Assign',
|
harang: 'Plan & Assign',
|
||||||
narang: 'Implement',
|
narang: 'Implement',
|
||||||
@@ -69,23 +69,13 @@ function nodeStateFromEvidence(params: {
|
|||||||
return 'idle';
|
return 'idle';
|
||||||
}
|
}
|
||||||
|
|
||||||
function sanitizeSummary(text?: string | null) {
|
|
||||||
const raw = text?.trim();
|
|
||||||
if (!raw) return null;
|
|
||||||
if (/stderr:/i.test(raw) || /command not found/i.test(raw) || /bash:\s*line/i.test(raw)) {
|
|
||||||
return '내부 작업 중 오류가 발생했어. 자세한 시스템 로그는 관리자 로그에서 확인해.';
|
|
||||||
}
|
|
||||||
if (/^ssh failed/i.test(raw) || /ssh connection failed/i.test(raw)) {
|
|
||||||
return '원격 노드 연결에 실패했어.';
|
|
||||||
}
|
|
||||||
return raw;
|
|
||||||
}
|
|
||||||
|
|
||||||
function summarizeActivity(
|
function summarizeActivity(
|
||||||
activity?: ActivityRecord | null,
|
activity?: ActivityRecord | null,
|
||||||
fallback = 'NO EVENT',
|
fallback = 'NO EVENT',
|
||||||
) {
|
) {
|
||||||
return sanitizeSummary(activity?.detail) || activity?.action?.replace(/_/g, ' ') || fallback;
|
return (
|
||||||
|
activity?.detail?.trim() || activity?.action?.replace(/_/g, ' ') || fallback
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseQaSummary(content: string): string {
|
function parseQaSummary(content: string): string {
|
||||||
|
|||||||
@@ -10,8 +10,6 @@ import { Server, Socket } from 'socket.io';
|
|||||||
import { Logger } from '@nestjs/common';
|
import { Logger } from '@nestjs/common';
|
||||||
import { JwtService } from '@nestjs/jwt';
|
import { JwtService } from '@nestjs/jwt';
|
||||||
import { ConfigService } from '@nestjs/config';
|
import { ConfigService } from '@nestjs/config';
|
||||||
import { OnEvent } from '@nestjs/event-emitter';
|
|
||||||
import { ACCESS_TOKEN_COOKIE, parseCookieHeader } from '../auth/auth-cookies';
|
|
||||||
|
|
||||||
interface SocketUserPayload {
|
interface SocketUserPayload {
|
||||||
username?: string;
|
username?: string;
|
||||||
@@ -51,17 +49,12 @@ export class EventsGateway
|
|||||||
|
|
||||||
handleConnection(client: SocketWithUser) {
|
handleConnection(client: SocketWithUser) {
|
||||||
// JWT 인증 필수 — 토큰 없거나 유효하지 않으면 disconnect
|
// JWT 인증 필수 — 토큰 없거나 유효하지 않으면 disconnect
|
||||||
const authHeader = client.handshake.headers.authorization;
|
|
||||||
const tokenFromHeader = Array.isArray(authHeader)
|
|
||||||
? authHeader[0]?.replace('Bearer ', '')
|
|
||||||
: authHeader?.replace('Bearer ', '');
|
|
||||||
const tokenFromCookie = parseCookieHeader(client.handshake.headers.cookie)[
|
|
||||||
ACCESS_TOKEN_COOKIE
|
|
||||||
];
|
|
||||||
const token =
|
const token =
|
||||||
(client.handshake.auth?.token as string | undefined) ??
|
(client.handshake.auth?.token as string) ??
|
||||||
tokenFromHeader ??
|
(client.handshake.headers.authorization as string)?.replace(
|
||||||
tokenFromCookie;
|
'Bearer ',
|
||||||
|
'',
|
||||||
|
);
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
this.logger.debug(`WS rejected (no token): ${client.id}`);
|
this.logger.debug(`WS rejected (no token): ${client.id}`);
|
||||||
@@ -108,12 +101,6 @@ export class EventsGateway
|
|||||||
this.server.emit('activity:new', { item, ts: Date.now() });
|
this.server.emit('activity:new', { item, ts: Date.now() });
|
||||||
}
|
}
|
||||||
|
|
||||||
/** EventEmitter2에서 activity.logged 수신 → WebSocket 브로드캐스트 */
|
|
||||||
@OnEvent('activity.logged')
|
|
||||||
handleActivityLogged(record: unknown) {
|
|
||||||
this.broadcastActivity(record);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 연결된 클라이언트 수 */
|
/** 연결된 클라이언트 수 */
|
||||||
getClientCount(): number {
|
getClientCount(): number {
|
||||||
return this.server?.sockets?.sockets?.size ?? 0;
|
return this.server?.sockets?.sockets?.size ?? 0;
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ export interface GiteaRepo {
|
|||||||
open_issues_count: number;
|
open_issues_count: number;
|
||||||
open_pr_counter: number;
|
open_pr_counter: number;
|
||||||
updated_at: string;
|
updated_at: string;
|
||||||
|
private?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface GiteaPR {
|
export interface GiteaPR {
|
||||||
|
|||||||
@@ -1,14 +1,7 @@
|
|||||||
import { NestFactory } from '@nestjs/core';
|
import { NestFactory } from '@nestjs/core';
|
||||||
import { Logger, ValidationPipe } from '@nestjs/common';
|
import { Logger, ValidationPipe } from '@nestjs/common';
|
||||||
import type { NextFunction, Request, Response } from 'express';
|
|
||||||
import helmet from 'helmet';
|
|
||||||
import { AppModule } from './app.module';
|
import { AppModule } from './app.module';
|
||||||
import {
|
import helmet from 'helmet';
|
||||||
ACCESS_TOKEN_COOKIE,
|
|
||||||
REFRESH_TOKEN_COOKIE,
|
|
||||||
getCookieValue,
|
|
||||||
hasValidCsrfToken,
|
|
||||||
} from './auth/auth-cookies';
|
|
||||||
|
|
||||||
function getAllowedOrigins() {
|
function getAllowedOrigins() {
|
||||||
return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
|
return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
|
||||||
@@ -17,40 +10,10 @@ function getAllowedOrigins() {
|
|||||||
.filter((origin): origin is string => origin.length > 0);
|
.filter((origin): origin is string => origin.length > 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function shouldBypassCsrf(req: Request): boolean {
|
|
||||||
if (['GET', 'HEAD', 'OPTIONS'].includes(req.method.toUpperCase())) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.path === '/api/auth/login') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasAuthorizationHeader = Boolean(req.headers.authorization);
|
|
||||||
if (hasAuthorizationHeader) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasAuthCookie = Boolean(
|
|
||||||
getCookieValue(req, ACCESS_TOKEN_COOKIE) ||
|
|
||||||
getCookieValue(req, REFRESH_TOKEN_COOKIE),
|
|
||||||
);
|
|
||||||
|
|
||||||
return !hasAuthCookie;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function bootstrap() {
|
async function bootstrap() {
|
||||||
const app = await NestFactory.create(AppModule);
|
const app = await NestFactory.create(AppModule);
|
||||||
|
|
||||||
app.use(helmet());
|
app.use(helmet());
|
||||||
app.use((req: Request, res: Response, next: NextFunction) => {
|
|
||||||
if (shouldBypassCsrf(req) || hasValidCsrfToken(req)) {
|
|
||||||
next();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
res.status(403).json({ message: 'Invalid CSRF token' });
|
|
||||||
});
|
|
||||||
|
|
||||||
const allowedOrigins = getAllowedOrigins();
|
const allowedOrigins = getAllowedOrigins();
|
||||||
|
|
||||||
@@ -66,12 +29,6 @@ async function bootstrap() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
|
methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
|
||||||
allowedHeaders: [
|
|
||||||
'Content-Type',
|
|
||||||
'Authorization',
|
|
||||||
'X-CSRF-Token',
|
|
||||||
'X-Refresh-Token',
|
|
||||||
],
|
|
||||||
credentials: true,
|
credentials: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -20,8 +20,8 @@ export class ProjectsController {
|
|||||||
) {}
|
) {}
|
||||||
|
|
||||||
@Get()
|
@Get()
|
||||||
getProjects() {
|
getProjects(@Query('visibility') visibility?: 'public' | 'private') {
|
||||||
return this.projectsService.getProjects();
|
return this.projectsService.getProjects(visibility);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Get(':id')
|
@Get(':id')
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { PrismaService } from '../prisma/prisma.service';
|
|||||||
import { GiteaService } from '../gitea/gitea.service';
|
import { GiteaService } from '../gitea/gitea.service';
|
||||||
|
|
||||||
type QaStatus = 'passed' | 'failed' | 'unknown';
|
type QaStatus = 'passed' | 'failed' | 'unknown';
|
||||||
|
type ProjectVisibility = 'public' | 'private';
|
||||||
type ProjectPhase =
|
type ProjectPhase =
|
||||||
| 'PLANNING'
|
| 'PLANNING'
|
||||||
| 'IMPLEMENT'
|
| 'IMPLEMENT'
|
||||||
@@ -33,9 +34,14 @@ interface ProjectMetaSummary {
|
|||||||
latestDeployAt: string | null;
|
latestDeployAt: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
|
const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/', 'qa/'];
|
||||||
const HOTFIX_PATH_CANDIDATES = ['.plans/hotfix/', '.plans/sprints/'];
|
const HOTFIX_PATH_CANDIDATES = [
|
||||||
const SPRINT_PATH = '.plans/sprints/';
|
'.plans/hotfix/',
|
||||||
|
'.hotfix/',
|
||||||
|
'.plans/sprints/',
|
||||||
|
];
|
||||||
|
const SPRINT_PATH_CANDIDATES = ['.plans/sprints/', 'sprints/'];
|
||||||
|
const ASSIGNED_NODE_ORDER = ['harang', 'narang', 'darang', 'erang'] as const;
|
||||||
|
|
||||||
function normalizeRepoName(repoUrl: string): string {
|
function normalizeRepoName(repoUrl: string): string {
|
||||||
return repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
|
return repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
|
||||||
@@ -187,20 +193,21 @@ export class ProjectsService {
|
|||||||
private readonly gitea: GiteaService,
|
private readonly gitea: GiteaService,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async getProjects() {
|
async getProjects(visibilityFilter?: ProjectVisibility) {
|
||||||
const dbProjects = await this.prisma.project.findMany({
|
const dbProjects = await this.prisma.project.findMany({
|
||||||
include: { sprints: { include: { tasks: true } } },
|
include: { sprints: { include: { tasks: true } } },
|
||||||
orderBy: { updatedAt: 'desc' },
|
orderBy: { updatedAt: 'desc' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const [repoMetaMap, repoDocsMap] = await Promise.all([
|
const [{ repoMetaMap, sourceAvailable }, repoDocsMap] = await Promise.all([
|
||||||
this.getRepoMetaMap(),
|
this.getRepoMetaMap(),
|
||||||
this.getRepoDocumentMap(
|
this.getRepoDocumentMap(
|
||||||
dbProjects.map((project) => normalizeRepoName(project.repoUrl)),
|
dbProjects.map((project) => normalizeRepoName(project.repoUrl)),
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return dbProjects.map((project) => {
|
return dbProjects
|
||||||
|
.map((project) => {
|
||||||
const totalSprints = project.sprints.length;
|
const totalSprints = project.sprints.length;
|
||||||
const doneSprints = project.sprints.filter(
|
const doneSprints = project.sprints.filter(
|
||||||
(sprint) => sprint.status === 'done',
|
(sprint) => sprint.status === 'done',
|
||||||
@@ -233,6 +240,15 @@ export class ProjectsService {
|
|||||||
updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
|
updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (visibilityFilter) {
|
||||||
|
if (!sourceAvailable || !repoMeta?.visibility) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (repoMeta.visibility !== visibilityFilter) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: project.id,
|
id: project.id,
|
||||||
giteaId: project.giteaId,
|
giteaId: project.giteaId,
|
||||||
@@ -262,7 +278,10 @@ export class ProjectsService {
|
|||||||
redeployRequired: meta.redeployRequired,
|
redeployRequired: meta.redeployRequired,
|
||||||
latestDeployAt: meta.latestDeployAt,
|
latestDeployAt: meta.latestDeployAt,
|
||||||
};
|
};
|
||||||
});
|
})
|
||||||
|
.filter(
|
||||||
|
(project): project is NonNullable<typeof project> => project !== null,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async getProjectById(id: number) {
|
async getProjectById(id: number) {
|
||||||
@@ -327,6 +346,15 @@ export class ProjectsService {
|
|||||||
note: 'ERANG: LATEST MAIN REDEPLOY ONLY',
|
note: 'ERANG: LATEST MAIN REDEPLOY ONLY',
|
||||||
},
|
},
|
||||||
latestHotfix: docs.hotfixes.at(-1) ?? null,
|
latestHotfix: docs.hotfixes.at(-1) ?? null,
|
||||||
|
assignedNodes: ASSIGNED_NODE_ORDER.map((name) => ({
|
||||||
|
name,
|
||||||
|
role: name,
|
||||||
|
assigned:
|
||||||
|
activeSprint?.tasks.some((task) => task.assignee === name) ??
|
||||||
|
project.sprints.some((sprint) =>
|
||||||
|
sprint.tasks.some((task) => task.assignee === name),
|
||||||
|
),
|
||||||
|
})),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -350,7 +378,7 @@ export class ProjectsService {
|
|||||||
const repoName = normalizeRepoName(project.repoUrl);
|
const repoName = normalizeRepoName(project.repoUrl);
|
||||||
const docs = await this.collectRepoDocuments(repoName);
|
const docs = await this.collectRepoDocuments(repoName);
|
||||||
|
|
||||||
return [...docs.sprints, ...docs.hotfixes]
|
return [...docs.sprints, ...docs.hotfixes, ...docs.qas]
|
||||||
.filter(isRepoDocumentMeta)
|
.filter(isRepoDocumentMeta)
|
||||||
.sort((a, b) => a.order - b.order);
|
.sort((a, b) => a.order - b.order);
|
||||||
}
|
}
|
||||||
@@ -365,20 +393,27 @@ export class ProjectsService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async getRepoMetaMap() {
|
private async getRepoMetaMap() {
|
||||||
const repoMetaMap: Record<number, { openPRs: number; updatedAt: string }> =
|
const repoMetaMap: Record<
|
||||||
{};
|
number,
|
||||||
|
{ openPRs: number; updatedAt: string; visibility: ProjectVisibility }
|
||||||
|
> = {};
|
||||||
|
let sourceAvailable = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const repos = await this.gitea.getOrgRepos();
|
const repos = await this.gitea.getOrgRepos();
|
||||||
|
sourceAvailable = repos.length > 0;
|
||||||
for (const repo of repos) {
|
for (const repo of repos) {
|
||||||
repoMetaMap[repo.id] = {
|
repoMetaMap[repo.id] = {
|
||||||
openPRs: repo.open_pr_counter,
|
openPRs: repo.open_pr_counter,
|
||||||
updatedAt: repo.updated_at,
|
updatedAt: repo.updated_at,
|
||||||
|
visibility: repo.private ? 'private' : 'public',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
this.logger.warn('Gitea unavailable, using DB data only');
|
this.logger.warn('Gitea unavailable, using DB data only');
|
||||||
}
|
}
|
||||||
return repoMetaMap;
|
|
||||||
|
return { repoMetaMap, sourceAvailable };
|
||||||
}
|
}
|
||||||
|
|
||||||
private async getRepoDocumentMap(repoNames: string[]) {
|
private async getRepoDocumentMap(repoNames: string[]) {
|
||||||
@@ -393,8 +428,13 @@ export class ProjectsService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async collectRepoDocuments(repoName: string) {
|
private async collectRepoDocuments(repoName: string) {
|
||||||
const [sprintPaths, hotfixPathGroups, qaPathGroups] = await Promise.all([
|
const [sprintPathGroups, hotfixPathGroups, qaPathGroups] =
|
||||||
this.gitea.getRepoTree(repoName, SPRINT_PATH),
|
await Promise.all([
|
||||||
|
Promise.all(
|
||||||
|
SPRINT_PATH_CANDIDATES.map((path) =>
|
||||||
|
this.gitea.getRepoTree(repoName, path),
|
||||||
|
),
|
||||||
|
),
|
||||||
Promise.all(
|
Promise.all(
|
||||||
HOTFIX_PATH_CANDIDATES.map((path) =>
|
HOTFIX_PATH_CANDIDATES.map((path) =>
|
||||||
this.gitea.getRepoTree(repoName, path),
|
this.gitea.getRepoTree(repoName, path),
|
||||||
@@ -407,8 +447,10 @@ export class ProjectsService {
|
|||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const sprintFiles = sprintPaths.filter((path) =>
|
const sprintFiles = Array.from(
|
||||||
/SPRINT-\d+\.md$/i.test(path),
|
new Set(
|
||||||
|
sprintPathGroups.flat().filter((path) => /SPRINT-\d+\.md$/i.test(path)),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
const hotfixFiles = Array.from(
|
const hotfixFiles = Array.from(
|
||||||
new Set(
|
new Set(
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ describe('SisterDetailService', () => {
|
|||||||
|
|
||||||
expect(result.name).toBe('narang');
|
expect(result.name).toBe('narang');
|
||||||
expect(result.role).toBe('Generator');
|
expect(result.role).toBe('Generator');
|
||||||
expect(result.raw).toContain('SSH 연결 불가');
|
expect(result.configAvailable).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('getSisterConfig: sister 없으면 NotFoundException', async () => {
|
it('getSisterConfig: sister 없으면 NotFoundException', async () => {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Injectable, Logger, NotFoundException } from '@nestjs/common';
|
import { Injectable, Logger, NotFoundException } from '@nestjs/common';
|
||||||
import { ConfigService } from '@nestjs/config';
|
|
||||||
import { PrismaService } from '../prisma/prisma.service';
|
import { PrismaService } from '../prisma/prisma.service';
|
||||||
import { SshService } from './ssh.service';
|
import { SshService } from './ssh.service';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
|
||||||
type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
|
type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
|
||||||
|
|
||||||
@@ -20,15 +20,6 @@ const SISTER_DESCRIPTIONS: Record<SisterName, string> = {
|
|||||||
erang: '인프라와 배포. 서버 관리, merge, 프로덕션 배포를 담당한다.',
|
erang: '인프라와 배포. 서버 관리, merge, 프로덕션 배포를 담당한다.',
|
||||||
};
|
};
|
||||||
|
|
||||||
function summarizeText(value?: string | null, maxLength = 120): string | null {
|
|
||||||
if (!value) return null;
|
|
||||||
|
|
||||||
const compact = value.replace(/\s+/g, ' ').trim();
|
|
||||||
if (!compact) return null;
|
|
||||||
if (compact.length <= maxLength) return compact;
|
|
||||||
return `${compact.slice(0, maxLength - 1)}…`;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class SisterDetailService {
|
export class SisterDetailService {
|
||||||
private readonly logger = new Logger(SisterDetailService.name);
|
private readonly logger = new Logger(SisterDetailService.name);
|
||||||
@@ -48,36 +39,21 @@ export class SisterDetailService {
|
|||||||
sister.ip,
|
sister.ip,
|
||||||
sister.user,
|
sister.user,
|
||||||
sshKeyPath,
|
sshKeyPath,
|
||||||
'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; for FILE in SOUL.md AGENTS.md; do if [ -f "$WORKSPACE/$FILE" ]; then printf "%s|present|%s\n" "$FILE" "$(wc -l < "$WORKSPACE/$FILE" 2>/dev/null || echo 0)"; else printf "%s|missing|0\n" "$FILE"; fi; done',
|
'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; cat "$WORKSPACE"/SOUL.md 2>/dev/null | head -60; echo "---AGENTS---"; cat "$WORKSPACE"/AGENTS.md 2>/dev/null | head -40',
|
||||||
);
|
);
|
||||||
|
|
||||||
const files = result.stdout
|
|
||||||
.split('\n')
|
|
||||||
.map((line) => line.trim())
|
|
||||||
.filter((line) => line.length > 0)
|
|
||||||
.map((line) => {
|
|
||||||
const [file, status, lineCount] = line.split('|');
|
|
||||||
return {
|
|
||||||
file,
|
|
||||||
status,
|
|
||||||
lineCount: Number.parseInt(lineCount ?? '0', 10) || 0,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
role: SISTER_ROLES[name],
|
role: SISTER_ROLES[name],
|
||||||
description: SISTER_DESCRIPTIONS[name],
|
description: SISTER_DESCRIPTIONS[name],
|
||||||
files,
|
configAvailable: Boolean(result.stdout.trim()),
|
||||||
summary: `${files.filter((file) => file.status === 'present').length}/${files.length} protected config files detected`,
|
|
||||||
};
|
};
|
||||||
} catch {
|
} catch {
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
role: SISTER_ROLES[name],
|
role: SISTER_ROLES[name],
|
||||||
description: SISTER_DESCRIPTIONS[name],
|
description: SISTER_DESCRIPTIONS[name],
|
||||||
files: [],
|
configAvailable: false,
|
||||||
summary: '(SSH 연결 불가)',
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -91,37 +67,23 @@ export class SisterDetailService {
|
|||||||
sister.ip,
|
sister.ip,
|
||||||
sister.user,
|
sister.user,
|
||||||
sshKeyPath,
|
sshKeyPath,
|
||||||
'SESSION_DIR=~/.hermes/agents/main/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/agents/main/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
|
'SESSION_DIR=~/.hermes/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/sessions; find "$SESSION_DIR" -maxdepth 1 -type f -printf "%TY-%Tm-%Td %TH:%TM|%s|%f\n" 2>/dev/null | sort -r | head -20 || echo ""',
|
||||||
);
|
);
|
||||||
|
|
||||||
const sessions = result.stdout
|
const lines = result.stdout.split('\n').filter((line) => line.trim());
|
||||||
.split('\n')
|
return lines
|
||||||
.filter((line) => line && !line.startsWith('total'))
|
|
||||||
.map((line) => {
|
.map((line) => {
|
||||||
const parts = line.trim().split(/\s+/);
|
const [modified = '', size = '0', file = ''] = line.split('|');
|
||||||
const label = parts[parts.length - 1] ?? '';
|
|
||||||
const modified = parts.slice(5, 8).join(' ');
|
|
||||||
const size = parts[4] ?? '0';
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: label,
|
id: file,
|
||||||
label,
|
label: file,
|
||||||
status: [modified, size !== '0' ? `${size}B` : null]
|
title: file,
|
||||||
.filter((part): part is string => Boolean(part))
|
status: `${size}B · ${modified}`,
|
||||||
.join(' · '),
|
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
.filter((session) => session.label.length > 0);
|
.filter((session) => session.id && session.id !== '');
|
||||||
|
|
||||||
return {
|
|
||||||
sessions,
|
|
||||||
total: sessions.length,
|
|
||||||
};
|
|
||||||
} catch {
|
} catch {
|
||||||
return {
|
return [];
|
||||||
sessions: [],
|
|
||||||
total: 0,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -137,25 +99,15 @@ export class SisterDetailService {
|
|||||||
'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
|
'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
|
||||||
);
|
);
|
||||||
|
|
||||||
const items = result.stdout
|
const agents = result.stdout
|
||||||
.split('\n')
|
.split('\n')
|
||||||
.map((line) => line.trim())
|
.filter((l) => l.trim().endsWith('.md'));
|
||||||
.filter((line) => line.endsWith('.md'))
|
return agents.map((a) => ({
|
||||||
.map((file) => ({
|
name: a.trim().replace('.md', ''),
|
||||||
id: file.replace('.md', ''),
|
file: a.trim(),
|
||||||
label: file.replace('.md', ''),
|
|
||||||
file,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return {
|
|
||||||
items,
|
|
||||||
total: items.length,
|
|
||||||
};
|
|
||||||
} catch {
|
} catch {
|
||||||
return {
|
return [];
|
||||||
items: [],
|
|
||||||
total: 0,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,16 +121,34 @@ export class SisterDetailService {
|
|||||||
}),
|
}),
|
||||||
this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
|
this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
|
||||||
]);
|
]);
|
||||||
|
return { items: logs, total };
|
||||||
|
}
|
||||||
|
|
||||||
|
async getSisterLogs(name: SisterName, lines = 100) {
|
||||||
|
const sister = await this.getSisterRecord(name);
|
||||||
|
const sshKeyPath = this.getKeyPath();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await this.ssh.executeCommand(
|
||||||
|
sister.ip,
|
||||||
|
sister.user,
|
||||||
|
sshKeyPath,
|
||||||
|
`journalctl --user -u hermes-agent --no-pager -n ${lines} 2>/dev/null || journalctl --user -u hermes-gateway --no-pager -n ${lines} 2>/dev/null || journalctl --user -u openclaw-gateway --no-pager -n ${lines} 2>/dev/null || tail -n ${lines} ~/.hermes/logs/gateway.log 2>/dev/null || tail -n ${lines} ~/.openclaw/logs/gateway.log 2>/dev/null || echo "(로그 없음)"`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const output = result.stdout
|
||||||
|
.split('\n')
|
||||||
|
.map((line) => line.trimEnd())
|
||||||
|
.filter((line) => line.length > 0);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
items: logs.map((log) => ({
|
name,
|
||||||
id: log.id,
|
lines: output.length > 0 ? output : ['(로그 없음)'],
|
||||||
action: log.action,
|
total: output.length > 0 ? output.length : 1,
|
||||||
detail: summarizeText(log.detail),
|
|
||||||
createdAt: log.createdAt,
|
|
||||||
})),
|
|
||||||
total,
|
|
||||||
};
|
};
|
||||||
|
} catch {
|
||||||
|
return { name, lines: ['(로그 조회 실패)'], total: 1 };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async getOrgData() {
|
async getOrgData() {
|
||||||
@@ -213,8 +183,8 @@ export class SisterDetailService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private getKeyPath(): string {
|
private getKeyPath(): string {
|
||||||
const path = this.config.get<string>('SSH_KEY_PATH');
|
const p = this.config.get<string>('SSH_KEY_PATH');
|
||||||
if (!path) throw new Error('SSH_KEY_PATH is not set');
|
if (!p) throw new Error('SSH_KEY_PATH is not set');
|
||||||
return path;
|
return p;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,12 @@
|
|||||||
import {
|
import { Controller, Get, Param, Res } from '@nestjs/common';
|
||||||
Body,
|
|
||||||
Controller,
|
|
||||||
Get,
|
|
||||||
Param,
|
|
||||||
Post,
|
|
||||||
Res,
|
|
||||||
UseGuards,
|
|
||||||
} from '@nestjs/common';
|
|
||||||
import type { Response } from 'express';
|
import type { Response } from 'express';
|
||||||
import { JwtGuard } from '../auth/jwt.guard';
|
import { SistersService } from './sisters.service';
|
||||||
import { RoleGuard, Roles } from '../auth/role.guard';
|
import { SisterDetailService } from './sister-detail.service';
|
||||||
import { SisterNamePipe } from '../common/sister-name.pipe';
|
import { SisterNamePipe } from '../common/sister-name.pipe';
|
||||||
import type { SisterName } from '../common/sister-name.pipe';
|
import type { SisterName } from '../common/sister-name.pipe';
|
||||||
import { AvatarService } from './avatar.service';
|
import { AvatarService } from './avatar.service';
|
||||||
import { SisterDetailService } from './sister-detail.service';
|
|
||||||
import { SistersService } from './sisters.service';
|
|
||||||
|
|
||||||
@Controller('api/sisters')
|
@Controller('api/sisters')
|
||||||
@UseGuards(JwtGuard, RoleGuard)
|
|
||||||
@Roles('admin', 'viewer')
|
|
||||||
export class SistersController {
|
export class SistersController {
|
||||||
constructor(
|
constructor(
|
||||||
private readonly sistersService: SistersService,
|
private readonly sistersService: SistersService,
|
||||||
@@ -26,51 +14,14 @@ export class SistersController {
|
|||||||
private readonly avatarService: AvatarService,
|
private readonly avatarService: AvatarService,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
@Get('runtime')
|
|
||||||
async getSistersRuntime() {
|
|
||||||
return this.sistersService.getAllSistersRuntime();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Get()
|
@Get()
|
||||||
async getSistersStatus() {
|
async getSistersStatus() {
|
||||||
const sisters = await this.sistersService.getAllSistersStatus();
|
return this.sistersService.getAllSistersStatus();
|
||||||
|
|
||||||
return sisters.map(({ id, name, lxcId, role, status, lastSeen, currentTask }) => ({
|
|
||||||
id,
|
|
||||||
name,
|
|
||||||
lxcId,
|
|
||||||
role,
|
|
||||||
status,
|
|
||||||
lastSeen,
|
|
||||||
currentTask,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
@Get(':name/runtime')
|
|
||||||
async getSisterRuntime(@Param('name', SisterNamePipe) name: SisterName) {
|
|
||||||
return this.sistersService.getSisterRuntime(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
@UseGuards(JwtGuard)
|
|
||||||
@Post(':name/chat')
|
|
||||||
async chatWithSister(
|
|
||||||
@Param('name', SisterNamePipe) name: SisterName,
|
|
||||||
@Body('message') message: string,
|
|
||||||
) {
|
|
||||||
return this.sistersService.sendChatMessage(name, message);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Get(':name/system')
|
@Get(':name/system')
|
||||||
async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
|
async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
|
||||||
const system = await this.sistersService.getSystemInfo(name);
|
return this.sistersService.getSystemInfo(name);
|
||||||
if (!system) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
uptime: system.uptime,
|
|
||||||
cpu: system.cpu,
|
|
||||||
memory: system.memory,
|
|
||||||
disk: system.disk,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Get(':name/avatar')
|
@Get(':name/avatar')
|
||||||
@@ -85,29 +36,25 @@ export class SistersController {
|
|||||||
|
|
||||||
const avatar = await this.avatarService.getAvatar(sister);
|
const avatar = await this.avatarService.getAvatar(sister);
|
||||||
res.setHeader('Content-Type', avatar.contentType);
|
res.setHeader('Content-Type', avatar.contentType);
|
||||||
res.setHeader('Cache-Control', 'private, max-age=300');
|
res.setHeader('Cache-Control', 'public, max-age=300');
|
||||||
return res.send(avatar.data);
|
return res.send(avatar.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Roles('admin')
|
|
||||||
@Get(':name/config')
|
@Get(':name/config')
|
||||||
async getSisterConfig(@Param('name', SisterNamePipe) name: SisterName) {
|
async getSisterConfig(@Param('name', SisterNamePipe) name: SisterName) {
|
||||||
return this.sisterDetail.getSisterConfig(name);
|
return this.sisterDetail.getSisterConfig(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Roles('admin')
|
|
||||||
@Get(':name/sessions')
|
@Get(':name/sessions')
|
||||||
async getSisterSessions(@Param('name', SisterNamePipe) name: SisterName) {
|
async getSisterSessions(@Param('name', SisterNamePipe) name: SisterName) {
|
||||||
return this.sisterDetail.getSisterSessions(name);
|
return this.sisterDetail.getSisterSessions(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Roles('admin')
|
|
||||||
@Get(':name/subagents')
|
@Get(':name/subagents')
|
||||||
async getSisterSubagents(@Param('name', SisterNamePipe) name: SisterName) {
|
async getSisterSubagents(@Param('name', SisterNamePipe) name: SisterName) {
|
||||||
return this.sisterDetail.getSisterSubagents(name);
|
return this.sisterDetail.getSisterSubagents(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Roles('admin')
|
|
||||||
@Get(':name/activity')
|
@Get(':name/activity')
|
||||||
async getSisterActivity(@Param('name', SisterNamePipe) name: SisterName) {
|
async getSisterActivity(@Param('name', SisterNamePipe) name: SisterName) {
|
||||||
return this.sisterDetail.getSisterActivityLog(name);
|
return this.sisterDetail.getSisterActivityLog(name);
|
||||||
|
|||||||
@@ -1,17 +1,16 @@
|
|||||||
import { Module } from '@nestjs/common';
|
import { Module } from '@nestjs/common';
|
||||||
import { SistersController } from './sisters.controller';
|
import { SistersController } from './sisters.controller';
|
||||||
import { SistersService } from './sisters.service';
|
import { SistersService } from './sisters.service';
|
||||||
|
import { SisterDetailService } from './sister-detail.service';
|
||||||
import { SshService } from './ssh.service';
|
import { SshService } from './ssh.service';
|
||||||
import { PrismaModule } from '../prisma/prisma.module';
|
import { PrismaModule } from '../prisma/prisma.module';
|
||||||
import { SisterDetailService } from './sister-detail.service';
|
import { ConfigModule } from '@nestjs/config';
|
||||||
import { AvatarService } from './avatar.service';
|
import { AvatarService } from './avatar.service';
|
||||||
import { ActivityModule } from '../activity/activity.module';
|
|
||||||
import { AuthModule } from '../auth/auth.module';
|
|
||||||
|
|
||||||
@Module({
|
@Module({
|
||||||
imports: [PrismaModule, ActivityModule, AuthModule],
|
imports: [PrismaModule, ConfigModule],
|
||||||
controllers: [SistersController],
|
controllers: [SistersController],
|
||||||
providers: [SistersService, SshService, SisterDetailService, AvatarService],
|
providers: [SistersService, SisterDetailService, SshService, AvatarService],
|
||||||
exports: [SistersService, SshService, SisterDetailService, AvatarService],
|
exports: [SistersService, SisterDetailService, SshService, AvatarService],
|
||||||
})
|
})
|
||||||
export class SistersModule {}
|
export class SistersModule {}
|
||||||
|
|||||||
@@ -1,72 +1,9 @@
|
|||||||
import {
|
import { Injectable, Logger, Optional } from '@nestjs/common';
|
||||||
BadRequestException,
|
|
||||||
Injectable,
|
|
||||||
Logger,
|
|
||||||
Optional,
|
|
||||||
} from '@nestjs/common';
|
|
||||||
import { PrismaService } from '../prisma/prisma.service';
|
import { PrismaService } from '../prisma/prisma.service';
|
||||||
import { SshService } from './ssh.service';
|
import { SshService } from './ssh.service';
|
||||||
import { ConfigService } from '@nestjs/config';
|
import { ConfigService } from '@nestjs/config';
|
||||||
import { ActivityService } from '../activity/activity.service';
|
import { ActivityService } from '../activity/activity.service';
|
||||||
|
|
||||||
export type RuntimeState =
|
|
||||||
| 'idle'
|
|
||||||
| 'thinking'
|
|
||||||
| 'tool_calling'
|
|
||||||
| 'speaking'
|
|
||||||
| 'error';
|
|
||||||
|
|
||||||
export interface RuntimeMessage {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant' | 'tool';
|
|
||||||
content: string;
|
|
||||||
ts: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RuntimeSubagent {
|
|
||||||
name: string;
|
|
||||||
state: RuntimeState;
|
|
||||||
updatedAt: number | null;
|
|
||||||
currentTask: string | null;
|
|
||||||
sessionLabel: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterRuntimeSnapshot {
|
|
||||||
name: string;
|
|
||||||
gatewayConnected: boolean;
|
|
||||||
mainState: RuntimeState;
|
|
||||||
currentTask: string | null;
|
|
||||||
activeSessionLabel: string | null;
|
|
||||||
activeSessionUpdatedAt: number | null;
|
|
||||||
controlSessionKey: string | null;
|
|
||||||
recentMessages: RuntimeMessage[];
|
|
||||||
subagents: RuntimeSubagent[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterConnectionState {
|
|
||||||
gateway: 'connected' | 'disconnected' | 'unknown';
|
|
||||||
runtime: 'connected' | 'disconnected' | 'unknown';
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterActivityState {
|
|
||||||
state: 'active' | 'idle' | 'unknown';
|
|
||||||
label: string | null;
|
|
||||||
lastActiveAt: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterWorkingState {
|
|
||||||
state: 'active' | 'idle' | 'unknown';
|
|
||||||
confidence: 'confirmed' | 'inferred' | 'none';
|
|
||||||
reason: string | null;
|
|
||||||
label: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterFreshness {
|
|
||||||
lastSnapshotAt: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SisterSource = 'live' | 'snapshot' | 'fallback';
|
|
||||||
|
|
||||||
export interface SisterStatus {
|
export interface SisterStatus {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -76,33 +13,6 @@ export interface SisterStatus {
|
|||||||
status: 'online' | 'offline' | 'working' | 'unknown';
|
status: 'online' | 'offline' | 'working' | 'unknown';
|
||||||
lastSeen: Date | null;
|
lastSeen: Date | null;
|
||||||
currentTask: string | null;
|
currentTask: string | null;
|
||||||
liveState: RuntimeState;
|
|
||||||
activeSessionLabel: string | null;
|
|
||||||
gatewayConnected: boolean;
|
|
||||||
subagents: RuntimeSubagent[];
|
|
||||||
connection: SisterConnectionState;
|
|
||||||
activity: SisterActivityState;
|
|
||||||
working: SisterWorkingState;
|
|
||||||
source: SisterSource;
|
|
||||||
freshness: SisterFreshness;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RuntimeProbeResult {
|
|
||||||
gatewayConnected?: boolean;
|
|
||||||
mainState?: RuntimeState;
|
|
||||||
currentTask?: string | null;
|
|
||||||
activeSessionLabel?: string | null;
|
|
||||||
activeSessionUpdatedAt?: number | null;
|
|
||||||
controlSessionKey?: string | null;
|
|
||||||
recentMessages?: RuntimeMessage[];
|
|
||||||
subagents?: RuntimeSubagent[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatSendResult {
|
|
||||||
ok: boolean;
|
|
||||||
status: string;
|
|
||||||
reply: string;
|
|
||||||
raw?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const SISTER_ROLES: Record<string, string> = {
|
const SISTER_ROLES: Record<string, string> = {
|
||||||
@@ -112,17 +22,6 @@ const SISTER_ROLES: Record<string, string> = {
|
|||||||
erang: 'Infra Manager',
|
erang: 'Infra Manager',
|
||||||
};
|
};
|
||||||
|
|
||||||
function runtimeStateToStatus(
|
|
||||||
state: RuntimeState,
|
|
||||||
connected: boolean,
|
|
||||||
): 'online' | 'offline' | 'working' {
|
|
||||||
if (!connected || state === 'error') return 'offline';
|
|
||||||
if (state === 'thinking' || state === 'tool_calling' || state === 'speaking') {
|
|
||||||
return 'working';
|
|
||||||
}
|
|
||||||
return 'online';
|
|
||||||
}
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class SistersService {
|
export class SistersService {
|
||||||
private readonly logger = new Logger(SistersService.name);
|
private readonly logger = new Logger(SistersService.name);
|
||||||
@@ -135,7 +34,7 @@ export class SistersService {
|
|||||||
) {}
|
) {}
|
||||||
|
|
||||||
async getAllSistersStatus(): Promise<SisterStatus[]> {
|
async getAllSistersStatus(): Promise<SisterStatus[]> {
|
||||||
const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
|
const sisters = await this.prisma.sisterConfig.findMany();
|
||||||
const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
|
const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
|
||||||
if (!sshKeyPath) {
|
if (!sshKeyPath) {
|
||||||
throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
|
throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
|
||||||
@@ -150,83 +49,17 @@ export class SistersService {
|
|||||||
return result.value;
|
return result.value;
|
||||||
}
|
}
|
||||||
const sister = sisters[index];
|
const sister = sisters[index];
|
||||||
return this.buildOfflineStatus(sister);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async getAllSistersRuntime(): Promise<SisterRuntimeSnapshot[]> {
|
|
||||||
const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
|
|
||||||
const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
|
|
||||||
if (!sshKeyPath) {
|
|
||||||
throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = await Promise.allSettled(
|
|
||||||
sisters.map(async (sister) => {
|
|
||||||
const runtime = await this.probeRuntime(sister, sshKeyPath, true);
|
|
||||||
return this.withRuntimeName(sister.name, runtime);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
return results.map((result, index) => {
|
|
||||||
if (result.status === 'fulfilled') return result.value;
|
|
||||||
return this.buildRuntimeFallback(sisters[index].name);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async getSisterRuntime(name: string): Promise<SisterRuntimeSnapshot> {
|
|
||||||
const sister = await this.findByName(name);
|
|
||||||
if (!sister) throw new Error(`Sister ${name} not found`);
|
|
||||||
|
|
||||||
const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
|
|
||||||
if (!sshKeyPath) {
|
|
||||||
throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const runtime = await this.probeRuntime(sister, sshKeyPath, true);
|
|
||||||
return this.withRuntimeName(sister.name, runtime);
|
|
||||||
} catch {
|
|
||||||
return this.buildRuntimeFallback(sister.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendChatMessage(name: string, message: string) {
|
|
||||||
const trimmed = message.trim();
|
|
||||||
if (!trimmed) {
|
|
||||||
throw new BadRequestException('message is required');
|
|
||||||
}
|
|
||||||
|
|
||||||
const sister = await this.findByName(name);
|
|
||||||
if (!sister) throw new Error(`Sister ${name} not found`);
|
|
||||||
|
|
||||||
const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
|
|
||||||
if (!sshKeyPath) {
|
|
||||||
throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const sendResult = await this.ssh.executeCommand(
|
|
||||||
sister.ip,
|
|
||||||
sister.user,
|
|
||||||
sshKeyPath,
|
|
||||||
this.buildAgentSendCommand(trimmed),
|
|
||||||
);
|
|
||||||
|
|
||||||
const parsed = this.parseRemoteJson<ChatSendResult>(sendResult.stdout);
|
|
||||||
if (!parsed?.ok) {
|
|
||||||
throw new Error(parsed?.raw || 'Failed to send message to sister runtime');
|
|
||||||
}
|
|
||||||
|
|
||||||
const runtime = await this.getSisterRuntime(name).catch(() =>
|
|
||||||
this.buildRuntimeFallback(name),
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
ok: true,
|
id: sister.id,
|
||||||
reply: parsed.reply,
|
name: sister.name,
|
||||||
status: parsed.status,
|
user: sister.user,
|
||||||
runtime,
|
lxcId: sister.lxcId,
|
||||||
|
role: SISTER_ROLES[sister.name] ?? 'Unknown',
|
||||||
|
status: 'offline' as const,
|
||||||
|
lastSeen: sister.lastSeen,
|
||||||
|
currentTask: null,
|
||||||
};
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async findByName(name: string) {
|
async findByName(name: string) {
|
||||||
@@ -305,17 +138,21 @@ export class SistersService {
|
|||||||
sshKeyPath: string,
|
sshKeyPath: string,
|
||||||
): Promise<SisterStatus> {
|
): Promise<SisterStatus> {
|
||||||
try {
|
try {
|
||||||
const runtime = await this.probeRuntime(sister, sshKeyPath, false);
|
const result = await this.ssh.executeCommand(
|
||||||
const gatewayConnected = Boolean(runtime.gatewayConnected);
|
sister.ip,
|
||||||
const liveState = runtime.mainState ?? (gatewayConnected ? 'idle' : 'error');
|
sister.user,
|
||||||
const status = runtimeStateToStatus(liveState, gatewayConnected);
|
sshKeyPath,
|
||||||
|
'if systemctl --user is-active hermes-agent >/dev/null 2>&1; then echo active; elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then echo active; elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then echo active; elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then echo active; else echo inactive; fi',
|
||||||
|
);
|
||||||
|
|
||||||
|
const isActive = result.stdout.trim() === 'active';
|
||||||
|
const status: 'online' | 'offline' = isActive ? 'online' : 'offline';
|
||||||
const prevStatus = sister.status;
|
const prevStatus = sister.status;
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const lastSeen = gatewayConnected ? now : sister.lastSeen;
|
|
||||||
|
|
||||||
await this.prisma.sisterConfig.update({
|
await this.prisma.sisterConfig.update({
|
||||||
where: { id: sister.id },
|
where: { id: sister.id },
|
||||||
data: { lastSeen, status },
|
data: { lastSeen: isActive ? now : sister.lastSeen, status },
|
||||||
});
|
});
|
||||||
|
|
||||||
if (prevStatus !== status && this.activity) {
|
if (prevStatus !== status && this.activity) {
|
||||||
@@ -328,8 +165,6 @@ export class SistersService {
|
|||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
const isActive = liveState === 'thinking' || liveState === 'tool_calling' || liveState === 'speaking';
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: sister.id,
|
id: sister.id,
|
||||||
name: sister.name,
|
name: sister.name,
|
||||||
@@ -337,87 +172,11 @@ export class SistersService {
|
|||||||
lxcId: sister.lxcId,
|
lxcId: sister.lxcId,
|
||||||
role: SISTER_ROLES[sister.name] ?? 'Unknown',
|
role: SISTER_ROLES[sister.name] ?? 'Unknown',
|
||||||
status,
|
status,
|
||||||
lastSeen,
|
lastSeen: isActive ? now : sister.lastSeen,
|
||||||
currentTask: runtime.currentTask ?? null,
|
currentTask: null,
|
||||||
liveState,
|
|
||||||
activeSessionLabel: runtime.activeSessionLabel ?? null,
|
|
||||||
gatewayConnected,
|
|
||||||
subagents: runtime.subagents ?? [],
|
|
||||||
connection: {
|
|
||||||
gateway: gatewayConnected ? 'connected' : 'disconnected',
|
|
||||||
runtime: gatewayConnected ? 'connected' : 'disconnected',
|
|
||||||
},
|
|
||||||
activity: {
|
|
||||||
state: isActive ? 'active' : 'idle',
|
|
||||||
label: runtime.activeSessionLabel ?? (isActive ? 'Active session' : 'No recent operator event'),
|
|
||||||
lastActiveAt: now.toISOString(),
|
|
||||||
},
|
|
||||||
working: {
|
|
||||||
state: isActive ? 'active' : 'idle',
|
|
||||||
confidence: isActive ? 'confirmed' : 'none',
|
|
||||||
reason: isActive ? 'active_session' : null,
|
|
||||||
label: runtime.currentTask ?? null,
|
|
||||||
},
|
|
||||||
source: 'live' as SisterSource,
|
|
||||||
freshness: {
|
|
||||||
lastSnapshotAt: now.toISOString(),
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
} catch {
|
} catch {
|
||||||
this.logger.warn(`Failed to check status for ${sister.name}`);
|
this.logger.warn(`Failed to check status for ${sister.name}`);
|
||||||
return this.buildOfflineStatus(sister);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async probeRuntime(
|
|
||||||
sister: { name: string; ip: string; user: string },
|
|
||||||
sshKeyPath: string,
|
|
||||||
includeMessages: boolean,
|
|
||||||
): Promise<RuntimeProbeResult> {
|
|
||||||
const result = await this.ssh.executeCommand(
|
|
||||||
sister.ip,
|
|
||||||
sister.user,
|
|
||||||
sshKeyPath,
|
|
||||||
this.buildRuntimeProbeCommand(includeMessages),
|
|
||||||
);
|
|
||||||
|
|
||||||
const parsed = this.parseRemoteJson<RuntimeProbeResult>(result.stdout);
|
|
||||||
if (parsed) {
|
|
||||||
return parsed;
|
|
||||||
}
|
|
||||||
|
|
||||||
const legacy = this.parseLegacyRuntimeResult(result.stdout);
|
|
||||||
if (legacy) {
|
|
||||||
return legacy;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`Runtime probe returned invalid JSON for ${sister.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
private withRuntimeName(
|
|
||||||
name: string,
|
|
||||||
runtime: RuntimeProbeResult,
|
|
||||||
): SisterRuntimeSnapshot {
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
gatewayConnected: Boolean(runtime.gatewayConnected),
|
|
||||||
mainState: runtime.mainState ?? 'error',
|
|
||||||
currentTask: runtime.currentTask ?? null,
|
|
||||||
activeSessionLabel: runtime.activeSessionLabel ?? null,
|
|
||||||
activeSessionUpdatedAt: runtime.activeSessionUpdatedAt ?? null,
|
|
||||||
controlSessionKey: runtime.controlSessionKey ?? null,
|
|
||||||
recentMessages: runtime.recentMessages ?? [],
|
|
||||||
subagents: runtime.subagents ?? [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildOfflineStatus(sister: {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
user: string;
|
|
||||||
lxcId: number;
|
|
||||||
lastSeen: Date | null;
|
|
||||||
}): SisterStatus {
|
|
||||||
return {
|
return {
|
||||||
id: sister.id,
|
id: sister.id,
|
||||||
name: sister.name,
|
name: sister.name,
|
||||||
@@ -427,396 +186,8 @@ export class SistersService {
|
|||||||
status: 'offline',
|
status: 'offline',
|
||||||
lastSeen: sister.lastSeen,
|
lastSeen: sister.lastSeen,
|
||||||
currentTask: null,
|
currentTask: null,
|
||||||
liveState: 'error',
|
|
||||||
activeSessionLabel: null,
|
|
||||||
gatewayConnected: false,
|
|
||||||
subagents: [],
|
|
||||||
connection: {
|
|
||||||
gateway: 'disconnected',
|
|
||||||
runtime: 'disconnected',
|
|
||||||
},
|
|
||||||
activity: {
|
|
||||||
state: 'unknown',
|
|
||||||
label: null,
|
|
||||||
lastActiveAt: sister.lastSeen?.toISOString() ?? null,
|
|
||||||
},
|
|
||||||
working: {
|
|
||||||
state: 'unknown',
|
|
||||||
confidence: 'none',
|
|
||||||
reason: null,
|
|
||||||
label: null,
|
|
||||||
},
|
|
||||||
source: 'snapshot' as SisterSource,
|
|
||||||
freshness: {
|
|
||||||
lastSnapshotAt: sister.lastSeen?.toISOString() ?? null,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private buildRuntimeFallback(name: string): SisterRuntimeSnapshot {
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
gatewayConnected: false,
|
|
||||||
mainState: 'error',
|
|
||||||
currentTask: null,
|
|
||||||
activeSessionLabel: null,
|
|
||||||
activeSessionUpdatedAt: null,
|
|
||||||
controlSessionKey: null,
|
|
||||||
recentMessages: [],
|
|
||||||
subagents: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
private parseRemoteJson<T>(stdout: string): T | null {
|
|
||||||
const trimmed = stdout.trim();
|
|
||||||
const start = trimmed.indexOf('{');
|
|
||||||
const end = trimmed.lastIndexOf('}');
|
|
||||||
if (start === -1 || end === -1 || end <= start) return null;
|
|
||||||
|
|
||||||
try {
|
|
||||||
return JSON.parse(trimmed.slice(start, end + 1)) as T;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private parseLegacyRuntimeResult(stdout: string): RuntimeProbeResult | null {
|
|
||||||
const trimmed = stdout.trim();
|
|
||||||
if (trimmed === 'active') {
|
|
||||||
return {
|
|
||||||
gatewayConnected: true,
|
|
||||||
mainState: 'idle',
|
|
||||||
currentTask: null,
|
|
||||||
activeSessionLabel: null,
|
|
||||||
activeSessionUpdatedAt: null,
|
|
||||||
controlSessionKey: null,
|
|
||||||
recentMessages: [],
|
|
||||||
subagents: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trimmed === 'inactive') {
|
|
||||||
return {
|
|
||||||
gatewayConnected: false,
|
|
||||||
mainState: 'error',
|
|
||||||
currentTask: null,
|
|
||||||
activeSessionLabel: null,
|
|
||||||
activeSessionUpdatedAt: null,
|
|
||||||
controlSessionKey: null,
|
|
||||||
recentMessages: [],
|
|
||||||
subagents: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildRuntimeProbeCommand(includeMessages: boolean): string {
|
|
||||||
return `
|
|
||||||
GATEWAY_CONNECTED=0
|
|
||||||
if systemctl --user is-active hermes-agent >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
|
|
||||||
elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
|
|
||||||
elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
|
|
||||||
elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
|
|
||||||
elif pgrep -f "openclaw.*gateway|openclaw.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; fi
|
|
||||||
export GATEWAY_CONNECTED
|
|
||||||
if command -v python3 >/dev/null 2>&1; then
|
|
||||||
python3 - <<'PY'
|
|
||||||
import json
|
|
||||||
import os
|
|
||||||
from pathlib import Path
|
|
||||||
|
|
||||||
INCLUDE_MESSAGES = ${includeMessages ? 'True' : 'False'}
|
|
||||||
MESSAGE_LIMIT = ${includeMessages ? '12' : '0'}
|
|
||||||
|
|
||||||
|
|
||||||
def pick_base():
|
|
||||||
for name in ('.hermes', '.openclaw'):
|
|
||||||
candidate = Path.home() / name
|
|
||||||
if candidate.exists():
|
|
||||||
return candidate
|
|
||||||
return None
|
|
||||||
|
|
||||||
|
|
||||||
def load_json(path: Path):
|
|
||||||
if not path.exists():
|
|
||||||
return {}
|
|
||||||
try:
|
|
||||||
return json.loads(path.read_text(errors='ignore'))
|
|
||||||
except Exception:
|
|
||||||
return {}
|
|
||||||
|
|
||||||
|
|
||||||
def normalize_role(role):
|
|
||||||
if role in ('user', 'assistant'):
|
|
||||||
return role
|
|
||||||
if role in ('tool', 'toolResult'):
|
|
||||||
return 'tool'
|
|
||||||
return None
|
|
||||||
|
|
||||||
|
|
||||||
def extract_text(content):
|
|
||||||
if isinstance(content, str):
|
|
||||||
return content.strip()
|
|
||||||
parts = []
|
|
||||||
if isinstance(content, list):
|
|
||||||
for item in content:
|
|
||||||
if not isinstance(item, dict):
|
|
||||||
continue
|
|
||||||
item_type = item.get('type')
|
|
||||||
text = item.get('text') or item.get('input') or item.get('content') or ''
|
|
||||||
if item_type in ('text', 'input_text', 'output_text') and text:
|
|
||||||
parts.append(str(text).strip())
|
|
||||||
elif item_type == 'tool_call':
|
|
||||||
tool_name = item.get('name') or item.get('toolName') or 'tool'
|
|
||||||
parts.append(f'[{tool_name}]')
|
|
||||||
return ' '.join(part for part in parts if part).strip()
|
|
||||||
|
|
||||||
|
|
||||||
def compact(text, limit=160):
|
|
||||||
normalized = ' '.join((text or '').split())
|
|
||||||
if not normalized:
|
|
||||||
return ''
|
|
||||||
if normalized.startswith('A new session was started via /new or /reset.'):
|
|
||||||
return ''
|
|
||||||
if len(normalized) <= limit:
|
|
||||||
return normalized
|
|
||||||
return normalized[: limit - 1] + '…'
|
|
||||||
|
|
||||||
|
|
||||||
def read_recent_messages(session_file, limit):
|
|
||||||
if not session_file or limit <= 0:
|
|
||||||
return []
|
|
||||||
path = Path(session_file)
|
|
||||||
if not path.exists():
|
|
||||||
return []
|
|
||||||
|
|
||||||
out = []
|
|
||||||
try:
|
|
||||||
lines = path.read_text(errors='ignore').splitlines()
|
|
||||||
except Exception:
|
|
||||||
return []
|
|
||||||
|
|
||||||
for line in reversed(lines):
|
|
||||||
try:
|
|
||||||
payload = json.loads(line)
|
|
||||||
except Exception:
|
|
||||||
continue
|
|
||||||
if payload.get('type') != 'message':
|
|
||||||
continue
|
|
||||||
message = payload.get('message') or {}
|
|
||||||
role = normalize_role(message.get('role'))
|
|
||||||
if not role:
|
|
||||||
continue
|
|
||||||
content = compact(extract_text(message.get('content')))
|
|
||||||
if not content:
|
|
||||||
continue
|
|
||||||
out.append(
|
|
||||||
{
|
|
||||||
'id': str(payload.get('id') or ''),
|
|
||||||
'role': role,
|
|
||||||
'content': content,
|
|
||||||
'ts': payload.get('timestamp') or message.get('timestamp'),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
if len(out) >= limit:
|
|
||||||
break
|
|
||||||
|
|
||||||
out.reverse()
|
|
||||||
return out
|
|
||||||
|
|
||||||
|
|
||||||
def pick_session(index, prefer_key=None):
|
|
||||||
if not isinstance(index, dict) or not index:
|
|
||||||
return None, None
|
|
||||||
if prefer_key and prefer_key in index:
|
|
||||||
return prefer_key, index.get(prefer_key)
|
|
||||||
items = sorted(index.items(), key=lambda item: item[1].get('updatedAt') or 0, reverse=True)
|
|
||||||
return items[0]
|
|
||||||
|
|
||||||
|
|
||||||
def get_label(entry):
|
|
||||||
if not isinstance(entry, dict):
|
|
||||||
return None
|
|
||||||
return entry.get('displayName') or (entry.get('origin') or {}).get('label') or entry.get('lastTo')
|
|
||||||
|
|
||||||
|
|
||||||
def latest_user_text(messages):
|
|
||||||
for item in reversed(messages):
|
|
||||||
if item.get('role') == 'user':
|
|
||||||
return item.get('content')
|
|
||||||
return None
|
|
||||||
|
|
||||||
|
|
||||||
def age_minutes(updated_at):
|
|
||||||
if not updated_at:
|
|
||||||
return 10 ** 9
|
|
||||||
return max(0, (int(__import__('time').time() * 1000) - int(updated_at)) // 60000)
|
|
||||||
|
|
||||||
|
|
||||||
def state_from(entry, messages, connected):
|
|
||||||
if not connected:
|
|
||||||
return 'error'
|
|
||||||
if not isinstance(entry, dict):
|
|
||||||
return 'idle'
|
|
||||||
|
|
||||||
status = entry.get('status') or ''
|
|
||||||
last_role = messages[-1]['role'] if messages else None
|
|
||||||
age_min = age_minutes(entry.get('updatedAt'))
|
|
||||||
|
|
||||||
if status == 'running':
|
|
||||||
if last_role == 'tool':
|
|
||||||
return 'tool_calling'
|
|
||||||
if last_role == 'assistant':
|
|
||||||
return 'speaking'
|
|
||||||
return 'thinking'
|
|
||||||
|
|
||||||
if age_min <= 2:
|
|
||||||
if last_role == 'assistant':
|
|
||||||
return 'speaking'
|
|
||||||
if last_role == 'tool':
|
|
||||||
return 'tool_calling'
|
|
||||||
if last_role == 'user':
|
|
||||||
return 'thinking'
|
|
||||||
|
|
||||||
if age_min <= 15 and last_role == 'assistant':
|
|
||||||
return 'speaking'
|
|
||||||
|
|
||||||
return 'idle'
|
|
||||||
|
|
||||||
|
|
||||||
payload = {
|
|
||||||
'gatewayConnected': os.environ.get('GATEWAY_CONNECTED') == '1',
|
|
||||||
'mainState': 'error',
|
|
||||||
'currentTask': None,
|
|
||||||
'activeSessionLabel': None,
|
|
||||||
'activeSessionUpdatedAt': None,
|
|
||||||
'controlSessionKey': None,
|
|
||||||
'recentMessages': [],
|
|
||||||
'subagents': [],
|
|
||||||
}
|
|
||||||
|
|
||||||
base = pick_base()
|
|
||||||
if not base:
|
|
||||||
print(json.dumps(payload, ensure_ascii=False))
|
|
||||||
raise SystemExit
|
|
||||||
|
|
||||||
agents_root = base / 'agents'
|
|
||||||
main_index = load_json(agents_root / 'main' / 'sessions' / 'sessions.json')
|
|
||||||
active_key, active_entry = pick_session(main_index)
|
|
||||||
control_key, control_entry = pick_session(main_index, 'agent:main:main')
|
|
||||||
active_messages = read_recent_messages((active_entry or {}).get('sessionFile'), 8)
|
|
||||||
control_messages = read_recent_messages(
|
|
||||||
(control_entry or active_entry or {}).get('sessionFile'),
|
|
||||||
MESSAGE_LIMIT if INCLUDE_MESSAGES else 0,
|
|
||||||
)
|
|
||||||
|
|
||||||
payload['mainState'] = state_from(active_entry, active_messages, payload['gatewayConnected'])
|
|
||||||
payload['currentTask'] = latest_user_text(active_messages) or get_label(active_entry)
|
|
||||||
payload['activeSessionLabel'] = get_label(active_entry)
|
|
||||||
payload['activeSessionUpdatedAt'] = (active_entry or {}).get('updatedAt')
|
|
||||||
payload['controlSessionKey'] = control_key or active_key
|
|
||||||
payload['recentMessages'] = control_messages
|
|
||||||
|
|
||||||
subagent_names = set()
|
|
||||||
workspace_agents = base / 'workspace' / 'agents'
|
|
||||||
if workspace_agents.exists():
|
|
||||||
subagent_names.update(path.stem for path in workspace_agents.glob('*.md'))
|
|
||||||
if agents_root.exists():
|
|
||||||
subagent_names.update(
|
|
||||||
path.name for path in agents_root.iterdir() if path.is_dir() and path.name != 'main'
|
|
||||||
)
|
|
||||||
|
|
||||||
for subagent in sorted(subagent_names):
|
|
||||||
sub_index = load_json(agents_root / subagent / 'sessions' / 'sessions.json')
|
|
||||||
_, sub_entry = pick_session(sub_index)
|
|
||||||
sub_messages = read_recent_messages((sub_entry or {}).get('sessionFile'), 4)
|
|
||||||
payload['subagents'].append(
|
|
||||||
{
|
|
||||||
'name': subagent,
|
|
||||||
'state': state_from(sub_entry, sub_messages, payload['gatewayConnected']),
|
|
||||||
'updatedAt': (sub_entry or {}).get('updatedAt'),
|
|
||||||
'currentTask': latest_user_text(sub_messages) or get_label(sub_entry),
|
|
||||||
'sessionLabel': get_label(sub_entry),
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
print(json.dumps(payload, ensure_ascii=False))
|
|
||||||
PY
|
|
||||||
else
|
|
||||||
printf '%s' '{"gatewayConnected":false,"mainState":"error","currentTask":null,"activeSessionLabel":null,"activeSessionUpdatedAt":null,"controlSessionKey":null,"recentMessages":[],"subagents":[]}'
|
|
||||||
fi`.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildAgentSendCommand(message: string): string {
|
|
||||||
const messageB64 = Buffer.from(message, 'utf8').toString('base64');
|
|
||||||
|
|
||||||
return `
|
|
||||||
export MSG_B64='${messageB64}'
|
|
||||||
if command -v python3 >/dev/null 2>&1 && command -v openclaw >/dev/null 2>&1; then
|
|
||||||
python3 - <<'PY'
|
|
||||||
import base64
|
|
||||||
import json
|
|
||||||
import os
|
|
||||||
import subprocess
|
|
||||||
|
|
||||||
message = base64.b64decode(os.environ['MSG_B64']).decode('utf-8')
|
|
||||||
proc = subprocess.run(
|
|
||||||
[
|
|
||||||
'openclaw',
|
|
||||||
'agent',
|
|
||||||
'--agent',
|
|
||||||
'main',
|
|
||||||
'--message',
|
|
||||||
message,
|
|
||||||
'--json',
|
|
||||||
'--timeout',
|
|
||||||
'120',
|
|
||||||
],
|
|
||||||
stdout=subprocess.PIPE,
|
|
||||||
stderr=subprocess.STDOUT,
|
|
||||||
text=True,
|
|
||||||
)
|
|
||||||
out = proc.stdout or ''
|
|
||||||
|
|
||||||
start = out.find('{')
|
|
||||||
end = out.rfind('}')
|
|
||||||
payload = {}
|
|
||||||
if start != -1 and end != -1 and end > start:
|
|
||||||
try:
|
|
||||||
payload = json.loads(out[start : end + 1])
|
|
||||||
except Exception:
|
|
||||||
payload = {}
|
|
||||||
|
|
||||||
result = payload.get('result') if isinstance(payload.get('result'), dict) else {}
|
|
||||||
payloads = result.get('payloads') if isinstance(result.get('payloads'), list) else []
|
|
||||||
texts = []
|
|
||||||
for item in payloads:
|
|
||||||
if not isinstance(item, dict):
|
|
||||||
continue
|
|
||||||
text = item.get('text') or item.get('message') or item.get('content')
|
|
||||||
if isinstance(text, str) and text.strip():
|
|
||||||
texts.append(text.strip())
|
|
||||||
|
|
||||||
reply = '\n\n'.join(texts).strip()
|
|
||||||
if not reply and proc.returncode == 0:
|
|
||||||
reply = str(payload.get('summary') or '응답 완료').strip()
|
|
||||||
|
|
||||||
print(
|
|
||||||
json.dumps(
|
|
||||||
{
|
|
||||||
'ok': proc.returncode == 0,
|
|
||||||
'status': payload.get('status') or ('completed' if proc.returncode == 0 else 'failed'),
|
|
||||||
'reply': reply,
|
|
||||||
'raw': out[-4000:],
|
|
||||||
},
|
|
||||||
ensure_ascii=False,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
PY
|
|
||||||
else
|
|
||||||
printf '%s' '{"ok":false,"status":"failed","reply":"","raw":"openclaw runtime unavailable"}'
|
|
||||||
fi`.trim();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private parseUptime(stdout: string) {
|
private parseUptime(stdout: string) {
|
||||||
|
|||||||
@@ -1,115 +0,0 @@
|
|||||||
# 하나랑 오피스 대시보드 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 구분이 사용자에게 정직하게 보임
|
|
||||||
@@ -1,954 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { API_URL, POLL_INTERVAL_MS } from '@/lib/config';
|
|
||||||
import { useSocket } from '@/lib/useSocket';
|
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
|
||||||
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';
|
|
||||||
|
|
||||||
interface RuntimeSubagentItem {
|
|
||||||
name: string;
|
|
||||||
state: AgentState;
|
|
||||||
updatedAt: number | null;
|
|
||||||
currentTask: string | null;
|
|
||||||
sessionLabel: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SisterRuntimeItem {
|
|
||||||
name: SisterName;
|
|
||||||
gatewayConnected: boolean;
|
|
||||||
mainState: AgentState;
|
|
||||||
currentTask: string | null;
|
|
||||||
activeSessionLabel: string | null;
|
|
||||||
activeSessionUpdatedAt: number | null;
|
|
||||||
controlSessionKey: string | null;
|
|
||||||
recentMessages: Array<{
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant' | 'tool';
|
|
||||||
content: string;
|
|
||||||
ts: string | null;
|
|
||||||
}>;
|
|
||||||
subagents: RuntimeSubagentItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SisterApiItem {
|
|
||||||
id?: number;
|
|
||||||
name: SisterName;
|
|
||||||
status: 'online' | 'offline' | 'working' | 'unknown';
|
|
||||||
role?: string;
|
|
||||||
currentTask?: string | null;
|
|
||||||
lastSeen?: string | null;
|
|
||||||
cpu?: number;
|
|
||||||
memory?: { used?: number; total?: number };
|
|
||||||
liveState?: AgentState;
|
|
||||||
activeSessionLabel?: string | null;
|
|
||||||
gatewayConnected?: boolean;
|
|
||||||
subagents?: RuntimeSubagentItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
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-reviewer' },
|
|
||||||
{ id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
|
|
||||||
{ id: 'darang-security-auditor', name: 'security-auditor', label: 'security-auditor' },
|
|
||||||
{ id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
|
|
||||||
],
|
|
||||||
erang: [
|
|
||||||
{ id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy-manager' },
|
|
||||||
{ id: 'erang-db-manager', name: 'db-manager', label: 'db-manager' },
|
|
||||||
{ id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx-manager' },
|
|
||||||
{ id: 'erang-monitoring', name: 'monitoring', label: 'monitoring' },
|
|
||||||
{ id: 'erang-dns-manager', name: 'dns-manager', label: 'dns-manager' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
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 GROUP_DEFS: { id: string; label: string; members: SisterName[]; description: string }[] = [
|
|
||||||
{ id: 'planning', label: 'Planning', members: ['harang'], description: 'Orchestration & Planning' },
|
|
||||||
{ id: 'delivery', label: 'Delivery', members: ['narang'], description: 'Implementation' },
|
|
||||||
{ id: 'review', label: 'Review', members: ['darang'], description: 'QA & Review' },
|
|
||||||
{ id: 'deploy', label: 'Deploy', members: ['erang'], description: 'Infra & Deploy' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const FALLBACK_SISTERS: SisterApiItem[] = [
|
|
||||||
{ name: 'harang', status: 'unknown', role: SISTER_ROLES.harang, currentTask: null },
|
|
||||||
{ name: 'narang', status: 'unknown', role: SISTER_ROLES.narang, currentTask: null },
|
|
||||||
{ name: 'darang', status: 'unknown', role: SISTER_ROLES.darang, currentTask: null },
|
|
||||||
{ name: 'erang', status: 'unknown', role: SISTER_ROLES.erang, currentTask: null },
|
|
||||||
];
|
|
||||||
|
|
||||||
function truthfulStateLabel(state: AgentState, source: 'live' | 'snapshot' | 'fallback'): string {
|
|
||||||
if (source === 'fallback') return 'fallback';
|
|
||||||
if (state === 'error') return 'offline';
|
|
||||||
if (state === 'tool_calling' || state === 'thinking' || state === 'speaking') return 'active working';
|
|
||||||
if (source === 'snapshot') return 'snapshot only';
|
|
||||||
return 'connected idle';
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
|
||||||
if (parentState === 'error') return 'idle';
|
|
||||||
if (parentState === 'tool_calling' && index === 0) return 'thinking';
|
|
||||||
if (parentState === 'speaking' && index <= 1) return 'thinking';
|
|
||||||
return 'idle';
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeSubagentState(state?: AgentState): AgentState {
|
|
||||||
if (state === 'thinking' || state === 'tool_calling' || state === 'speaking' || state === 'error') {
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
return 'idle';
|
|
||||||
}
|
|
||||||
|
|
||||||
function mergeSisterData(
|
|
||||||
statuses: SisterApiItem[],
|
|
||||||
runtime: SisterRuntimeItem[],
|
|
||||||
previous: SisterApiItem[] = [],
|
|
||||||
): SisterApiItem[] {
|
|
||||||
const previousMap = new Map(previous.map((item) => [item.name, item]));
|
|
||||||
const statusMap = new Map(statuses.map((item) => [item.name, item]));
|
|
||||||
const runtimeMap = new Map(runtime.map((item) => [item.name, item]));
|
|
||||||
|
|
||||||
return SISTER_ORDER.map((name) => {
|
|
||||||
const prev = previousMap.get(name);
|
|
||||||
const status = statusMap.get(name) ?? prev;
|
|
||||||
const live = runtimeMap.get(name);
|
|
||||||
|
|
||||||
// If we have no data at all for this sister, build a minimal honest entry
|
|
||||||
if (!status) {
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
status: 'unknown' as const,
|
|
||||||
role: SISTER_ROLES[name],
|
|
||||||
currentTask: live?.currentTask ?? null,
|
|
||||||
liveState: live?.mainState,
|
|
||||||
activeSessionLabel: live?.activeSessionLabel ?? null,
|
|
||||||
gatewayConnected: live?.gatewayConnected ?? false,
|
|
||||||
subagents: live?.subagents ?? [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
...status,
|
|
||||||
name,
|
|
||||||
role: status.role ?? prev?.role ?? SISTER_ROLES[name],
|
|
||||||
currentTask: live?.currentTask ?? status.currentTask ?? prev?.currentTask ?? null,
|
|
||||||
liveState: live?.mainState ?? prev?.liveState,
|
|
||||||
activeSessionLabel: live?.activeSessionLabel ?? prev?.activeSessionLabel ?? null,
|
|
||||||
gatewayConnected: live?.gatewayConnected ?? prev?.gatewayConnected ?? false,
|
|
||||||
subagents: live?.subagents ?? prev?.subagents ?? [],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
|
|
||||||
return SISTER_ORDER.map((name) => {
|
|
||||||
const item = sisters.find((s) => s.name === name);
|
|
||||||
const fallbackState = statusToAgentState(item?.status ?? 'unknown', Boolean(item?.currentTask));
|
|
||||||
const state = item?.gatewayConnected ? item.liveState ?? fallbackState : fallbackState;
|
|
||||||
|
|
||||||
const runtimeSubagents = item?.subagents ?? [];
|
|
||||||
const runtimeMap = new Map(runtimeSubagents.map((sub) => [sub.name, sub]));
|
|
||||||
|
|
||||||
const subagents: SubAgent[] = SUBAGENT_DEFS[name].map((def, index) => {
|
|
||||||
const runtime = runtimeMap.get(def.name);
|
|
||||||
return {
|
|
||||||
id: def.id,
|
|
||||||
name: def.name,
|
|
||||||
label: def.label,
|
|
||||||
sister: name,
|
|
||||||
state: runtime ? normalizeSubagentState(runtime.state) : derivedSubagentState(state, index),
|
|
||||||
currentTask: runtime?.currentTask ?? null,
|
|
||||||
updatedAt: runtime?.updatedAt ?? null,
|
|
||||||
sessionLabel: runtime?.sessionLabel ?? null,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
displayName: SISTER_DISPLAY[name],
|
|
||||||
role: item?.role ?? SISTER_ROLES[name],
|
|
||||||
state,
|
|
||||||
currentTask: item?.currentTask ?? null,
|
|
||||||
activeSessionLabel: item?.activeSessionLabel ?? null,
|
|
||||||
subagents,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
|
|
||||||
const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
|
|
||||||
const sister = sisters.find((item) => item.name === name);
|
|
||||||
return {
|
|
||||||
id: `server-${name}`,
|
|
||||||
label: SISTER_DISPLAY[name],
|
|
||||||
type: 'sister' as const,
|
|
||||||
status: sister?.status ?? 'unknown',
|
|
||||||
detail: sister?.currentTask ?? sister?.activeSessionLabel ?? null,
|
|
||||||
source: sister ? sisterSource : 'fallback',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FreshnessBar = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-md);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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' : '#777')};
|
|
||||||
border: 1px solid currentColor;
|
|
||||||
padding: 2px 6px;
|
|
||||||
opacity: 0.8;
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* ─── Desktop layout (≥1280px): scene + context side-by-side ─── */
|
|
||||||
const DesktopMain = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: 0;
|
|
||||||
min-height: 0;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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: 1279px) {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const BottomPanels = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-lg);
|
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* ─── Mobile layout (<1280px) ─── */
|
|
||||||
const MobileFlow = styled.div`
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-lg);
|
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileSisterGrid = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STATE_CARD_COLORS: Record<AgentState, string> = {
|
|
||||||
idle: '#444',
|
|
||||||
thinking: '#2979FF',
|
|
||||||
tool_calling: '#FF9800',
|
|
||||||
speaking: '#00BFA5',
|
|
||||||
error: '#FF1744',
|
|
||||||
};
|
|
||||||
|
|
||||||
const MobileSisterCard = styled.button<{ $state: AgentState; $selected: boolean }>`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
padding: var(--space-sm) var(--space-md);
|
|
||||||
border: 1px solid ${({ $state }) => STATE_CARD_COLORS[$state]};
|
|
||||||
background: ${({ $selected }) => ($selected ? 'rgba(255,255,255,0.04)' : 'var(--bg-surface)')};
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: left;
|
|
||||||
font-family: inherit;
|
|
||||||
color: var(--text-primary);
|
|
||||||
outline: ${({ $selected }) => ($selected ? '1px solid var(--text-primary)' : 'none')};
|
|
||||||
outline-offset: -1px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileCardMeta = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
min-width: 0;
|
|
||||||
flex: 1;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileCardName = styled.div`
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileCardState = styled.div<{ $state: AgentState }>`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
color: ${({ $state }) => STATE_CARD_COLORS[$state]};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileCardTask = styled.div`
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileFocusSection = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
padding: var(--space-md) var(--space-lg);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileSectionEyebrow = styled.div`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileFocusTitle = styled.div`
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileFocusDetail = styled.div`
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileHealthRow = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileHealthChip = styled.div<{ $ok: boolean }>`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border: 1px solid ${({ $ok }) => ($ok ? '#00BFA5' : '#555')};
|
|
||||||
color: ${({ $ok }) => ($ok ? '#00BFA5' : '#777')};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileQuickActions = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileActionBtn = 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);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--border-hover);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupBlock = styled.button<{ $hasActive: boolean; $expanded: boolean }>`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
padding: var(--space-md);
|
|
||||||
border: 1px solid ${({ $hasActive }) => ($hasActive ? '#2979FF' : 'var(--border-color)')};
|
|
||||||
background: ${({ $expanded }) => ($expanded ? 'rgba(255,255,255,0.04)' : 'var(--bg-surface)')};
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: left;
|
|
||||||
font-family: inherit;
|
|
||||||
color: var(--text-primary);
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupHeader = styled.div`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
min-width: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupLabel = styled.div`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupMeta = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-xs);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupChip = styled.span<{ $tone: 'active' | 'idle' | 'offline' | 'fallback' }>`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 9px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border: 1px solid ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#555'};
|
|
||||||
color: ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#777'};
|
|
||||||
white-space: nowrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileGroupDetail = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
padding-top: var(--space-sm);
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileOpsSummary = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
padding: var(--space-md);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileContextInline = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
padding: var(--space-md) var(--space-lg);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-md);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileContextHeader = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileContextTitle = styled.div`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileCloseBtn = 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 MobileSelectedSummary = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileSelectedMeta = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileSelectedName = styled.div`
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileSelectedRole = styled.div`
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MobileTaskBox = 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 MobileChatArea = styled.div`
|
|
||||||
height: 400px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
@media (max-width: 389px) {
|
|
||||||
height: 360px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
const { connected } = useSocket<SisterApiItem>({
|
|
||||||
onSistersUpdate: (updated) => {
|
|
||||||
setSisters((prev) => mergeSisterData(updated, [], prev));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchAll = useCallback(async () => {
|
|
||||||
const [sistersRes, opsRes, runtimeRes] = await Promise.allSettled([
|
|
||||||
fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
|
|
||||||
fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
|
|
||||||
fetch(`${API_URL}/api/sisters/runtime`).then((r) => r.json()),
|
|
||||||
]);
|
|
||||||
|
|
||||||
setSisters((prev) => {
|
|
||||||
const base = sistersRes.status === 'fulfilled' && Array.isArray(sistersRes.value) ? sistersRes.value as SisterApiItem[] : prev;
|
|
||||||
const runtime = runtimeRes.status === 'fulfilled' && Array.isArray(runtimeRes.value) ? runtimeRes.value as SisterRuntimeItem[] : [];
|
|
||||||
return mergeSisterData(base, runtime, prev);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (opsRes.status === 'fulfilled') {
|
|
||||||
setOpsData(opsRes.value as DashboardOpsData);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const boot = async () => {
|
|
||||||
try {
|
|
||||||
await fetchAll();
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void boot();
|
|
||||||
|
|
||||||
// Polling fallback — only when socket is disconnected
|
|
||||||
// Socket handles live updates; polling is a disconnected fallback
|
|
||||||
return () => {};
|
|
||||||
}, [fetchAll]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (connected) return; // socket is live, no polling needed
|
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
void fetchAll();
|
|
||||||
}, POLL_INTERVAL_MS);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [connected, fetchAll]);
|
|
||||||
|
|
||||||
const hasSisterSnapshot = sisters.length > 0;
|
|
||||||
const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
|
|
||||||
const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
|
|
||||||
const sisterNodes = useMemo(() => buildSisterNodes(effectiveSisters), [effectiveSisters]);
|
|
||||||
const serverEntries = useMemo(() => buildServerEntries(effectiveSisters, sisterDataMode), [effectiveSisters, sisterDataMode]);
|
|
||||||
|
|
||||||
const subagentMode: 'live' | 'fallback' = useMemo(() => {
|
|
||||||
return effectiveSisters.some((item) => (item.subagents?.length ?? 0) > 0) ? 'live' : 'fallback';
|
|
||||||
}, [effectiveSisters]);
|
|
||||||
|
|
||||||
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 pipeline = opsData?.pipeline ?? {
|
|
||||||
activeTask: 'SPRINT-016',
|
|
||||||
focus: 'Office runtime sync',
|
|
||||||
reviewLoopCount: 0,
|
|
||||||
escalationCount: 0,
|
|
||||||
deployState: '—',
|
|
||||||
nodes: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const freshness = opsData?.freshness ?? {
|
|
||||||
generatedAt: new Date().toISOString(),
|
|
||||||
activityLatestAt: null,
|
|
||||||
sistersLatestAt: null,
|
|
||||||
qaDocLatestAt: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectedSisterNode = useMemo(() => {
|
|
||||||
if (!selected) return null;
|
|
||||||
if (selected.type === 'sister') return sisterNodes.find((s) => s.name === selected.name) ?? null;
|
|
||||||
if (selected.type === 'subagent') return sisterNodes.find((s) => s.name === selected.sister) ?? null;
|
|
||||||
return null;
|
|
||||||
}, [selected, sisterNodes]);
|
|
||||||
|
|
||||||
const selectedSubagent = useMemo(() => {
|
|
||||||
if (selected?.type !== 'subagent') return null;
|
|
||||||
return selectedSisterNode?.subagents.find((sub) => sub.id === selected.id) ?? null;
|
|
||||||
}, [selected, selectedSisterNode]);
|
|
||||||
|
|
||||||
const onlineCount = useMemo(
|
|
||||||
() => effectiveSisters.filter((s) => s.status === 'online' || s.status === 'working').length,
|
|
||||||
[effectiveSisters],
|
|
||||||
);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <LoadingOverlay>오피스 데이터 로딩 중...</LoadingOverlay>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Shell>
|
|
||||||
<PageHeader>
|
|
||||||
<PageTitle>🏢 오피스 대시보드</PageTitle>
|
|
||||||
<PageMeta>4자매 · {SUBAGENT_COUNT} 서브에이전트 · 협업 관제</PageMeta>
|
|
||||||
<FreshnessBar>
|
|
||||||
<FreshnessBadge $type={sisterDataMode}>
|
|
||||||
source: {sisterDataMode}
|
|
||||||
</FreshnessBadge>
|
|
||||||
<FreshnessBadge $type={subagentMode === 'live' ? 'live' : 'fallback'}>
|
|
||||||
agents: {subagentMode}
|
|
||||||
</FreshnessBadge>
|
|
||||||
<FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
|
|
||||||
</FreshnessBar>
|
|
||||||
</PageHeader>
|
|
||||||
|
|
||||||
{/* ─── Desktop layout (≥1280px) ─── */}
|
|
||||||
<DesktopMain>
|
|
||||||
<SceneColumn>
|
|
||||||
<OfficeScene
|
|
||||||
sisters={sisterNodes}
|
|
||||||
selected={selected}
|
|
||||||
onSelectSister={handleSelectSister}
|
|
||||||
onSelectSubagent={handleSelectSubagent}
|
|
||||||
dataMode={sisterDataMode}
|
|
||||||
subagentMode={subagentMode}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{chatSister && (
|
|
||||||
<ChatArea>
|
|
||||||
<ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
|
|
||||||
</ChatArea>
|
|
||||||
)}
|
|
||||||
</SceneColumn>
|
|
||||||
|
|
||||||
<ContextPanel
|
|
||||||
selected={selected}
|
|
||||||
sisters={sisterNodes}
|
|
||||||
onOpenChat={handleOpenChat}
|
|
||||||
onClear={() => setSelected(null)}
|
|
||||||
/>
|
|
||||||
</DesktopMain>
|
|
||||||
|
|
||||||
{/* ─── Mobile layout (<1280px) ─── */}
|
|
||||||
<MobileFlow>
|
|
||||||
{/* 1. Operational summary — always first */}
|
|
||||||
<MobileOpsSummary>
|
|
||||||
<MobileSectionEyebrow>운영 요약</MobileSectionEyebrow>
|
|
||||||
<MobileFocusTitle>{pipeline.activeTask}</MobileFocusTitle>
|
|
||||||
<MobileFocusDetail>{pipeline.focus}</MobileFocusDetail>
|
|
||||||
<MobileHealthRow>
|
|
||||||
<MobileHealthChip $ok={sisterDataMode === 'live'}>
|
|
||||||
{sisterDataMode === 'live' ? 'live' : sisterDataMode === 'snapshot' ? 'snapshot' : 'fallback'}
|
|
||||||
</MobileHealthChip>
|
|
||||||
<MobileHealthChip $ok={onlineCount >= 3}>
|
|
||||||
{onlineCount}/{SISTER_ORDER.length} connected
|
|
||||||
</MobileHealthChip>
|
|
||||||
<MobileHealthChip $ok={pipeline.deployState !== 'blocked'}>
|
|
||||||
deploy: {pipeline.deployState}
|
|
||||||
</MobileHealthChip>
|
|
||||||
</MobileHealthRow>
|
|
||||||
<MobileQuickActions>
|
|
||||||
{SISTER_ORDER.map((name) => (
|
|
||||||
<MobileActionBtn key={name} onClick={() => handleOpenChat(name)}>
|
|
||||||
{SISTER_DISPLAY[name]}
|
|
||||||
</MobileActionBtn>
|
|
||||||
))}
|
|
||||||
</MobileQuickActions>
|
|
||||||
</MobileOpsSummary>
|
|
||||||
|
|
||||||
{/* 2. Group blocks — group mental model, not 4 individual cards */}
|
|
||||||
<MobileSisterGrid>
|
|
||||||
{GROUP_DEFS.map((group) => {
|
|
||||||
const groupSisters = group.members.map((m) => sisterNodes.find((s) => s.name === m)).filter(Boolean) as typeof sisterNodes;
|
|
||||||
const hasActive = groupSisters.some((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking');
|
|
||||||
const workingCount = groupSisters.filter((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking').length;
|
|
||||||
const connectedCount = groupSisters.filter((s) => s.state !== 'error').length;
|
|
||||||
const isExpanded = selected?.type === 'sister' && group.members.includes(selected.name);
|
|
||||||
const groupState = truthfulStateLabel(
|
|
||||||
groupSisters[0]?.state ?? 'idle',
|
|
||||||
sisterDataMode,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MobileGroupBlock
|
|
||||||
key={group.id}
|
|
||||||
$hasActive={hasActive}
|
|
||||||
$expanded={isExpanded}
|
|
||||||
onClick={() => handleSelectSister(group.members[0])}
|
|
||||||
>
|
|
||||||
<MobileGroupHeader>
|
|
||||||
<MobileGroupLabel>{group.label}</MobileGroupLabel>
|
|
||||||
<MobileGroupMeta>
|
|
||||||
<MobileGroupChip $tone={hasActive ? 'active' : connectedCount > 0 ? 'idle' : sisterDataMode === 'fallback' ? 'fallback' : 'offline'}>
|
|
||||||
{groupState}
|
|
||||||
</MobileGroupChip>
|
|
||||||
{workingCount > 0 && <MobileGroupChip $tone="active">{workingCount} working</MobileGroupChip>}
|
|
||||||
</MobileGroupMeta>
|
|
||||||
</MobileGroupHeader>
|
|
||||||
<MobileFocusDetail>{group.description}</MobileFocusDetail>
|
|
||||||
{isExpanded && (
|
|
||||||
<MobileGroupDetail>
|
|
||||||
{groupSisters.map((sister) => (
|
|
||||||
<MobileSelectedSummary key={sister.name}>
|
|
||||||
<SisterAvatar name={sister.name} size={28} />
|
|
||||||
<MobileSelectedMeta>
|
|
||||||
<MobileSelectedName>{sister.displayName}</MobileSelectedName>
|
|
||||||
<MobileSelectedRole>
|
|
||||||
{truthfulStateLabel(sister.state, sisterDataMode)}
|
|
||||||
{sister.currentTask ? ` · ${sister.currentTask}` : ''}
|
|
||||||
</MobileSelectedRole>
|
|
||||||
</MobileSelectedMeta>
|
|
||||||
</MobileSelectedSummary>
|
|
||||||
))}
|
|
||||||
<MobileQuickActions>
|
|
||||||
<MobileActionBtn onClick={(e) => { e.stopPropagation(); handleOpenChat(group.members[0]); }}>채팅</MobileActionBtn>
|
|
||||||
</MobileQuickActions>
|
|
||||||
</MobileGroupDetail>
|
|
||||||
)}
|
|
||||||
</MobileGroupBlock>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</MobileSisterGrid>
|
|
||||||
|
|
||||||
{/* 3. Chat (if open) */}
|
|
||||||
{chatSister && (
|
|
||||||
<MobileChatArea>
|
|
||||||
<ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
|
|
||||||
</MobileChatArea>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 4. Pipeline panel */}
|
|
||||||
<PipelinePanel
|
|
||||||
activeTask={pipeline.activeTask}
|
|
||||||
focus={pipeline.focus}
|
|
||||||
reviewLoopCount={pipeline.reviewLoopCount}
|
|
||||||
escalationCount={pipeline.escalationCount}
|
|
||||||
deployState={pipeline.deployState}
|
|
||||||
nodes={pipeline.nodes}
|
|
||||||
freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 5. Server health */}
|
|
||||||
<ServerHealthPanel
|
|
||||||
servers={serverEntries}
|
|
||||||
dataMode={sisterDataMode}
|
|
||||||
generatedAt={freshness.generatedAt}
|
|
||||||
/>
|
|
||||||
</MobileFlow>
|
|
||||||
|
|
||||||
{/* ─── Desktop bottom panels ─── */}
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,329 +3,137 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { API_URL } from '@/lib/config';
|
import { API_URL } from '@/lib/config';
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
|
||||||
|
|
||||||
// ─── Types ───
|
// ─── Styled ───
|
||||||
|
const MainViewport = styled.div`
|
||||||
interface OrgUnit {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
kind: 'hq' | 'functional_team';
|
|
||||||
lead: string | null;
|
|
||||||
memberIds: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrgMember {
|
|
||||||
id: string;
|
|
||||||
type: 'sister' | 'agent';
|
|
||||||
role: string;
|
|
||||||
status: { connection: string; working: string };
|
|
||||||
source: string;
|
|
||||||
freshness: { lastSnapshotAt: string | null };
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IndependentAgent {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
ownerSister: string | null;
|
|
||||||
source: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrgApiData {
|
|
||||||
owner?: { name: string; role: string };
|
|
||||||
sisters?: Array<{
|
|
||||||
name: string;
|
|
||||||
role: string;
|
|
||||||
status?: string;
|
|
||||||
}>;
|
|
||||||
orgUnits?: OrgUnit[];
|
|
||||||
members?: OrgMember[];
|
|
||||||
reportingLines?: Array<{ from: string; to: string; kind: string }>;
|
|
||||||
independentAgents?: IndependentAgent[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Fallback org structure (data-driven, not hardcoded tree) ───
|
|
||||||
|
|
||||||
const FALLBACK_ORG_UNITS: OrgUnit[] = [
|
|
||||||
{ id: 'hq', name: '하나랑 HQ', kind: 'hq', lead: 'harang', memberIds: ['harang'] },
|
|
||||||
{ id: 'delivery', name: 'Delivery', kind: 'functional_team', lead: 'narang', memberIds: ['narang'] },
|
|
||||||
{ id: 'review', name: 'QA / Review', kind: 'functional_team', lead: 'darang', memberIds: ['darang'] },
|
|
||||||
{ id: 'infra', name: 'Infra / Deploy', kind: 'functional_team', lead: 'erang', memberIds: ['erang'] },
|
|
||||||
];
|
|
||||||
|
|
||||||
const FALLBACK_MEMBERS: OrgMember[] = [
|
|
||||||
{ id: 'harang', type: 'sister', role: 'Orchestrator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
|
|
||||||
{ id: 'narang', type: 'sister', role: 'Generator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
|
|
||||||
{ id: 'darang', type: 'sister', role: 'Evaluator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
|
|
||||||
{ id: 'erang', type: 'sister', role: 'Infra Manager', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
|
|
||||||
];
|
|
||||||
|
|
||||||
const FALLBACK_INDEPENDENT_AGENTS: IndependentAgent[] = [
|
|
||||||
{ id: 'security-auditor', name: 'security-auditor', ownerSister: 'darang', source: 'fallback' },
|
|
||||||
{ id: 'monitoring', name: 'monitoring', ownerSister: 'erang', source: 'fallback' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const MEMBER_DISPLAY: Record<string, string> = {
|
|
||||||
harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이',
|
|
||||||
};
|
|
||||||
|
|
||||||
const LXC_ID: Record<string, number> = {
|
|
||||||
harang: 104, narang: 105, darang: 106, erang: 107,
|
|
||||||
};
|
|
||||||
|
|
||||||
// ─── Helpers ───
|
|
||||||
|
|
||||||
function statusLabel(status: OrgMember['status']): string {
|
|
||||||
if (status.working === 'active') return 'active working';
|
|
||||||
if (status.connection === 'connected') return 'connected idle';
|
|
||||||
if (status.connection === 'unknown') return 'unknown';
|
|
||||||
return 'offline';
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusTone(status: OrgMember['status']): 'active' | 'idle' | 'offline' | 'unknown' {
|
|
||||||
if (status.working === 'active') return 'active';
|
|
||||||
if (status.connection === 'connected') return 'idle';
|
|
||||||
if (status.connection === 'unknown') return 'unknown';
|
|
||||||
return 'offline';
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatFreshness(ts: string | null): string {
|
|
||||||
if (!ts) return 'NO DATA';
|
|
||||||
const diff = Date.now() - new Date(ts).getTime();
|
|
||||||
if (!Number.isFinite(diff) || diff < 0) return 'UNKNOWN';
|
|
||||||
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`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildOrgFromLegacy(data: OrgApiData): {
|
|
||||||
orgUnits: OrgUnit[];
|
|
||||||
members: OrgMember[];
|
|
||||||
independentAgents: IndependentAgent[];
|
|
||||||
} {
|
|
||||||
if (data.orgUnits && data.members) {
|
|
||||||
return {
|
|
||||||
orgUnits: data.orgUnits,
|
|
||||||
members: data.members,
|
|
||||||
independentAgents: data.independentAgents ?? FALLBACK_INDEPENDENT_AGENTS,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform legacy /api/org response into org chart model
|
|
||||||
const sisters = data.sisters ?? [];
|
|
||||||
if (sisters.length === 0) {
|
|
||||||
return { orgUnits: FALLBACK_ORG_UNITS, members: FALLBACK_MEMBERS, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
|
|
||||||
}
|
|
||||||
|
|
||||||
const ROLE_TO_TEAM: Record<string, string> = {
|
|
||||||
Orchestrator: 'hq',
|
|
||||||
Generator: 'delivery',
|
|
||||||
Evaluator: 'review',
|
|
||||||
'Infra Manager': 'infra',
|
|
||||||
};
|
|
||||||
|
|
||||||
const orgUnits: OrgUnit[] = [
|
|
||||||
{ id: 'hq', name: '하나랑 HQ', kind: 'hq', lead: null, memberIds: [] },
|
|
||||||
{ id: 'delivery', name: 'Delivery', kind: 'functional_team', lead: null, memberIds: [] },
|
|
||||||
{ id: 'review', name: 'QA / Review', kind: 'functional_team', lead: null, memberIds: [] },
|
|
||||||
{ id: 'infra', name: 'Infra / Deploy', kind: 'functional_team', lead: null, memberIds: [] },
|
|
||||||
];
|
|
||||||
|
|
||||||
const members: OrgMember[] = sisters.map((s) => {
|
|
||||||
const teamId = ROLE_TO_TEAM[s.role] ?? 'delivery';
|
|
||||||
const unit = orgUnits.find((u) => u.id === teamId);
|
|
||||||
if (unit) {
|
|
||||||
unit.memberIds.push(s.name);
|
|
||||||
if (!unit.lead) unit.lead = s.name;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
id: s.name,
|
|
||||||
type: 'sister' as const,
|
|
||||||
role: s.role,
|
|
||||||
status: {
|
|
||||||
connection: s.status === 'online' || s.status === 'working' ? 'connected' : s.status === 'offline' ? 'disconnected' : 'unknown',
|
|
||||||
working: s.status === 'working' ? 'active' : 'idle',
|
|
||||||
},
|
|
||||||
source: 'snapshot',
|
|
||||||
freshness: { lastSnapshotAt: new Date().toISOString() },
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return { orgUnits, members, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Styled Components ───
|
|
||||||
|
|
||||||
const Shell = styled.div`
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-xl);
|
gap: var(--space-xl);
|
||||||
min-height: 80vh;
|
min-height: 80vh;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const OrgHeader = styled.div`
|
const HeaderInfo = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
gap: var(--space-xl);
|
||||||
align-items: baseline;
|
font-family: var(--font-mono);
|
||||||
gap: var(--space-lg);
|
font-size: 11px;
|
||||||
flex-wrap: wrap;
|
color: var(--text-secondary);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
padding-bottom: var(--space-md);
|
padding-bottom: var(--space-md);
|
||||||
|
|
||||||
|
span { color: var(--text-primary); }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const OrgTitle = styled.h1`
|
const TreeContainer = styled.div`
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const OrgMeta = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-md);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const OrgBadge = styled.span<{ $tone: 'default' | 'active' | 'fallback' }>`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border: 1px solid ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#00BFA5' : $tone === 'fallback' ? '#777' : 'var(--border-color)'};
|
|
||||||
color: ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#00BFA5' : $tone === 'fallback' ? '#777' : 'var(--text-secondary)'};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SectionLabel = styled.h2`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HQCard = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-left-width: 3px;
|
|
||||||
border-left-color: #f6b26b;
|
|
||||||
padding: var(--space-lg);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-md);
|
align-items: center;
|
||||||
`;
|
overflow-x: auto;
|
||||||
|
padding: var(--space-xl) 0;
|
||||||
const TeamGrid = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: var(--space-lg);
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TeamCard = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
padding: var(--space-lg);
|
|
||||||
background: var(--bg-surface);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-md);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TeamTitle = styled.div`
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TeamLead = styled.div`
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MemberChipRow = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MemberChip = styled.div<{ $tone: 'active' | 'idle' | 'offline' | 'unknown' }>`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-xs);
|
|
||||||
border: 1px solid ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#555' : '#444'};
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StatusDot = styled.span<{ $tone: 'active' | 'idle' | 'offline' | 'unknown' }>`
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: ${({ $tone }) =>
|
|
||||||
$tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#555'};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MetaRow = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-sm);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AgentSection = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-md);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AgentCard = styled.div`
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
padding: var(--space-md) var(--space-lg);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-md);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
@media (max-width: 389px) {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AgentName = styled.div`
|
const NodeGroup = styled.div`
|
||||||
font-size: 13px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TerminalCard = styled.div<{ $level: 'high' | 'mid' | 'low' | 'none' }>`
|
||||||
|
border: 1px solid ${({ $level }) => ({
|
||||||
|
high: '#f43f5e',
|
||||||
|
mid: '#3b82f6',
|
||||||
|
low: '#10b981',
|
||||||
|
none: '#525252',
|
||||||
|
})[$level]};
|
||||||
|
border-left-width: 3px;
|
||||||
|
padding: var(--space-md) var(--space-lg);
|
||||||
|
background: var(--bg-main);
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 260px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
position: relative;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 12px 36px rgba(0,0,0,0.7);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NodeLabel = styled.div`
|
||||||
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
`;
|
margin-bottom: var(--space-sm);
|
||||||
|
|
||||||
const AgentMeta = styled.div`
|
span {
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
`;
|
margin-right: var(--space-xs);
|
||||||
|
|
||||||
const EmptyState = styled.div`
|
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--text-secondary);
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BadgeRow = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Badge = styled.div`
|
||||||
|
background: #1a1a1a;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.04em;
|
||||||
padding: var(--space-md) 0;
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
b { color: var(--text-primary); font-weight: normal; }
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TreeConnector = styled.div`
|
||||||
|
width: 1px;
|
||||||
|
height: 24px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin: 0 auto;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TreeBranch = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TreeChildren = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: calc(var(--space-xl) / 2 + 100px);
|
||||||
|
right: calc(var(--space-xl) / 2 + 100px);
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
|
||||||
|
&::before { display: none; }
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PageFooter = styled.footer`
|
const PageFooter = styled.footer`
|
||||||
@@ -334,175 +142,139 @@ const PageFooter = styled.footer`
|
|||||||
padding: var(--space-lg) 0;
|
padding: var(--space-lg) 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--space-md);
|
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 1px solid var(--border-color);
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// ─── Component ───
|
type Level = 'high' | 'mid' | 'low' | 'none';
|
||||||
|
|
||||||
|
interface OrgData {
|
||||||
|
owner: { name: string; role: string };
|
||||||
|
sisters: Array<{
|
||||||
|
name: string;
|
||||||
|
role: string;
|
||||||
|
description?: string;
|
||||||
|
status?: string;
|
||||||
|
lxcId?: number;
|
||||||
|
}>;
|
||||||
|
pipeline: Array<{ from: string; to: string; label: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LEVEL_MAP: Record<string, Level> = {
|
||||||
|
Orchestrator: 'high',
|
||||||
|
Generator: 'mid',
|
||||||
|
Evaluator: 'mid',
|
||||||
|
'Infra Manager': 'low',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ROLE_TAG: Record<string, string> = {
|
||||||
|
Orchestrator: 'ORCH',
|
||||||
|
Generator: 'GEN',
|
||||||
|
Evaluator: 'EVAL',
|
||||||
|
'Infra Manager': 'INFRA',
|
||||||
|
};
|
||||||
|
|
||||||
|
const LXC_ID: Record<string, number> = {
|
||||||
|
harang: 104,
|
||||||
|
narang: 105,
|
||||||
|
darang: 106,
|
||||||
|
erang: 107,
|
||||||
|
};
|
||||||
|
|
||||||
export default function OrgPage() {
|
export default function OrgPage() {
|
||||||
const [orgData, setOrgData] = useState<OrgApiData | null>(null);
|
const [orgData, setOrgData] = useState<OrgData | null>(null);
|
||||||
const [dataSource, setDataSource] = useState<'live' | 'snapshot' | 'fallback'>('fallback');
|
const ts = new Date().toLocaleDateString('ko-KR').replace(/\. /g, '.').replace('.', '') + '_' +
|
||||||
|
new Date().toLocaleTimeString('ko-KR', { hour12: false, hour: '2-digit', minute: '2-digit' });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch(`${API_URL}/api/org`)
|
fetch(`${API_URL}/api/org`)
|
||||||
.then((r) => r.json())
|
.then((r) => r.json())
|
||||||
.then((data) => {
|
.then(setOrgData)
|
||||||
setOrgData(data);
|
.catch(() => {});
|
||||||
setDataSource(data.orgUnits ? 'snapshot' : data.sisters?.length > 0 ? 'snapshot' : 'fallback');
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
setDataSource('fallback');
|
|
||||||
});
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const { orgUnits, members, independentAgents } = orgData
|
const sisters = orgData?.sisters ?? [];
|
||||||
? buildOrgFromLegacy(orgData)
|
|
||||||
: { orgUnits: FALLBACK_ORG_UNITS, members: FALLBACK_MEMBERS, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
|
|
||||||
|
|
||||||
const memberMap = new Map(members.map((m) => [m.id, m]));
|
|
||||||
const hqUnit = orgUnits.find((u) => u.kind === 'hq');
|
|
||||||
const functionalTeams = orgUnits.filter((u) => u.kind === 'functional_team');
|
|
||||||
|
|
||||||
const totalMembers = members.length;
|
|
||||||
const totalUnits = orgUnits.length;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Shell>
|
<MainViewport>
|
||||||
<OrgHeader>
|
<HeaderInfo>
|
||||||
<OrgTitle>조직도</OrgTitle>
|
<div>SYS_TYPE: <span>CORE_ROOT_01</span></div>
|
||||||
<OrgMeta>
|
<div>TIMESTAMP: <span style={{ color: 'var(--text-secondary)' }}>{ts}</span></div>
|
||||||
<OrgBadge $tone={dataSource === 'fallback' ? 'fallback' : 'default'}>
|
</HeaderInfo>
|
||||||
source: {dataSource}
|
|
||||||
</OrgBadge>
|
|
||||||
<OrgBadge $tone="default">{totalUnits} units</OrgBadge>
|
|
||||||
<OrgBadge $tone="default">{totalMembers} members</OrgBadge>
|
|
||||||
<OrgBadge $tone="default">{independentAgents.length} agents</OrgBadge>
|
|
||||||
</OrgMeta>
|
|
||||||
</OrgHeader>
|
|
||||||
|
|
||||||
{/* HQ Section */}
|
<TreeContainer>
|
||||||
{hqUnit && (
|
<NodeGroup>
|
||||||
<>
|
{/* HQ */}
|
||||||
<SectionLabel>HQ</SectionLabel>
|
<TerminalCard $level="high">
|
||||||
<HQCard>
|
<NodeLabel><span>[HQ]</span> 하나랑 글로벌</NodeLabel>
|
||||||
<TeamTitle>{hqUnit.name}</TeamTitle>
|
<BadgeRow>
|
||||||
<TeamLead>
|
<Badge>MEM: <b>{sisters.length + 1}</b></Badge>
|
||||||
{hqUnit.lead
|
<Badge>S_ADMIN</Badge>
|
||||||
? `LEAD: ${MEMBER_DISPLAY[hqUnit.lead] ?? hqUnit.lead}`
|
<Badge>LV_09</Badge>
|
||||||
: 'LEAD 미정'}
|
</BadgeRow>
|
||||||
</TeamLead>
|
</TerminalCard>
|
||||||
<MemberChipRow>
|
<TreeConnector />
|
||||||
{hqUnit.memberIds.map((id) => {
|
|
||||||
const member = memberMap.get(id);
|
|
||||||
const tone = member ? statusTone(member.status) : 'unknown';
|
|
||||||
return (
|
|
||||||
<MemberChip key={id} $tone={tone}>
|
|
||||||
<SisterAvatar name={id} size={20} />
|
|
||||||
<StatusDot $tone={tone} />
|
|
||||||
{MEMBER_DISPLAY[id] ?? id}
|
|
||||||
</MemberChip>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</MemberChipRow>
|
|
||||||
<MetaRow>
|
|
||||||
{hqUnit.memberIds.map((id) => {
|
|
||||||
const member = memberMap.get(id);
|
|
||||||
return (
|
|
||||||
<span key={id}>
|
|
||||||
{MEMBER_DISPLAY[id] ?? id}: {member ? statusLabel(member.status) : 'unknown'}
|
|
||||||
{LXC_ID[id] ? ` · LXC ${LXC_ID[id]}` : ''}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</MetaRow>
|
|
||||||
</HQCard>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Functional Teams */}
|
{/* 자매 레벨 */}
|
||||||
<SectionLabel>FUNCTIONAL TEAMS</SectionLabel>
|
<TreeBranch>
|
||||||
<TeamGrid>
|
<TreeChildren>
|
||||||
{functionalTeams.map((team) => (
|
{/* 하랑이 (Orchestrator) */}
|
||||||
<TeamCard key={team.id}>
|
{sisters.filter((s) => s.role === 'Orchestrator').map((s) => (
|
||||||
<TeamTitle>{team.name}</TeamTitle>
|
<NodeGroup key={s.name}>
|
||||||
<TeamLead>
|
<TerminalCard $level={LEVEL_MAP[s.role] ?? 'none'}>
|
||||||
{team.lead
|
<NodeLabel>
|
||||||
? `LEAD: ${MEMBER_DISPLAY[team.lead] ?? team.lead}`
|
<span>[{ROLE_TAG[s.role] ?? s.role}]</span>
|
||||||
: 'LEAD 미정'}
|
{s.name === 'harang' ? '하랑이' : s.name}
|
||||||
</TeamLead>
|
</NodeLabel>
|
||||||
<MemberChipRow>
|
<BadgeRow>
|
||||||
{team.memberIds.map((id) => {
|
<Badge>LXC: <b>{LXC_ID[s.name] ?? '---'}</b></Badge>
|
||||||
const member = memberMap.get(id);
|
<Badge>{ROLE_TAG[s.role] ?? s.role}</Badge>
|
||||||
const tone = member ? statusTone(member.status) : 'unknown';
|
<Badge>{s.status === 'online' ? 'ACTIVE' : s.status === 'offline' ? 'STBY' : 'RUN'}</Badge>
|
||||||
return (
|
</BadgeRow>
|
||||||
<MemberChip key={id} $tone={tone}>
|
</TerminalCard>
|
||||||
<SisterAvatar name={id} size={20} />
|
<TreeConnector />
|
||||||
<StatusDot $tone={tone} />
|
<TreeBranch>
|
||||||
{MEMBER_DISPLAY[id] ?? id}
|
<TreeChildren>
|
||||||
</MemberChip>
|
{/* 나랑/다랑/이랑 */}
|
||||||
);
|
{sisters.filter((s2) => s2.role !== 'Orchestrator').map((s2) => (
|
||||||
})}
|
<NodeGroup key={s2.name}>
|
||||||
</MemberChipRow>
|
<TerminalCard $level={LEVEL_MAP[s2.role] ?? 'none'}>
|
||||||
<MetaRow>
|
<NodeLabel>
|
||||||
{team.memberIds.map((id) => {
|
{s2.name === 'narang' ? '나랑이' : s2.name === 'darang' ? '다랑이' : '이랑이'}
|
||||||
const member = memberMap.get(id);
|
</NodeLabel>
|
||||||
return (
|
<BadgeRow>
|
||||||
<span key={id}>
|
<Badge>LXC: <b>{LXC_ID[s2.name] ?? '---'}</b></Badge>
|
||||||
{member?.role ?? 'unknown'}
|
<Badge>{ROLE_TAG[s2.role] ?? s2.role}</Badge>
|
||||||
{member ? ` · ${statusLabel(member.status)}` : ''}
|
<Badge>{s2.status === 'online' ? 'ON' : s2.status === 'offline' ? '--' : 'RUN'}</Badge>
|
||||||
{member ? ` · ${member.source}` : ''}
|
</BadgeRow>
|
||||||
</span>
|
</TerminalCard>
|
||||||
);
|
</NodeGroup>
|
||||||
})}
|
))}
|
||||||
<span>freshness: {formatFreshness(
|
</TreeChildren>
|
||||||
team.memberIds
|
</TreeBranch>
|
||||||
.map((id) => memberMap.get(id)?.freshness.lastSnapshotAt)
|
</NodeGroup>
|
||||||
.filter(Boolean)
|
|
||||||
.sort()
|
|
||||||
.at(-1) ?? null
|
|
||||||
)}</span>
|
|
||||||
</MetaRow>
|
|
||||||
</TeamCard>
|
|
||||||
))}
|
))}
|
||||||
</TeamGrid>
|
|
||||||
|
|
||||||
{/* Independent Agents */}
|
{/* Orchestrator 없을 때 fallback */}
|
||||||
<SectionLabel>INDEPENDENT AGENTS</SectionLabel>
|
{sisters.filter((s) => s.role === 'Orchestrator').length === 0 && (
|
||||||
<AgentSection>
|
<NodeGroup>
|
||||||
{independentAgents.length === 0 ? (
|
<TerminalCard $level="none">
|
||||||
<EmptyState>INDEPENDENT AGENTS 없음</EmptyState>
|
<NodeLabel>데이터 없음</NodeLabel>
|
||||||
) : (
|
<BadgeRow><Badge>N/A</Badge></BadgeRow>
|
||||||
independentAgents.map((agent) => (
|
</TerminalCard>
|
||||||
<AgentCard key={agent.id}>
|
</NodeGroup>
|
||||||
<div>
|
|
||||||
<AgentName>{agent.name}</AgentName>
|
|
||||||
<AgentMeta>
|
|
||||||
{agent.ownerSister
|
|
||||||
? `owner: ${MEMBER_DISPLAY[agent.ownerSister] ?? agent.ownerSister}`
|
|
||||||
: 'independent'}
|
|
||||||
</AgentMeta>
|
|
||||||
</div>
|
|
||||||
<MetaRow>
|
|
||||||
<span>source: {agent.source}</span>
|
|
||||||
</MetaRow>
|
|
||||||
</AgentCard>
|
|
||||||
))
|
|
||||||
)}
|
)}
|
||||||
</AgentSection>
|
</TreeChildren>
|
||||||
|
</TreeBranch>
|
||||||
|
</NodeGroup>
|
||||||
|
</TreeContainer>
|
||||||
|
|
||||||
<PageFooter>
|
<PageFooter>
|
||||||
<div>UNITS: {String(totalUnits).padStart(2, '0')}</div>
|
<div>TOTAL_NODES: {String(sisters.length + 1).padStart(2, '0')}</div>
|
||||||
<div>MEMBERS: {String(totalMembers).padStart(2, '0')}</div>
|
<div>STATUS: SYNC_COMPLETE</div>
|
||||||
<div>AGENTS: {String(independentAgents.length).padStart(2, '0')}</div>
|
|
||||||
<div>SOURCE: {dataSource.toUpperCase()}</div>
|
|
||||||
</PageFooter>
|
</PageFooter>
|
||||||
</Shell>
|
</MainViewport>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -268,26 +268,27 @@ const ConnectionDot = styled.span<{ $connected: boolean }>`
|
|||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: ${({ $connected }) => ($connected ? '#8dffb2' : '#888')};
|
background: ${({ $connected }) => ($connected ? '#8dffb2' : '#ff8d7a')};
|
||||||
box-shadow: ${({ $connected }) => ($connected ? '0 0 8px rgba(141,255,178,0.45)' : 'none')};
|
box-shadow: ${({ $connected }) => ($connected ? '0 0 8px rgba(141,255,178,0.45)' : 'none')};
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const OperatorRow = styled.div`
|
const OperatorGrid = styled.div`
|
||||||
display: flex;
|
display: grid;
|
||||||
align-items: center;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const OperatorText = styled.div`
|
const OperatorCard = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 6px;
|
||||||
min-width: 0;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const OperatorName = styled.div`
|
const OperatorValue = styled.div`
|
||||||
font-size: 15px;
|
font-size: 14px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
`;
|
`;
|
||||||
@@ -958,8 +959,8 @@ export default function DashboardPage() {
|
|||||||
</div>
|
</div>
|
||||||
<Summary>RUNTIME / EVENTS / DOCS</Summary>
|
<Summary>RUNTIME / EVENTS / DOCS</Summary>
|
||||||
<InlineStats>
|
<InlineStats>
|
||||||
<Chip $tone={connected ? 'active' : 'default'}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</Chip>
|
<Chip $tone={connected ? 'active' : 'muted'}>{connected ? 'socket on' : 'socket off'}</Chip>
|
||||||
<Chip $tone="default">{formatSyncLabel(derived.freshness.generatedAt)}</Chip>
|
<Chip $tone="default">snapshot {formatSyncLabel(derived.freshness.generatedAt)}</Chip>
|
||||||
<Chip $tone={derived.reviewProjects > 0 ? 'warning' : 'default'}>qa {String(derived.reviewProjects).padStart(2, '0')}</Chip>
|
<Chip $tone={derived.reviewProjects > 0 ? 'warning' : 'default'}>qa {String(derived.reviewProjects).padStart(2, '0')}</Chip>
|
||||||
<Chip $tone={derived.readyDeploy > 0 ? 'active' : 'muted'}>deploy {String(derived.readyDeploy).padStart(2, '0')}</Chip>
|
<Chip $tone={derived.readyDeploy > 0 ? 'active' : 'muted'}>deploy {String(derived.readyDeploy).padStart(2, '0')}</Chip>
|
||||||
</InlineStats>
|
</InlineStats>
|
||||||
@@ -999,34 +1000,35 @@ export default function DashboardPage() {
|
|||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
|
||||||
<ConnectionDot $connected={connected} />
|
<ConnectionDot $connected={connected} />
|
||||||
<div>
|
<div>
|
||||||
<Eyebrow>Connection</Eyebrow>
|
<Eyebrow>Event stream</Eyebrow>
|
||||||
<div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</div>
|
<div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'SOCKET ON / EVENT MIRRORED' : 'SOCKET OFF / POLLING'}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
|
<LabelMeta><span>SYNC:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
|
||||||
<LabelMeta><span>FRESHNESS:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
|
|
||||||
<LabelMeta><span>SOURCE:</span>{connected ? 'MIRRORED EVENT' : 'SNAPSHOT'}</LabelMeta>
|
|
||||||
</div>
|
|
||||||
</ConnectionCard>
|
</ConnectionCard>
|
||||||
|
|
||||||
<OperatorRow>
|
<OperatorGrid>
|
||||||
{derived.activeProject?.ownerSister ? (
|
<OperatorCard>
|
||||||
<>
|
<MetaLabel>focus owner</MetaLabel>
|
||||||
<SisterAvatar name={derived.activeProject.ownerSister} size={44} />
|
<OperatorValue>{derived.activeProject?.ownerSister ? (SISTER_META[derived.activeProject.ownerSister]?.label ?? derived.activeProject.ownerSister) : 'UNASSIGNED'}</OperatorValue>
|
||||||
<OperatorText>
|
<OperatorMeta>SNAPSHOT OWNER</OperatorMeta>
|
||||||
<OperatorName>{SISTER_META[derived.activeProject.ownerSister]?.label ?? derived.activeProject.ownerSister}</OperatorName>
|
</OperatorCard>
|
||||||
<OperatorMeta>
|
<OperatorCard>
|
||||||
{SISTER_META[derived.activeProject.ownerSister]?.role ?? 'unknown'} / SNAPSHOT OWNER
|
<MetaLabel>runtime lag</MetaLabel>
|
||||||
</OperatorMeta>
|
<OperatorValue>{formatSyncLabel(derived.freshness.sistersLatestAt)}</OperatorValue>
|
||||||
</OperatorText>
|
<OperatorMeta>RUNTIME SNAPSHOT</OperatorMeta>
|
||||||
</>
|
</OperatorCard>
|
||||||
) : (
|
<OperatorCard>
|
||||||
<OperatorText>
|
<MetaLabel>activity lag</MetaLabel>
|
||||||
<OperatorName>NO ACTIVE OWNER</OperatorName>
|
<OperatorValue>{formatSyncLabel(derived.freshness.activityLatestAt)}</OperatorValue>
|
||||||
<OperatorMeta>UNASSIGNED</OperatorMeta>
|
<OperatorMeta>EVENT MIRROR</OperatorMeta>
|
||||||
</OperatorText>
|
</OperatorCard>
|
||||||
)}
|
<OperatorCard>
|
||||||
</OperatorRow>
|
<MetaLabel>qa doc lag</MetaLabel>
|
||||||
|
<OperatorValue>{formatSyncLabel(derived.freshness.qaDocLatestAt)}</OperatorValue>
|
||||||
|
<OperatorMeta>DOC-DERIVED</OperatorMeta>
|
||||||
|
</OperatorCard>
|
||||||
|
</OperatorGrid>
|
||||||
|
|
||||||
<QuickLinks>
|
<QuickLinks>
|
||||||
<QuickLink href="/projects">
|
<QuickLink href="/projects">
|
||||||
@@ -1116,7 +1118,7 @@ export default function DashboardPage() {
|
|||||||
<PanelTitleBlock>
|
<PanelTitleBlock>
|
||||||
<Eyebrow>Activity feed</Eyebrow>
|
<Eyebrow>Activity feed</Eyebrow>
|
||||||
<PanelTitle>EVENT MIRROR</PanelTitle>
|
<PanelTitle>EVENT MIRROR</PanelTitle>
|
||||||
<PanelDesc>{connected ? 'SOURCE: MIRRORED EVENT' : 'SOURCE: SNAPSHOT'}</PanelDesc>
|
<PanelDesc>WEBSOCKET + POLLING SNAPSHOT</PanelDesc>
|
||||||
</PanelTitleBlock>
|
</PanelTitleBlock>
|
||||||
<LabelMeta><span>EVENT:</span>{String(activityItems.length).padStart(2, '0')}</LabelMeta>
|
<LabelMeta><span>EVENT:</span>{String(activityItems.length).padStart(2, '0')}</LabelMeta>
|
||||||
</PanelHeader>
|
</PanelHeader>
|
||||||
@@ -1153,7 +1155,7 @@ export default function DashboardPage() {
|
|||||||
<PanelTitleBlock>
|
<PanelTitleBlock>
|
||||||
<Eyebrow>Sprint metrics</Eyebrow>
|
<Eyebrow>Sprint metrics</Eyebrow>
|
||||||
<PanelTitle>SPRINT METRICS</PanelTitle>
|
<PanelTitle>SPRINT METRICS</PanelTitle>
|
||||||
<PanelDesc>SOURCE: SNAPSHOT</PanelDesc>
|
<PanelDesc>POLLING SNAPSHOT</PanelDesc>
|
||||||
</PanelTitleBlock>
|
</PanelTitleBlock>
|
||||||
<LabelMeta><span>SPRINT:</span>{String(derived.totalSprints).padStart(2, '0')}</LabelMeta>
|
<LabelMeta><span>SPRINT:</span>{String(derived.totalSprints).padStart(2, '0')}</LabelMeta>
|
||||||
</PanelHeader>
|
</PanelHeader>
|
||||||
@@ -1199,7 +1201,7 @@ export default function DashboardPage() {
|
|||||||
<PanelTitleBlock>
|
<PanelTitleBlock>
|
||||||
<Eyebrow>Infrastructure overview</Eyebrow>
|
<Eyebrow>Infrastructure overview</Eyebrow>
|
||||||
<PanelTitle>RUNTIME SURFACE</PanelTitle>
|
<PanelTitle>RUNTIME SURFACE</PanelTitle>
|
||||||
<PanelDesc>SOURCE: {connected ? 'LIVE' : 'SNAPSHOT'} / DOC-DERIVED</PanelDesc>
|
<PanelDesc>LIVE / SNAPSHOT / DOC-DERIVED</PanelDesc>
|
||||||
</PanelTitleBlock>
|
</PanelTitleBlock>
|
||||||
<LabelMeta><span>NODE:</span>{String(sisters.length).padStart(2, '0')}</LabelMeta>
|
<LabelMeta><span>NODE:</span>{String(sisters.length).padStart(2, '0')}</LabelMeta>
|
||||||
</PanelHeader>
|
</PanelHeader>
|
||||||
@@ -1220,7 +1222,7 @@ export default function DashboardPage() {
|
|||||||
<PanelTitleBlock>
|
<PanelTitleBlock>
|
||||||
<Eyebrow>Mistake log & harness</Eyebrow>
|
<Eyebrow>Mistake log & harness</Eyebrow>
|
||||||
<PanelTitle>RULE / LOG BOARD</PanelTitle>
|
<PanelTitle>RULE / LOG BOARD</PanelTitle>
|
||||||
<PanelDesc>SOURCE: DOC-DERIVED / ACTIVITY</PanelDesc>
|
<PanelDesc>DOC-DERIVED / ACTIVITY</PanelDesc>
|
||||||
</PanelTitleBlock>
|
</PanelTitleBlock>
|
||||||
<LabelMeta><span>RULE:</span>{String(derived.board.length).padStart(2, '0')}</LabelMeta>
|
<LabelMeta><span>RULE:</span>{String(derived.board.length).padStart(2, '0')}</LabelMeta>
|
||||||
</PanelHeader>
|
</PanelHeader>
|
||||||
|
|||||||
@@ -4,17 +4,78 @@ import React, { useEffect, useMemo, useState } from 'react';
|
|||||||
import { useParams } from 'next/navigation';
|
import { useParams } from 'next/navigation';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { LabelMeta, PageTitle, SectionTitle, TechBar, TechBarFill, BtnToggle } from '@/components/ui/base';
|
import {
|
||||||
|
LabelMeta,
|
||||||
|
PageTitle,
|
||||||
|
SectionTitle,
|
||||||
|
TechBar,
|
||||||
|
TechBarFill,
|
||||||
|
BtnToggle,
|
||||||
|
} from '@/components/ui/base';
|
||||||
import { API_URL } from '@/lib/config';
|
import { API_URL } from '@/lib/config';
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
import SisterAvatar from '@/components/common/SisterAvatar';
|
||||||
|
|
||||||
interface TaskItem { id: number; taskId: string; title: string; assignee: string; status: string; }
|
interface TaskItem {
|
||||||
interface SprintItem { id: number; number: number; name: string; status: string; progress: number; tasks: TaskItem[]; }
|
id: number;
|
||||||
interface HistoryItem { label: string; kind: 'sprint' | 'hotfix'; summary?: string | null; description?: string | null; }
|
taskId: string;
|
||||||
interface SisterState { name: string; status: string; }
|
title: string;
|
||||||
interface CommitItem { sha?: string; html_url?: string; commit?: { message?: string; author?: { date?: string; name?: string } }; author?: { login?: string } | null; }
|
assignee: string;
|
||||||
interface BranchItem { name?: string; protected?: boolean; commit?: { id?: string } }
|
status: string;
|
||||||
interface PullItem { id?: number; number?: number; title?: string; html_url?: string; state?: string; merged?: boolean; user?: { login?: string }; created_at?: string; }
|
}
|
||||||
|
|
||||||
|
interface SprintItem {
|
||||||
|
id: number;
|
||||||
|
number: number;
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
progress: number;
|
||||||
|
tasks: TaskItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HistoryItem {
|
||||||
|
label: string;
|
||||||
|
kind: 'sprint' | 'hotfix' | 'qa';
|
||||||
|
summary?: string | null;
|
||||||
|
description?: string | null;
|
||||||
|
qaStatus?: 'passed' | 'failed' | 'unknown';
|
||||||
|
blockerCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SisterState {
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CommitItem {
|
||||||
|
sha?: string;
|
||||||
|
html_url?: string;
|
||||||
|
commit?: { message?: string; author?: { date?: string; name?: string } };
|
||||||
|
author?: { login?: string } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BranchItem {
|
||||||
|
name?: string;
|
||||||
|
protected?: boolean;
|
||||||
|
commit?: { id?: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PullItem {
|
||||||
|
id?: number;
|
||||||
|
number?: number;
|
||||||
|
title?: string;
|
||||||
|
html_url?: string;
|
||||||
|
state?: string;
|
||||||
|
merged?: boolean;
|
||||||
|
user?: { login?: string };
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AssignedNode {
|
||||||
|
name: string;
|
||||||
|
role?: string;
|
||||||
|
assigned?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
interface ProjectDetail {
|
interface ProjectDetail {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -22,39 +83,215 @@ interface ProjectDetail {
|
|||||||
status: string;
|
status: string;
|
||||||
phase: string;
|
phase: string;
|
||||||
currentSprint?: string | null;
|
currentSprint?: string | null;
|
||||||
latestQa: { label: string | null; status: 'passed' | 'failed' | 'unknown'; blockerCount: number; summary: string | null } | null;
|
latestQa: {
|
||||||
deploy: { branch: string; status: string; latestDeployAt: string | null; redeployRequired: boolean; note: string };
|
label: string | null;
|
||||||
|
status: 'passed' | 'failed' | 'unknown';
|
||||||
|
blockerCount: number;
|
||||||
|
summary: string | null;
|
||||||
|
} | null;
|
||||||
|
deploy: {
|
||||||
|
branch: string;
|
||||||
|
status: string;
|
||||||
|
latestDeployAt: string | null;
|
||||||
|
redeployRequired: boolean;
|
||||||
|
note: string;
|
||||||
|
};
|
||||||
|
assignedNodes?: AssignedNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const Breadcrumb = styled.div`font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin-bottom:var(--space-md);a{color:var(--text-secondary);text-decoration:none;&:hover{color:var(--text-primary);}}`;
|
const Breadcrumb = styled.div`
|
||||||
const PageTitleRow = styled.div`display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap;`;
|
font-family: var(--font-mono);
|
||||||
const ProjectGrid = styled.div`display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-xl);align-items:start;@media (max-width:1199px){display:flex;flex-direction:column;}`;
|
font-size: 11px;
|
||||||
const Panel = styled.section<{ $column?: 'main' | 'side'; $mobileOrder?: number }>`border:1px solid var(--border-color);padding:var(--space-lg);background:var(--bg-surface);${({$column})=>$column==='side'?'grid-column:2;':'grid-column:1;'}@media (max-width:1199px){order:${({$mobileOrder=0})=>$mobileOrder};}`;
|
color: var(--text-secondary);
|
||||||
const FlowList = styled.div`display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-sm);@media (max-width:767px){grid-template-columns:1fr;}`;
|
margin-bottom: var(--space-md);
|
||||||
const FlowItem = styled.div<{ $active:boolean }>`border:1px solid ${({$active})=>$active?'var(--text-primary)':'var(--border-color)'};padding:var(--space-md);background:${({$active})=>$active?'#111':'transparent'};display:flex;flex-direction:column;gap:4px;`;
|
|
||||||
const LedgerList = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
|
|
||||||
const LedgerItem = styled.div`display:flex;flex-direction:column;gap:8px;border-top:1px solid #1a1a1a;padding-top:var(--space-md);&:first-child{border-top:none;padding-top:0;}`;
|
|
||||||
const Meta = styled.div`font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);`;
|
|
||||||
const NodeStack = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
|
|
||||||
const NodeMiniCard = styled.div`border:1px solid var(--border-color);padding:var(--space-sm) var(--space-md);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);`;
|
|
||||||
const NodeInfo = styled.div`display:flex;align-items:center;gap:var(--space-sm);`;
|
|
||||||
const NodeDot = styled.div<{ $status:string }>`width:8px;height:8px;border-radius:50%;background:${({$status})=>$status==='online'?'#00ff88':$status==='working'?'#5fafff':'#555'};`;
|
|
||||||
const Empty = styled.div`padding:var(--space-xl) 0;color:var(--text-secondary);font-size:13px;font-family:var(--font-mono);`;
|
|
||||||
const TabBar = styled.div`display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap;`;
|
|
||||||
const GitList = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
|
|
||||||
const GitItem = styled.a`border:1px solid var(--border-color);padding:12px var(--space-lg);text-decoration:none;color:var(--text-primary);display:flex;justify-content:space-between;gap:var(--space-md);align-items:center;`;
|
|
||||||
const GitPrimary = styled.div`display:flex;flex-direction:column;gap:4px;min-width:0;`;
|
|
||||||
const GitTitle = styled.div`font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`;
|
|
||||||
|
|
||||||
const ParticipantSection = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
|
a {
|
||||||
const ParticipantCard = styled.div`border:1px solid var(--border-color);padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;gap:6px;`;
|
color: var(--text-secondary);
|
||||||
const ParticipantBadgeRow = styled.div`display:flex;gap:var(--space-xs);flex-wrap:wrap;`;
|
text-decoration: none;
|
||||||
const WhyBadge = styled.span`font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;padding:2px 6px;border:1px solid #2979FF;color:#2979FF;white-space:nowrap;`;
|
|
||||||
const SourceBadge = styled.span`font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;padding:2px 6px;border:1px solid #777;color:#777;white-space:nowrap;`;
|
|
||||||
const EmptyParticipant = styled.div`font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em;padding:var(--space-md) 0;`;
|
|
||||||
|
|
||||||
const ROLE_LABEL: Record<string, string> = { harang: 'ORCHESTRATOR', narang: 'GENERATOR', darang: 'EVALUATOR', erang: 'INFRA' };
|
&:hover {
|
||||||
const ROLE_NAME: Record<string, string> = { harang: '하랑', narang: '나랑', darang: '다랑', erang: '이랑' };
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PageTitleRow = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TabBar = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const OverviewGrid = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) 320px;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MainColumn = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SideColumn = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Panel = styled.section`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FlowList = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: var(--space-sm);
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FlowItem = styled.div<{ $active: boolean }>`
|
||||||
|
border: 1px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--border-color)')};
|
||||||
|
padding: var(--space-md);
|
||||||
|
background: ${({ $active }) => ($active ? '#111' : 'transparent')};
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatusStack = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LedgerList = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LedgerItem = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
border-top: 1px solid #1a1a1a;
|
||||||
|
padding-top: var(--space-md);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top: none;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Meta = styled.div`
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NodeStack = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NodeMiniCard = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NodeInfo = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NodeDot = styled.div<{ $status: string }>`
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: ${({ $status }) => ($status === 'online' ? '#00ff88' : $status === 'working' ? '#5fafff' : '#555')};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Empty = styled.div`
|
||||||
|
padding: var(--space-xl) 0;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GitList = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GitItem = styled.a`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 12px var(--space-lg);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-md);
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GitPrimary = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
min-width: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GitTitle = styled.div`
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ROLE_LABEL: Record<string, string> = {
|
||||||
|
harang: 'ORCHESTRATOR',
|
||||||
|
narang: 'GENERATOR',
|
||||||
|
darang: 'EVALUATOR',
|
||||||
|
erang: 'INFRA',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ROLE_NAME: Record<string, string> = {
|
||||||
|
harang: '하랑',
|
||||||
|
narang: '나랑',
|
||||||
|
darang: '다랑',
|
||||||
|
erang: '이랑',
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEFAULT_NODE_ORDER = ['harang', 'narang', 'darang', 'erang'] as const;
|
||||||
|
|
||||||
function formatDate(value?: string | null): string {
|
function formatDate(value?: string | null): string {
|
||||||
if (!value) return '-';
|
if (!value) return '-';
|
||||||
@@ -79,54 +316,48 @@ export default function ProjectDetailPage() {
|
|||||||
fetch(`${API_URL}/api/projects/${id}/tasks`),
|
fetch(`${API_URL}/api/projects/${id}/tasks`),
|
||||||
fetch(`${API_URL}/api/projects/${id}/history`),
|
fetch(`${API_URL}/api/projects/${id}/history`),
|
||||||
fetch(`${API_URL}/api/sisters`),
|
fetch(`${API_URL}/api/sisters`),
|
||||||
]).then(async ([projectRes, tasksRes, historyRes, sistersRes]) => {
|
])
|
||||||
if (projectRes.status === 'fulfilled' && projectRes.value.ok) setProject(await projectRes.value.json());
|
.then(async ([projectRes, tasksRes, historyRes, sistersRes]) => {
|
||||||
if (tasksRes.status === 'fulfilled' && tasksRes.value.ok) setTasks(await tasksRes.value.json());
|
if (projectRes.status === 'fulfilled' && projectRes.value.ok) {
|
||||||
if (historyRes.status === 'fulfilled' && historyRes.value.ok) setHistory(await historyRes.value.json());
|
setProject(await projectRes.value.json());
|
||||||
if (sistersRes.status === 'fulfilled' && sistersRes.value.ok) setSisters(await sistersRes.value.json());
|
}
|
||||||
}).finally(() => setLoading(false));
|
if (tasksRes.status === 'fulfilled' && tasksRes.value.ok) {
|
||||||
|
setTasks(await tasksRes.value.json());
|
||||||
|
}
|
||||||
|
if (historyRes.status === 'fulfilled' && historyRes.value.ok) {
|
||||||
|
setHistory(await historyRes.value.json());
|
||||||
|
}
|
||||||
|
if (sistersRes.status === 'fulfilled' && sistersRes.value.ok) {
|
||||||
|
setSisters(await sistersRes.value.json());
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
}, [id]);
|
}, [id]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (tab === 'commits' && commits.length === 0) fetch(`${API_URL}/api/projects/${id}/commits?limit=20`).then((r) => r.ok ? r.json() : []).then(setCommits).catch(() => {});
|
if (tab === 'commits' && commits.length === 0) {
|
||||||
if (tab === 'branches' && branches.length === 0) fetch(`${API_URL}/api/projects/${id}/branches`).then((r) => r.ok ? r.json() : []).then(setBranches).catch(() => {});
|
fetch(`${API_URL}/api/projects/${id}/commits?limit=20`)
|
||||||
if (tab === 'prs' && pulls.length === 0) fetch(`${API_URL}/api/projects/${id}/pulls?state=all`).then((r) => r.ok ? r.json() : []).then(setPulls).catch(() => {});
|
.then((r) => (r.ok ? r.json() : []))
|
||||||
|
.then(setCommits)
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
if (tab === 'branches' && branches.length === 0) {
|
||||||
|
fetch(`${API_URL}/api/projects/${id}/branches`)
|
||||||
|
.then((r) => (r.ok ? r.json() : []))
|
||||||
|
.then(setBranches)
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
|
if (tab === 'prs' && pulls.length === 0) {
|
||||||
|
fetch(`${API_URL}/api/projects/${id}/pulls?state=all`)
|
||||||
|
.then((r) => (r.ok ? r.json() : []))
|
||||||
|
.then(setPulls)
|
||||||
|
.catch(() => {});
|
||||||
|
}
|
||||||
}, [tab, id, commits.length, branches.length, pulls.length]);
|
}, [tab, id, commits.length, branches.length, pulls.length]);
|
||||||
|
|
||||||
const allTasks = useMemo(() => tasks.flatMap((sprint) => sprint.tasks ?? []), [tasks]);
|
|
||||||
const participantModel = useMemo(() => {
|
|
||||||
const taskAssigneeNames = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
|
|
||||||
const taskCountByAssignee: Record<string, number> = {};
|
|
||||||
for (const task of allTasks) {
|
|
||||||
if (task.assignee) {
|
|
||||||
taskCountByAssignee[task.assignee] = (taskCountByAssignee[task.assignee] ?? 0) + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const participants: { name: string; whyVisible: string[]; source: string; status: string }[] = [];
|
|
||||||
for (const name of taskAssigneeNames) {
|
|
||||||
const reasons: string[] = [];
|
|
||||||
if (taskCountByAssignee[name]) reasons.push('task_assignee');
|
|
||||||
const sisterStatus = sisters.find((s) => s.name === name)?.status ?? 'offline';
|
|
||||||
if (sisterStatus === 'working' || sisterStatus === 'online') reasons.push('current_implementer');
|
|
||||||
participants.push({
|
|
||||||
name,
|
|
||||||
whyVisible: reasons.length > 0 ? reasons : ['task_assignee'],
|
|
||||||
source: 'snapshot',
|
|
||||||
status: sisterStatus,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
currentOwners: [] as { name: string; source: string }[],
|
|
||||||
participants,
|
|
||||||
taskAssignees: taskAssigneeNames.map((name) => ({
|
|
||||||
name,
|
|
||||||
taskCount: taskCountByAssignee[name] ?? 0,
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
}, [allTasks, sisters]);
|
|
||||||
const hotfixes = history.filter((entry) => entry.kind === 'hotfix');
|
const hotfixes = history.filter((entry) => entry.kind === 'hotfix');
|
||||||
|
const qaHistory = history.filter((entry) => entry.kind === 'qa');
|
||||||
|
|
||||||
const currentSprintMeta = useMemo(() => {
|
const currentSprintMeta = useMemo(() => {
|
||||||
if (project?.currentSprint) return project.currentSprint;
|
if (project?.currentSprint) return project.currentSprint;
|
||||||
|
|
||||||
@@ -140,6 +371,15 @@ export default function ProjectDetailPage() {
|
|||||||
return 'BACKLOG';
|
return 'BACKLOG';
|
||||||
}, [project, tasks]);
|
}, [project, tasks]);
|
||||||
|
|
||||||
|
const assignedNodes = useMemo(() => {
|
||||||
|
const apiNodes = project?.assignedNodes ?? [];
|
||||||
|
return DEFAULT_NODE_ORDER.map((name) => ({
|
||||||
|
name,
|
||||||
|
assigned: apiNodes.find((node) => node.name === name)?.assigned ?? false,
|
||||||
|
status: sisters.find((sister) => sister.name === name)?.status ?? 'offline',
|
||||||
|
}));
|
||||||
|
}, [project, sisters]);
|
||||||
|
|
||||||
if (loading) return <Empty>LOADING...</Empty>;
|
if (loading) return <Empty>LOADING...</Empty>;
|
||||||
if (!project) return <Empty>PROJECT NOT FOUND</Empty>;
|
if (!project) return <Empty>PROJECT NOT FOUND</Empty>;
|
||||||
|
|
||||||
@@ -153,26 +393,55 @@ export default function ProjectDetailPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Breadcrumb><Link href="/projects">PROJECTS</Link> / P-{String(project.id).padStart(3, '0')} / {project.name}</Breadcrumb>
|
<Breadcrumb>
|
||||||
|
<Link href="/projects">PROJECTS</Link> / P-{String(project.id).padStart(3, '0')} / {project.name}
|
||||||
|
</Breadcrumb>
|
||||||
|
|
||||||
<PageTitleRow>
|
<PageTitleRow>
|
||||||
<PageTitle>
|
<PageTitle>
|
||||||
{project.name}
|
{project.name}
|
||||||
{project.repoUrl && <a href={project.repoUrl} target="_blank" rel="noopener" style={{ fontSize: '12px', color: '#5fafff', marginLeft: 'var(--space-md)', fontWeight: 400 }}>↗ GITEA</a>}
|
{project.repoUrl && (
|
||||||
|
<a
|
||||||
|
href={project.repoUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
style={{ fontSize: '12px', color: '#5fafff', marginLeft: 'var(--space-md)', fontWeight: 400 }}
|
||||||
|
>
|
||||||
|
↗ GITEA
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
</PageTitle>
|
</PageTitle>
|
||||||
<LabelMeta><span>STATUS:</span>{project.status?.toUpperCase()} / <span>SPRINT:</span>{currentSprintMeta} / <span>DEPLOY:</span>{project.deploy.status}</LabelMeta>
|
<LabelMeta>
|
||||||
|
<span>STATUS:</span>
|
||||||
|
{project.status?.toUpperCase()} / <span>SPRINT:</span>
|
||||||
|
{currentSprintMeta} / <span>DEPLOY:</span>
|
||||||
|
{project.deploy.status}
|
||||||
|
</LabelMeta>
|
||||||
</PageTitleRow>
|
</PageTitleRow>
|
||||||
|
|
||||||
<TabBar>
|
<TabBar>
|
||||||
<BtnToggle $active={tab === 'overview'} onClick={() => setTab('overview')}>Overview</BtnToggle>
|
<BtnToggle $active={tab === 'overview'} onClick={() => setTab('overview')}>
|
||||||
<BtnToggle $active={tab === 'commits'} onClick={() => setTab('commits')}>Commits</BtnToggle>
|
Overview
|
||||||
<BtnToggle $active={tab === 'branches'} onClick={() => setTab('branches')}>Branches</BtnToggle>
|
</BtnToggle>
|
||||||
<BtnToggle $active={tab === 'prs'} onClick={() => setTab('prs')}>Pull Requests</BtnToggle>
|
<BtnToggle $active={tab === 'commits'} onClick={() => setTab('commits')}>
|
||||||
|
Commits
|
||||||
|
</BtnToggle>
|
||||||
|
<BtnToggle $active={tab === 'branches'} onClick={() => setTab('branches')}>
|
||||||
|
Branches
|
||||||
|
</BtnToggle>
|
||||||
|
<BtnToggle $active={tab === 'prs'} onClick={() => setTab('prs')}>
|
||||||
|
Pull Requests
|
||||||
|
</BtnToggle>
|
||||||
</TabBar>
|
</TabBar>
|
||||||
|
|
||||||
{tab === 'overview' && (
|
{tab === 'overview' && (
|
||||||
<ProjectGrid>
|
<OverviewGrid>
|
||||||
<Panel $column="main" $mobileOrder={1}>
|
<MainColumn>
|
||||||
<SectionTitle><span>DELIVERY FLOW</span><LabelMeta>{project.phase}</LabelMeta></SectionTitle>
|
<Panel>
|
||||||
|
<SectionTitle>
|
||||||
|
<span>DELIVERY FLOW</span>
|
||||||
|
<LabelMeta>{project.phase}</LabelMeta>
|
||||||
|
</SectionTitle>
|
||||||
<FlowList>
|
<FlowList>
|
||||||
{flowStates.map((item) => (
|
{flowStates.map((item) => (
|
||||||
<FlowItem key={item.key} $active={item.active}>
|
<FlowItem key={item.key} $active={item.active}>
|
||||||
@@ -183,121 +452,120 @@ export default function ProjectDetailPage() {
|
|||||||
</FlowList>
|
</FlowList>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<Panel $column="side" $mobileOrder={2}>
|
<Panel>
|
||||||
<SectionTitle><span>QA STATUS</span><LabelMeta>{project.latestQa?.status ?? 'unknown'}</LabelMeta></SectionTitle>
|
<SectionTitle>
|
||||||
<Meta>{project.latestQa?.label ?? 'QA 문서 없음'}</Meta>
|
<span>SPRINT LEDGER</span>
|
||||||
<div style={{ marginTop: 'var(--space-md)', fontSize: '13px', color: 'var(--text-primary)' }}>{project.latestQa?.summary ?? 'latest QA 없음'}</div>
|
<LabelMeta>{tasks.length} SPRINTS</LabelMeta>
|
||||||
<Meta style={{ marginTop: 'var(--space-md)' }}>{project.latestQa?.status === 'passed' ? 'QA PASSED' : project.latestQa?.status === 'failed' ? `QA FAILED · ${project.latestQa.blockerCount} BLOCKERS` : 'QA PENDING'}</Meta>
|
</SectionTitle>
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel $column="side" $mobileOrder={3}>
|
|
||||||
<SectionTitle><span>DEPLOY STATUS</span><LabelMeta>{project.deploy.branch}</LabelMeta></SectionTitle>
|
|
||||||
<Meta>{project.deploy.status}</Meta>
|
|
||||||
<Meta style={{ marginTop: 'var(--space-sm)' }}>{project.deploy.note}</Meta>
|
|
||||||
<Meta style={{ marginTop: 'var(--space-sm)' }}>{project.deploy.latestDeployAt ? formatDate(project.deploy.latestDeployAt) : 'LAST DEPLOY UNKNOWN'}</Meta>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel $column="main" $mobileOrder={4}>
|
|
||||||
<SectionTitle><span>SPRINT LEDGER</span><LabelMeta>{tasks.length} SPRINTS</LabelMeta></SectionTitle>
|
|
||||||
<LedgerList>
|
<LedgerList>
|
||||||
{tasks.map((sprint) => (
|
{tasks.map((sprint) => (
|
||||||
<LedgerItem key={sprint.id}>
|
<LedgerItem key={sprint.id}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>SPRINT {String(sprint.number).padStart(2, '0')} · {sprint.name}</div>
|
<div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>
|
||||||
<Meta>{sprint.tasks?.length ?? 0} TASKS · {sprint.tasks?.filter((task) => task.status === 'done').length ?? 0} DONE</Meta>
|
SPRINT {String(sprint.number).padStart(2, '0')} · {sprint.name}
|
||||||
|
</div>
|
||||||
|
<Meta>
|
||||||
|
{sprint.tasks?.length ?? 0} TASKS · {sprint.tasks?.filter((task) => task.status === 'done').length ?? 0} DONE
|
||||||
|
</Meta>
|
||||||
</div>
|
</div>
|
||||||
<LabelMeta>{sprint.status}</LabelMeta>
|
<LabelMeta>{sprint.status}</LabelMeta>
|
||||||
</div>
|
</div>
|
||||||
<TechBar><TechBarFill $width={sprint.progress ?? 0} /></TechBar>
|
<TechBar>
|
||||||
|
<TechBarFill $width={sprint.progress ?? 0} />
|
||||||
|
</TechBar>
|
||||||
</LedgerItem>
|
</LedgerItem>
|
||||||
))}
|
))}
|
||||||
{tasks.length === 0 && <Empty>NO SPRINTS</Empty>}
|
{tasks.length === 0 && <Empty>NO SPRINTS</Empty>}
|
||||||
</LedgerList>
|
</LedgerList>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<Panel $column="main" $mobileOrder={5}>
|
<Panel>
|
||||||
<SectionTitle><span>HOTFIX HISTORY</span><LabelMeta>{hotfixes.length} ITEMS</LabelMeta></SectionTitle>
|
<SectionTitle>
|
||||||
|
<span>QA / HOTFIX HISTORY</span>
|
||||||
|
<LabelMeta>{qaHistory.length + hotfixes.length} ITEMS</LabelMeta>
|
||||||
|
</SectionTitle>
|
||||||
<LedgerList>
|
<LedgerList>
|
||||||
|
{qaHistory.map((entry) => (
|
||||||
|
<LedgerItem key={`qa-${entry.label}`}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
|
||||||
|
<div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>{entry.label}</div>
|
||||||
|
<LabelMeta>{entry.qaStatus ?? 'unknown'}</LabelMeta>
|
||||||
|
</div>
|
||||||
|
<Meta>{entry.summary ?? entry.description ?? 'qa summary 없음'}</Meta>
|
||||||
|
{typeof entry.blockerCount === 'number' && <Meta>{entry.blockerCount} BLOCKERS</Meta>}
|
||||||
|
</LedgerItem>
|
||||||
|
))}
|
||||||
{hotfixes.map((entry) => (
|
{hotfixes.map((entry) => (
|
||||||
<LedgerItem key={entry.label}>
|
<LedgerItem key={`hotfix-${entry.label}`}>
|
||||||
<div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>{entry.label}</div>
|
<div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>{entry.label}</div>
|
||||||
<Meta>{entry.summary ?? entry.description ?? 'hotfix summary 없음'}</Meta>
|
<Meta>{entry.summary ?? entry.description ?? 'hotfix summary 없음'}</Meta>
|
||||||
</LedgerItem>
|
</LedgerItem>
|
||||||
))}
|
))}
|
||||||
{hotfixes.length === 0 && <Empty>NO HOTFIX HISTORY</Empty>}
|
{qaHistory.length === 0 && hotfixes.length === 0 && <Empty>NO QA / HOTFIX HISTORY</Empty>}
|
||||||
</LedgerList>
|
</LedgerList>
|
||||||
</Panel>
|
</Panel>
|
||||||
|
</MainColumn>
|
||||||
|
|
||||||
<Panel $column="side" $mobileOrder={6}>
|
<SideColumn>
|
||||||
<SectionTitle><span>CURRENT OWNERS</span><LabelMeta>SNAPSHOT</LabelMeta></SectionTitle>
|
<StatusStack>
|
||||||
<ParticipantSection>
|
<Panel>
|
||||||
{participantModel.currentOwners.length === 0 ? (
|
<SectionTitle>
|
||||||
<EmptyParticipant>NO ACTIVE OWNER</EmptyParticipant>
|
<span>QA STATUS</span>
|
||||||
) : (
|
<LabelMeta>{project.latestQa?.status ?? 'unknown'}</LabelMeta>
|
||||||
participantModel.currentOwners.map((owner) => (
|
</SectionTitle>
|
||||||
<NodeMiniCard key={owner.name}>
|
<Meta>{project.latestQa?.label ?? 'QA 문서 없음'}</Meta>
|
||||||
<NodeInfo>
|
<div style={{ marginTop: 'var(--space-md)', fontSize: '13px', color: 'var(--text-primary)' }}>
|
||||||
<SisterAvatar name={owner.name} size={28} />
|
{project.latestQa?.summary ?? 'latest QA 없음'}
|
||||||
<div>
|
|
||||||
<div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[owner.name] ?? owner.name}</div>
|
|
||||||
<Meta>{ROLE_LABEL[owner.name] ?? 'OWNER'}</Meta>
|
|
||||||
</div>
|
</div>
|
||||||
</NodeInfo>
|
<Meta style={{ marginTop: 'var(--space-md)' }}>
|
||||||
<SourceBadge>{owner.source}</SourceBadge>
|
{project.latestQa?.status === 'passed'
|
||||||
</NodeMiniCard>
|
? 'QA PASSED'
|
||||||
))
|
: project.latestQa?.status === 'failed'
|
||||||
)}
|
? `QA FAILED · ${project.latestQa.blockerCount} BLOCKERS`
|
||||||
</ParticipantSection>
|
: 'QA PENDING'}
|
||||||
|
</Meta>
|
||||||
|
</Panel>
|
||||||
|
|
||||||
<SectionTitle style={{ marginTop: 'var(--space-lg)' }}><span>PARTICIPANTS</span><LabelMeta>SNAPSHOT</LabelMeta></SectionTitle>
|
<Panel>
|
||||||
<ParticipantSection>
|
<SectionTitle>
|
||||||
{participantModel.participants.length === 0 ? (
|
<span>DEPLOY STATUS</span>
|
||||||
<EmptyParticipant>NO CONFIRMED ACTIVE PARTICIPANT</EmptyParticipant>
|
<LabelMeta>{project.deploy.branch}</LabelMeta>
|
||||||
) : (
|
</SectionTitle>
|
||||||
participantModel.participants.map((p) => (
|
<Meta>{project.deploy.status}</Meta>
|
||||||
<ParticipantCard key={p.name}>
|
<Meta style={{ marginTop: 'var(--space-sm)' }}>{project.deploy.note}</Meta>
|
||||||
<NodeInfo>
|
<Meta style={{ marginTop: 'var(--space-sm)' }}>
|
||||||
<SisterAvatar name={p.name} size={28} />
|
{project.deploy.latestDeployAt ? formatDate(project.deploy.latestDeployAt) : 'LAST DEPLOY UNKNOWN'}
|
||||||
<div>
|
</Meta>
|
||||||
<div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[p.name] ?? p.name}</div>
|
</Panel>
|
||||||
<Meta>{ROLE_LABEL[p.name] ?? 'PARTICIPANT'}</Meta>
|
|
||||||
</div>
|
|
||||||
</NodeInfo>
|
|
||||||
<ParticipantBadgeRow>
|
|
||||||
{p.whyVisible.map((reason) => (
|
|
||||||
<WhyBadge key={reason}>{reason}</WhyBadge>
|
|
||||||
))}
|
|
||||||
<SourceBadge>{p.source}</SourceBadge>
|
|
||||||
</ParticipantBadgeRow>
|
|
||||||
</ParticipantCard>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</ParticipantSection>
|
|
||||||
|
|
||||||
<SectionTitle style={{ marginTop: 'var(--space-lg)' }}><span>TASK ASSIGNEES</span><LabelMeta>{participantModel.taskAssignees.length} ASSIGNEES</LabelMeta></SectionTitle>
|
<Panel>
|
||||||
<ParticipantSection>
|
<SectionTitle>
|
||||||
{participantModel.taskAssignees.length === 0 ? (
|
<span>ASSIGNED NODES</span>
|
||||||
<EmptyParticipant>NO TASK ASSIGNEE DATA</EmptyParticipant>
|
<LabelMeta>4 SISTERS</LabelMeta>
|
||||||
) : (
|
</SectionTitle>
|
||||||
<NodeStack>
|
<NodeStack>
|
||||||
{participantModel.taskAssignees.map((a) => (
|
{assignedNodes.map((node) => (
|
||||||
<NodeMiniCard key={a.name}>
|
<NodeMiniCard key={node.name}>
|
||||||
<NodeInfo>
|
<NodeInfo>
|
||||||
<SisterAvatar name={a.name} size={28} />
|
<SisterAvatar name={node.name} size={28} />
|
||||||
<div>
|
<div>
|
||||||
<div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[a.name] ?? a.name}</div>
|
<div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>
|
||||||
<Meta>{a.taskCount} TASKS</Meta>
|
{ROLE_NAME[node.name] ?? node.name}
|
||||||
|
</div>
|
||||||
|
<Meta>
|
||||||
|
{ROLE_LABEL[node.name] ?? 'NODE'} · {node.assigned ? 'ASSIGNED' : 'STANDBY'}
|
||||||
|
</Meta>
|
||||||
</div>
|
</div>
|
||||||
</NodeInfo>
|
</NodeInfo>
|
||||||
<SourceBadge>snapshot</SourceBadge>
|
<NodeDot $status={node.status} />
|
||||||
</NodeMiniCard>
|
</NodeMiniCard>
|
||||||
))}
|
))}
|
||||||
</NodeStack>
|
</NodeStack>
|
||||||
)}
|
|
||||||
</ParticipantSection>
|
|
||||||
</Panel>
|
</Panel>
|
||||||
</ProjectGrid>
|
</StatusStack>
|
||||||
|
</SideColumn>
|
||||||
|
</OverviewGrid>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{tab === 'commits' && (
|
{tab === 'commits' && (
|
||||||
@@ -308,7 +576,9 @@ export default function ProjectDetailPage() {
|
|||||||
<GitTitle>{commit.commit?.message?.split('\n')[0] ?? commit.sha ?? 'UNKNOWN COMMIT'}</GitTitle>
|
<GitTitle>{commit.commit?.message?.split('\n')[0] ?? commit.sha ?? 'UNKNOWN COMMIT'}</GitTitle>
|
||||||
<Meta>{commit.commit?.author?.name ?? commit.author?.login ?? '-'}</Meta>
|
<Meta>{commit.commit?.author?.name ?? commit.author?.login ?? '-'}</Meta>
|
||||||
</GitPrimary>
|
</GitPrimary>
|
||||||
<Meta>{commit.sha?.slice(0, 7) ?? '-'} · {formatDate(commit.commit?.author?.date)}</Meta>
|
<Meta>
|
||||||
|
{commit.sha?.slice(0, 7) ?? '-'} · {formatDate(commit.commit?.author?.date)}
|
||||||
|
</Meta>
|
||||||
</GitItem>
|
</GitItem>
|
||||||
))}
|
))}
|
||||||
{commits.length === 0 && <Empty>NO COMMITS</Empty>}
|
{commits.length === 0 && <Empty>NO COMMITS</Empty>}
|
||||||
@@ -335,8 +605,12 @@ export default function ProjectDetailPage() {
|
|||||||
{pulls.map((pull) => (
|
{pulls.map((pull) => (
|
||||||
<GitItem key={pull.id} href={pull.html_url ?? '#'} target="_blank" rel="noopener">
|
<GitItem key={pull.id} href={pull.html_url ?? '#'} target="_blank" rel="noopener">
|
||||||
<GitPrimary>
|
<GitPrimary>
|
||||||
<GitTitle>#{pull.number ?? '-'} {pull.title ?? 'UNKNOWN PR'}</GitTitle>
|
<GitTitle>
|
||||||
<Meta>{pull.user?.login ?? '-'} · {pull.merged ? 'MERGED' : pull.state?.toUpperCase() ?? 'UNKNOWN'}</Meta>
|
#{pull.number ?? '-'} {pull.title ?? 'UNKNOWN PR'}
|
||||||
|
</GitTitle>
|
||||||
|
<Meta>
|
||||||
|
{pull.user?.login ?? '-'} · {pull.merged ? 'MERGED' : pull.state?.toUpperCase() ?? 'UNKNOWN'}
|
||||||
|
</Meta>
|
||||||
</GitPrimary>
|
</GitPrimary>
|
||||||
<Meta>{formatDate(pull.created_at)}</Meta>
|
<Meta>{formatDate(pull.created_at)}</Meta>
|
||||||
</GitItem>
|
</GitItem>
|
||||||
|
|||||||
@@ -1,9 +1,16 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useMemo, useState } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { PageTitle, LabelMeta, TechBar, TechBarFill, Btn } from '@/components/ui/base';
|
import {
|
||||||
|
PageTitle,
|
||||||
|
LabelMeta,
|
||||||
|
TechBar,
|
||||||
|
TechBarFill,
|
||||||
|
Btn,
|
||||||
|
BtnToggle,
|
||||||
|
} from '@/components/ui/base';
|
||||||
import { API_URL } from '@/lib/config';
|
import { API_URL } from '@/lib/config';
|
||||||
import { adminFetch } from '@/lib/adminFetch';
|
import { adminFetch } from '@/lib/adminFetch';
|
||||||
|
|
||||||
@@ -22,20 +29,142 @@ interface ProjectListItem {
|
|||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProjectList = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
|
type VisibilityFilter = 'all' | 'public' | 'private';
|
||||||
const ProjectRow = styled(Link)`display:grid;grid-template-columns:1.2fr 1fr 220px;gap:var(--space-lg);padding:var(--space-lg);border:1px solid var(--border-color);align-items:center;text-decoration:none;transition:border-color .15s, background .15s;&:hover{border-color:var(--border-hover);background:#111}@media (max-width:1199px){grid-template-columns:1fr;}`;
|
|
||||||
const Left = styled.div`display:flex;flex-direction:column;gap:6px;min-width:0;`;
|
const Toolbar = styled.div`
|
||||||
const ProjectName = styled.div`font-size:15px;font-weight:600;color:var(--text-primary);`;
|
display: flex;
|
||||||
const ProjectDesc = styled.div`font-size:12px;color:var(--text-secondary);line-height:1.5;`;
|
justify-content: space-between;
|
||||||
const Middle = styled.div`display:flex;flex-direction:column;gap:10px;`;
|
align-items: center;
|
||||||
const Right = styled.div`display:flex;flex-direction:column;gap:8px;align-items:flex-end;@media (max-width:1199px){align-items:flex-start;}`;
|
gap: var(--space-md);
|
||||||
const Meta = styled.div`font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);`;
|
flex-wrap: wrap;
|
||||||
const PhaseBadge = styled.div<{ $phase:string }>`font-size:11px;font-family:var(--font-mono);padding:4px 8px;border:1px solid ${({$phase})=>$phase==='DEPLOYED'?'#5fafff44':$phase==='READY FOR DEPLOY'?'#5fff8a44':$phase==='QA'?'#ffcc6644':'var(--border-color)'};color:${({$phase})=>$phase==='DEPLOYED'?'#5fafff':$phase==='READY FOR DEPLOY'?'#5fff8a':$phase==='QA'?'#ffcc66':'var(--text-primary)'};white-space:nowrap;`;
|
margin-bottom: var(--space-lg);
|
||||||
const EmptyState = styled.div`padding:var(--space-xl) 0;color:var(--text-secondary);font-size:13px;font-family:var(--font-mono);`;
|
`;
|
||||||
|
|
||||||
|
const ToolbarGroup = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FilterGroup = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProjectList = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProjectRow = styled(Link)`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 240px;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: border-color 0.15s, background 0.15s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Left = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProjectName = styled.div`
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProjectDesc = styled.div`
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Middle = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Right = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Meta = styled.div`
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MetaRow = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PhaseBadge = styled.div<{ $phase: string }>`
|
||||||
|
font-size: 11px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid
|
||||||
|
${({ $phase }) =>
|
||||||
|
$phase === 'DEPLOYED'
|
||||||
|
? '#5fafff44'
|
||||||
|
: $phase === 'READY FOR DEPLOY'
|
||||||
|
? '#5fff8a44'
|
||||||
|
: $phase === 'QA'
|
||||||
|
? '#ffcc6644'
|
||||||
|
: 'var(--border-color)'};
|
||||||
|
color:
|
||||||
|
${({ $phase }) =>
|
||||||
|
$phase === 'DEPLOYED'
|
||||||
|
? '#5fafff'
|
||||||
|
: $phase === 'READY FOR DEPLOY'
|
||||||
|
? '#5fff8a'
|
||||||
|
: $phase === 'QA'
|
||||||
|
? '#ffcc66'
|
||||||
|
: 'var(--text-primary)'};
|
||||||
|
white-space: nowrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const EmptyState = styled.div`
|
||||||
|
padding: var(--space-xl) 0;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
function qaLabel(project: ProjectListItem): string {
|
function qaLabel(project: ProjectListItem): string {
|
||||||
if (project.latestQaStatus === 'passed') return 'QA PASSED';
|
if (project.latestQaStatus === 'passed') return 'QA PASSED';
|
||||||
if (project.latestQaStatus === 'failed') return `QA FAILED${project.blockerCount > 0 ? ` · ${project.blockerCount} BLOCKERS` : ''}`;
|
if (project.latestQaStatus === 'failed') {
|
||||||
|
return `QA FAILED${project.blockerCount > 0 ? ` · ${project.blockerCount} BLOCKERS` : ''}`;
|
||||||
|
}
|
||||||
return 'QA PENDING';
|
return 'QA PENDING';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -44,10 +173,16 @@ export default function ProjectsPage() {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [syncing, setSyncing] = useState(false);
|
const [syncing, setSyncing] = useState(false);
|
||||||
const [syncResult, setSyncResult] = useState<string | null>(null);
|
const [syncResult, setSyncResult] = useState<string | null>(null);
|
||||||
|
const [visibility, setVisibility] = useState<VisibilityFilter>('all');
|
||||||
|
|
||||||
const loadProjects = () => {
|
const loadProjects = (filter: VisibilityFilter = visibility) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
fetch(`${API_URL}/api/projects`).then((r) => r.json()).then(setProjects).catch(() => {}).finally(() => setLoading(false));
|
const query = filter === 'all' ? '' : `?visibility=${filter}`;
|
||||||
|
fetch(`${API_URL}/api/projects${query}`)
|
||||||
|
.then((r) => r.json())
|
||||||
|
.then(setProjects)
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
};
|
};
|
||||||
|
|
||||||
const runSync = async (path: string, label: string) => {
|
const runSync = async (path: string, label: string) => {
|
||||||
@@ -65,40 +200,74 @@ export default function ProjectsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => { loadProjects(); }, []);
|
useEffect(() => {
|
||||||
|
loadProjects(visibility);
|
||||||
|
}, [visibility]);
|
||||||
|
|
||||||
|
const filteredProjects = useMemo(() => projects, [projects]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-md)', flexWrap: 'wrap', marginBottom: 'var(--space-lg)' }}>
|
<Toolbar>
|
||||||
|
<ToolbarGroup>
|
||||||
<PageTitle>프로젝트</PageTitle>
|
<PageTitle>프로젝트</PageTitle>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
|
<FilterGroup>
|
||||||
{syncResult && <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)' }}>{syncResult}</span>}
|
{([
|
||||||
<LabelMeta>VOL: {String(projects.length).padStart(2, '0')}</LabelMeta>
|
{ id: 'all', label: '전체' },
|
||||||
<Btn onClick={() => runSync('/api/admin/gitea/sync', 'gitea sync')} disabled={syncing}>{syncing ? 'SYNCING...' : '↻ GITEA SYNC'}</Btn>
|
{ id: 'public', label: 'public' },
|
||||||
<Btn onClick={() => runSync('/api/projects/sync-all-sprints', 'sprint sync')} disabled={syncing}>{syncing ? '...' : '↻ SPRINT SYNC'}</Btn>
|
{ id: 'private', label: 'private' },
|
||||||
</div>
|
] as const).map((item) => (
|
||||||
</div>
|
<BtnToggle key={item.id} $active={visibility === item.id} onClick={() => setVisibility(item.id)}>
|
||||||
|
{item.label}
|
||||||
|
</BtnToggle>
|
||||||
|
))}
|
||||||
|
</FilterGroup>
|
||||||
|
</ToolbarGroup>
|
||||||
|
|
||||||
{loading ? <EmptyState>LOADING...</EmptyState> : projects.length === 0 ? <EmptyState>NO PROJECTS REGISTERED</EmptyState> : (
|
<ToolbarGroup>
|
||||||
|
{syncResult && (
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)' }}>
|
||||||
|
{syncResult}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<LabelMeta>VOL: {String(filteredProjects.length).padStart(2, '0')}</LabelMeta>
|
||||||
|
<Btn onClick={() => runSync('/api/admin/gitea/sync', 'gitea sync')} disabled={syncing}>
|
||||||
|
{syncing ? 'SYNCING...' : '↻ GITEA SYNC'}
|
||||||
|
</Btn>
|
||||||
|
<Btn onClick={() => runSync('/api/projects/sync-all-sprints', 'sprint sync')} disabled={syncing}>
|
||||||
|
{syncing ? '...' : '↻ SPRINT SYNC'}
|
||||||
|
</Btn>
|
||||||
|
</ToolbarGroup>
|
||||||
|
</Toolbar>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<EmptyState>LOADING...</EmptyState>
|
||||||
|
) : filteredProjects.length === 0 ? (
|
||||||
|
<EmptyState>NO PROJECTS</EmptyState>
|
||||||
|
) : (
|
||||||
<ProjectList>
|
<ProjectList>
|
||||||
{projects.map((project) => (
|
{filteredProjects.map((project) => (
|
||||||
<ProjectRow key={project.id} href={`/projects/${project.id}`}>
|
<ProjectRow key={project.id} href={`/projects/${project.id}`}>
|
||||||
<Left>
|
<Left>
|
||||||
<Meta>P-{String(project.id).padStart(3, '0')}</Meta>
|
<Meta>P-{String(project.id).padStart(3, '0')}</Meta>
|
||||||
<ProjectName>{project.name}</ProjectName>
|
<ProjectName>{project.name}</ProjectName>
|
||||||
<ProjectDesc>{project.description ?? '설명 없음'}</ProjectDesc>
|
<ProjectDesc>{project.description ?? '설명 없음'}</ProjectDesc>
|
||||||
</Left>
|
</Left>
|
||||||
|
|
||||||
<Middle>
|
<Middle>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
|
<MetaRow>
|
||||||
<PhaseBadge $phase={project.phase}>{project.phase}</PhaseBadge>
|
<PhaseBadge $phase={project.phase}>{project.phase}</PhaseBadge>
|
||||||
<Meta>{project.currentSprint ? `SPRINT ${project.currentSprint}` : 'PLANNING BACKLOG'}</Meta>
|
<Meta>{project.currentSprint ? `SPRINT ${project.currentSprint}` : 'PLANNING BACKLOG'}</Meta>
|
||||||
{project.latestHotfix && <Meta>HOTFIX {project.latestHotfix}</Meta>}
|
{project.latestHotfix && <Meta>HOTFIX {project.latestHotfix}</Meta>}
|
||||||
</div>
|
</MetaRow>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
|
||||||
<TechBar style={{ flex: 1 }}><TechBarFill $width={project.progress ?? 0} /></TechBar>
|
<TechBar style={{ flex: 1 }}>
|
||||||
|
<TechBarFill $width={project.progress ?? 0} />
|
||||||
|
</TechBar>
|
||||||
<LabelMeta style={{ minWidth: 44, textAlign: 'right' }}>{project.progress ?? 0}%</LabelMeta>
|
<LabelMeta style={{ minWidth: 44, textAlign: 'right' }}>{project.progress ?? 0}%</LabelMeta>
|
||||||
</div>
|
</div>
|
||||||
</Middle>
|
</Middle>
|
||||||
|
|
||||||
<Right>
|
<Right>
|
||||||
<Meta>{qaLabel(project)}</Meta>
|
<Meta>{qaLabel(project)}</Meta>
|
||||||
<Meta>{project.deployStatus}</Meta>
|
<Meta>{project.deployStatus}</Meta>
|
||||||
|
|||||||
@@ -1,10 +1,19 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useEffect, useState, useCallback } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import { useParams } from 'next/navigation';
|
import { useParams } from 'next/navigation';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { LabelMeta, TechBar, TechBarFill, Timeline, TimelineItem, TimeStamp, TimelineContent, Btn } from '@/components/ui/base';
|
import {
|
||||||
|
LabelMeta,
|
||||||
|
TechBar,
|
||||||
|
TechBarFill,
|
||||||
|
Timeline,
|
||||||
|
TimelineItem,
|
||||||
|
TimeStamp,
|
||||||
|
TimelineContent,
|
||||||
|
Btn,
|
||||||
|
} from '@/components/ui/base';
|
||||||
import { API_URL } from '@/lib/config';
|
import { API_URL } from '@/lib/config';
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
import SisterAvatar from '@/components/common/SisterAvatar';
|
||||||
import { SISTER_ROLES } from '@/lib/sisters';
|
import { SISTER_ROLES } from '@/lib/sisters';
|
||||||
@@ -12,28 +21,222 @@ import { adminFetch } from '@/lib/adminFetch';
|
|||||||
import CodeEditor from '@/components/admin/CodeEditor';
|
import CodeEditor from '@/components/admin/CodeEditor';
|
||||||
import LogTerminal from '@/components/admin/LogTerminal';
|
import LogTerminal from '@/components/admin/LogTerminal';
|
||||||
|
|
||||||
const Breadcrumb = styled.div`font-family: var(--font-mono);font-size: 11px;color: var(--text-secondary);margin-bottom: var(--space-md);a { color: var(--text-secondary); text-decoration: none; &:hover { color: var(--text-primary); } }`;
|
const Breadcrumb = styled.div`
|
||||||
const Hero = styled.section`display:grid;grid-template-columns:128px 1fr;gap:var(--space-xl);align-items:center;padding:var(--space-xl);border:1px solid var(--border-color);margin-bottom:var(--space-xl);@media (max-width:767px){grid-template-columns:1fr;justify-items:start;}`;
|
font-family: var(--font-mono);
|
||||||
const HeroMeta = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
|
font-size: 11px;
|
||||||
const HeroName = styled.div`font-size:36px;font-weight:700;letter-spacing:-0.03em;color:var(--text-primary);`;
|
color: var(--text-secondary);
|
||||||
const HeroRole = styled.div`font-size:14px;color:var(--text-secondary);font-family:var(--font-mono);`;
|
margin-bottom: var(--space-md);
|
||||||
const HeroStatus = styled.div`display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;`;
|
|
||||||
const StatusDot = styled.div<{ $on: boolean }>`width:10px;height:10px;border-radius:50%;background:${({$on})=>$on?'#FFF':'#555'};${({$on})=>$on&&`box-shadow:0 0 8px rgba(255,255,255,0.3);`}`;
|
a {
|
||||||
const HeroStats = styled.div`display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg);@media (max-width:767px){grid-template-columns:repeat(2,minmax(0,1fr));}`;
|
color: var(--text-secondary);
|
||||||
const StatCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);`;
|
text-decoration: none;
|
||||||
const StatLabel = styled.div`font-size:10px;color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:6px;`;
|
|
||||||
const StatValue = styled.div`font-size:18px;color:var(--text-primary);font-family:var(--font-mono);`;
|
&:hover {
|
||||||
const DetailGrid = styled.div`display:grid;grid-template-columns:320px 1fr;gap:var(--space-xxl);align-items:start;@media (max-width:1199px){grid-template-columns:1fr;gap:var(--space-xl);}`;
|
color: var(--text-primary);
|
||||||
const MetaPanel = styled.div`display:flex;flex-direction:column;gap:var(--space-lg);`;
|
}
|
||||||
const MetaCard = styled.div`border:1px solid var(--border-color);padding:var(--space-lg);`;
|
}
|
||||||
const TabBar = styled.div`display:flex;gap:var(--space-lg);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-lg);overflow:auto;`;
|
`;
|
||||||
const TabBtn = styled.button<{ $active: boolean }>`font-size:13px;font-weight:500;color:${({$active})=>$active?'var(--text-primary)':'var(--text-secondary)'};background:transparent;border:none;border-bottom:1px solid ${({$active})=>$active?'var(--text-primary)':'transparent'};padding:var(--space-sm) 0;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;&:hover{color:var(--text-primary);}`;
|
|
||||||
const Toolbar = styled.div`display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;`;
|
const Hero = styled.section`
|
||||||
const Select = styled.select`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;cursor:pointer;outline:none;option{background:#1a1f2a;}`;
|
display: grid;
|
||||||
const LinesInput = styled.input`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;width:80px;outline:none;`;
|
grid-template-columns: 128px 1fr;
|
||||||
const ResultMsg = styled.div<{ $success: boolean }>`padding:8px 12px;border-radius:6px;font-size:12px;font-family:monospace;background:${({$success})=>$success?'rgba(0,230,118,0.08)':'rgba(255,23,68,0.08)'};color:${({$success})=>$success?'#00FF00':'#FF1744'};border:1px solid ${({$success})=>$success?'rgba(0,230,118,0.3)':'rgba(255,23,68,0.3)'};margin-bottom:12px;`;
|
gap: var(--space-xl);
|
||||||
const SessionCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);margin-bottom:var(--space-sm);`;
|
align-items: center;
|
||||||
const SISTER_DISPLAY: Record<string, string> = { harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이' };
|
padding: var(--space-xl);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
justify-items: start;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HeroMeta = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HeroName = styled.div`
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
color: var(--text-primary);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HeroRole = styled.div`
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HeroStatus = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
margin-top: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatusDot = styled.div<{ $on: boolean }>`
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: ${({ $on }) => ($on ? '#FFF' : '#555')};
|
||||||
|
${({ $on }) => $on && 'box-shadow:0 0 8px rgba(255,255,255,0.3);'}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HeroStats = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatCard = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-md);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatLabel = styled.div`
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatValue = styled.div`
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const DetailGrid = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 320px 1fr;
|
||||||
|
gap: var(--space-xxl);
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MetaPanel = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MetaCard = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TabBar = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
overflow: auto;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TabBtn = styled.button<{ $active: boolean }>`
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.15s, border-color 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Toolbar = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Select = styled.select`
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
option {
|
||||||
|
background: #1a1f2a;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LinesInput = styled.input`
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
width: 80px;
|
||||||
|
outline: none;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ResultMsg = styled.div<{ $success: boolean }>`
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: monospace;
|
||||||
|
background: ${({ $success }) => ($success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)')};
|
||||||
|
color: ${({ $success }) => ($success ? '#00FF00' : '#FF1744')};
|
||||||
|
border: 1px solid ${({ $success }) => ($success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)')};
|
||||||
|
margin-bottom: 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SessionCard = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-md);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const OverviewBlock = styled.div`
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const EmptyState = styled.div`
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
padding: var(--space-lg) 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SISTER_DISPLAY: Record<string, string> = {
|
||||||
|
harang: '하랑이',
|
||||||
|
narang: '나랑이',
|
||||||
|
darang: '다랑이',
|
||||||
|
erang: '이랑이',
|
||||||
|
};
|
||||||
|
|
||||||
const FILES = ['SOUL.md', 'AGENTS.md', 'TOOLS.md', 'PROTOCOL.md', 'HEARTBEAT.md'];
|
const FILES = ['SOUL.md', 'AGENTS.md', 'TOOLS.md', 'PROTOCOL.md', 'HEARTBEAT.md'];
|
||||||
|
|
||||||
interface SisterInfo {
|
interface SisterInfo {
|
||||||
@@ -54,6 +257,8 @@ interface SystemInfo {
|
|||||||
|
|
||||||
interface ConfigData {
|
interface ConfigData {
|
||||||
description?: string | null;
|
description?: string | null;
|
||||||
|
role?: string;
|
||||||
|
configAvailable?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ActivityItem {
|
interface ActivityItem {
|
||||||
@@ -74,11 +279,6 @@ interface SessionItem {
|
|||||||
status?: string;
|
status?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SessionsResponse {
|
|
||||||
sessions?: SessionItem[];
|
|
||||||
items?: SessionItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface HarnessResponse {
|
interface HarnessResponse {
|
||||||
content?: string;
|
content?: string;
|
||||||
}
|
}
|
||||||
@@ -108,6 +308,8 @@ export default function SisterDetailPage() {
|
|||||||
const [content, setContent] = useState('');
|
const [content, setContent] = useState('');
|
||||||
const [saved, setSaved] = useState('');
|
const [saved, setSaved] = useState('');
|
||||||
const [saveResult, setSaveResult] = useState<{ success: boolean; msg: string } | null>(null);
|
const [saveResult, setSaveResult] = useState<{ success: boolean; msg: string } | null>(null);
|
||||||
|
const [sessionError, setSessionError] = useState<string | null>(null);
|
||||||
|
const [activityError, setActivityError] = useState<string | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Promise.allSettled([
|
Promise.allSettled([
|
||||||
@@ -116,46 +318,80 @@ export default function SisterDetailPage() {
|
|||||||
fetch(`${API_URL}/api/sisters/${name}/activity`),
|
fetch(`${API_URL}/api/sisters/${name}/activity`),
|
||||||
fetch(`${API_URL}/api/sisters/${name}/system`),
|
fetch(`${API_URL}/api/sisters/${name}/system`),
|
||||||
fetch(`${API_URL}/api/sisters/${name}/sessions`),
|
fetch(`${API_URL}/api/sisters/${name}/sessions`),
|
||||||
]).then(([sRes, cRes, aRes, syRes, ssRes]) => {
|
])
|
||||||
if (sRes.status === 'fulfilled' && sRes.value.ok) sRes.value.json().then((d: SisterInfo[]) => setSisterInfo(d.find((s) => s.name === name) ?? null));
|
.then(async ([sRes, cRes, aRes, syRes, ssRes]) => {
|
||||||
if (cRes.status === 'fulfilled' && cRes.value.ok) cRes.value.json().then((data: ConfigData) => setConfigData(data));
|
if (sRes.status === 'fulfilled' && sRes.value.ok) {
|
||||||
if (aRes.status === 'fulfilled' && aRes.value.ok) aRes.value.json().then((d: ActivityResponse) => setActivity(d.items ?? []));
|
const sisters = (await sRes.value.json()) as SisterInfo[];
|
||||||
if (syRes.status === 'fulfilled' && syRes.value.ok) syRes.value.json().then((data: SystemInfo) => setSystemInfo(data));
|
setSisterInfo(sisters.find((s) => s.name === name) ?? null);
|
||||||
if (ssRes.status === 'fulfilled' && ssRes.value.ok) ssRes.value.json().then((d: SessionsResponse) => setSessions(d.sessions ?? d.items ?? []));
|
}
|
||||||
}).finally(() => setLoading(false));
|
if (cRes.status === 'fulfilled' && cRes.value.ok) {
|
||||||
|
setConfigData(await cRes.value.json());
|
||||||
|
}
|
||||||
|
if (aRes.status === 'fulfilled' && aRes.value.ok) {
|
||||||
|
const data = (await aRes.value.json()) as ActivityResponse;
|
||||||
|
setActivity(data.items ?? []);
|
||||||
|
} else {
|
||||||
|
setActivityError('활동 조회 실패');
|
||||||
|
}
|
||||||
|
if (syRes.status === 'fulfilled' && syRes.value.ok) {
|
||||||
|
setSystemInfo(await syRes.value.json());
|
||||||
|
}
|
||||||
|
if (ssRes.status === 'fulfilled' && ssRes.value.ok) {
|
||||||
|
const raw = (await ssRes.value.json()) as SessionItem[] | { items?: SessionItem[]; sessions?: SessionItem[] };
|
||||||
|
const items = Array.isArray(raw) ? raw : raw.sessions ?? raw.items ?? [];
|
||||||
|
setSessions(items);
|
||||||
|
} else {
|
||||||
|
setSessionError('세션 조회 실패');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
}, [name]);
|
}, [name]);
|
||||||
|
|
||||||
const fetchLogs = useCallback(async () => {
|
const fetchLogs = useCallback(async () => {
|
||||||
setLogLoading(true);
|
setLogLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await adminFetch(`/api/admin/logs/${name}?lines=${lines}`);
|
const res = await adminFetch(`/api/admin/logs/${name}?lines=${lines}`);
|
||||||
const d: LogResponse = await res.json();
|
const data = (await res.json()) as LogResponse;
|
||||||
setLogLines(d.lines ?? []);
|
setLogLines(data.lines ?? ['(로그 없음)']);
|
||||||
} catch {
|
} catch {
|
||||||
setLogLines(['(로그 로드 실패)']);
|
setLogLines(['(로그 조회 실패)']);
|
||||||
} finally {
|
} finally {
|
||||||
setLogLoading(false);
|
setLogLoading(false);
|
||||||
}
|
}
|
||||||
}, [name, lines]);
|
}, [name, lines]);
|
||||||
|
|
||||||
useEffect(() => { if (tab === 'logs') fetchLogs(); }, [tab, fetchLogs]);
|
useEffect(() => {
|
||||||
|
if (tab === 'logs') {
|
||||||
|
void fetchLogs();
|
||||||
|
}
|
||||||
|
}, [tab, fetchLogs]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (tab !== 'harness') return;
|
if (tab !== 'harness') return;
|
||||||
setSaveResult(null);
|
setSaveResult(null);
|
||||||
adminFetch(`/api/admin/harness/${name}/${selectedFile}`)
|
adminFetch(`/api/admin/harness/${name}/${selectedFile}`)
|
||||||
.then((r) => r.json())
|
.then((r) => r.json())
|
||||||
.then((d: HarnessResponse) => { setContent(d.content ?? ''); setSaved(d.content ?? ''); })
|
.then((d: HarnessResponse) => {
|
||||||
|
setContent(d.content ?? '');
|
||||||
|
setSaved(d.content ?? '');
|
||||||
|
})
|
||||||
.catch(() => setContent('(로드 실패)'));
|
.catch(() => setContent('(로드 실패)'));
|
||||||
}, [tab, name, selectedFile]);
|
}, [tab, name, selectedFile]);
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
setSaveResult(null);
|
setSaveResult(null);
|
||||||
try {
|
try {
|
||||||
const res = await adminFetch(`/api/admin/harness/${name}/${selectedFile}`, { method: 'PUT', body: JSON.stringify({ content }) });
|
const res = await adminFetch(`/api/admin/harness/${name}/${selectedFile}`, {
|
||||||
const d: SaveHarnessResponse = await res.json();
|
method: 'PUT',
|
||||||
if (d.success) { setSaved(content); setSaveResult({ success: true, msg: '저장 완료' }); }
|
body: JSON.stringify({ content }),
|
||||||
else setSaveResult({ success: false, msg: d.error ?? '저장 실패' });
|
});
|
||||||
|
const d = (await res.json()) as SaveHarnessResponse;
|
||||||
|
if (d.success) {
|
||||||
|
setSaved(content);
|
||||||
|
setSaveResult({ success: true, msg: '저장 완료' });
|
||||||
|
} else {
|
||||||
|
setSaveResult({ success: false, msg: d.error ?? '저장 실패' });
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setSaveResult({ success: false, msg: (e as Error).message });
|
setSaveResult({ success: false, msg: (e as Error).message });
|
||||||
}
|
}
|
||||||
@@ -165,23 +401,47 @@ export default function SisterDetailPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Breadcrumb><Link href="/sisters">자매 노드 관리</Link> / {SISTER_DISPLAY[name] ?? name}</Breadcrumb>
|
<Breadcrumb>
|
||||||
{loading ? <div style={{ color: 'var(--text-secondary)', fontSize: '13px', fontFamily: 'var(--font-mono)' }}>LOADING...</div> : <>
|
<Link href="/sisters">자매 노드 관리</Link> / {SISTER_DISPLAY[name] ?? name}
|
||||||
|
</Breadcrumb>
|
||||||
|
{loading ? (
|
||||||
|
<EmptyState>LOADING...</EmptyState>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<Hero>
|
<Hero>
|
||||||
<SisterAvatar name={name} size={120} />
|
<SisterAvatar name={name} size={120} />
|
||||||
<HeroMeta>
|
<HeroMeta>
|
||||||
<HeroName>{SISTER_DISPLAY[name] ?? name}</HeroName>
|
<HeroName>{SISTER_DISPLAY[name] ?? name}</HeroName>
|
||||||
<HeroRole>{SISTER_ROLES[name] ?? 'UNKNOWN'}</HeroRole>
|
<HeroRole>{SISTER_ROLES[name] ?? configData?.role ?? 'UNKNOWN'}</HeroRole>
|
||||||
<HeroStatus>
|
<HeroStatus>
|
||||||
<StatusDot $on={isActive} />
|
<StatusDot $on={isActive} />
|
||||||
<LabelMeta>{isActive ? 'ACTIVE' : 'STANDBY'}</LabelMeta>
|
<LabelMeta>{isActive ? 'ACTIVE' : 'STANDBY'}</LabelMeta>
|
||||||
<LabelMeta><span>LXC:</span>{sisterInfo?.lxcId ?? '--'}</LabelMeta>
|
<LabelMeta>
|
||||||
|
<span>LXC:</span>
|
||||||
|
{sisterInfo?.lxcId ?? '--'}
|
||||||
|
</LabelMeta>
|
||||||
</HeroStatus>
|
</HeroStatus>
|
||||||
<HeroStats>
|
<HeroStats>
|
||||||
<StatCard><StatLabel>UPTIME</StatLabel><StatValue>{systemInfo?.uptime ?? '--:--:--'}</StatValue></StatCard>
|
<StatCard>
|
||||||
<StatCard><StatLabel>CPU</StatLabel><StatValue>{systemInfo?.cpu?.toFixed?.(1) ?? '0.0'}%</StatValue></StatCard>
|
<StatLabel>UPTIME</StatLabel>
|
||||||
<StatCard><StatLabel>MEM</StatLabel><StatValue>{systemInfo?.memory?.used ?? 0}/{systemInfo?.memory?.total ?? 0}MB</StatValue></StatCard>
|
<StatValue>{systemInfo?.uptime ?? '--:--:--'}</StatValue>
|
||||||
<StatCard><StatLabel>DISK</StatLabel><StatValue>{systemInfo?.disk?.used ?? '0G'}/{systemInfo?.disk?.total ?? '0G'}</StatValue></StatCard>
|
</StatCard>
|
||||||
|
<StatCard>
|
||||||
|
<StatLabel>CPU</StatLabel>
|
||||||
|
<StatValue>{systemInfo?.cpu?.toFixed?.(1) ?? '0.0'}%</StatValue>
|
||||||
|
</StatCard>
|
||||||
|
<StatCard>
|
||||||
|
<StatLabel>MEM</StatLabel>
|
||||||
|
<StatValue>
|
||||||
|
{systemInfo?.memory?.used ?? 0}/{systemInfo?.memory?.total ?? 0}MB
|
||||||
|
</StatValue>
|
||||||
|
</StatCard>
|
||||||
|
<StatCard>
|
||||||
|
<StatLabel>DISK</StatLabel>
|
||||||
|
<StatValue>
|
||||||
|
{systemInfo?.disk?.used ?? '0G'}/{systemInfo?.disk?.total ?? '0G'}
|
||||||
|
</StatValue>
|
||||||
|
</StatCard>
|
||||||
</HeroStats>
|
</HeroStats>
|
||||||
</HeroMeta>
|
</HeroMeta>
|
||||||
</Hero>
|
</Hero>
|
||||||
@@ -190,29 +450,151 @@ export default function SisterDetailPage() {
|
|||||||
<MetaPanel>
|
<MetaPanel>
|
||||||
<MetaCard>
|
<MetaCard>
|
||||||
<LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>SYSTEM SUMMARY</LabelMeta>
|
<LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>SYSTEM SUMMARY</LabelMeta>
|
||||||
<div style={{ margin: 'var(--space-md) 0', fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
|
<div
|
||||||
LAST_SEEN: {sisterInfo?.lastSeen ? new Date(sisterInfo.lastSeen).toLocaleString() : '--'}<br />
|
style={{
|
||||||
ROLE: {SISTER_ROLES[name] ?? '--'}<br />
|
margin: 'var(--space-md) 0',
|
||||||
STATUS: {String(sisterInfo?.status ?? 'unknown').toUpperCase()}<br />
|
fontFamily: 'var(--font-mono)',
|
||||||
|
fontSize: '11px',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
lineHeight: 1.8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
LAST_SEEN: {sisterInfo?.lastSeen ? new Date(sisterInfo.lastSeen).toLocaleString() : '--'}
|
||||||
|
<br />
|
||||||
|
ROLE: {SISTER_ROLES[name] ?? '--'}
|
||||||
|
<br />
|
||||||
|
STATUS: {String(sisterInfo?.status ?? 'unknown').toUpperCase()}
|
||||||
|
<br />
|
||||||
HOST_USER: {sisterInfo?.user ?? '--'}
|
HOST_USER: {sisterInfo?.user ?? '--'}
|
||||||
</div>
|
</div>
|
||||||
<TechBar><TechBarFill $width={isActive ? 100 : 0} /></TechBar>
|
<TechBar>
|
||||||
|
<TechBarFill $width={isActive ? 100 : 0} />
|
||||||
|
</TechBar>
|
||||||
|
</MetaCard>
|
||||||
|
<MetaCard>
|
||||||
|
<LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>OVERVIEW</LabelMeta>
|
||||||
|
<div style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
|
||||||
|
{configData?.description ?? '설명 없음'}
|
||||||
|
</div>
|
||||||
</MetaCard>
|
</MetaCard>
|
||||||
{configData?.description && <MetaCard><LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>DESC</LabelMeta><div style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>{configData.description}</div></MetaCard>}
|
|
||||||
</MetaPanel>
|
</MetaPanel>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<TabBar>
|
<TabBar>
|
||||||
{[{ id: 'overview', label: '개요' }, { id: 'sessions', label: '세션' }, { id: 'activity', label: '활동' }, { id: 'harness', label: '하네스' }, { id: 'logs', label: '로그' }].map((t) => <TabBtn key={t.id} $active={tab === t.id} onClick={() => setTab(t.id)}>{t.label}</TabBtn>)}
|
{[
|
||||||
|
{ id: 'overview', label: '개요' },
|
||||||
|
{ id: 'sessions', label: '세션' },
|
||||||
|
{ id: 'activity', label: '활동' },
|
||||||
|
{ id: 'harness', label: '하네스' },
|
||||||
|
{ id: 'logs', label: '로그' },
|
||||||
|
].map((item) => (
|
||||||
|
<TabBtn key={item.id} $active={tab === item.id} onClick={() => setTab(item.id)}>
|
||||||
|
{item.label}
|
||||||
|
</TabBtn>
|
||||||
|
))}
|
||||||
</TabBar>
|
</TabBar>
|
||||||
|
|
||||||
{tab === 'overview' && <Timeline>{activity.slice(0, 8).map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
|
{tab === 'overview' && (
|
||||||
{tab === 'sessions' && <>{sessions.length === 0 ? <div style={{ color: 'var(--text-secondary)' }}>세션 없음</div> : sessions.map((session, i: number) => <SessionCard key={session.id ?? i}><div style={{ color: 'var(--text-primary)', fontSize: '13px' }}>{session.title ?? session.label ?? session.id ?? 'session'}</div><div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)' }}>{session.status ?? ''}</div></SessionCard>)}</>}
|
<OverviewBlock>
|
||||||
{tab === 'activity' && <Timeline>{activity.map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
|
<LabelMeta>OVERVIEW</LabelMeta>
|
||||||
{tab === 'harness' && <><Toolbar><Select value={selectedFile} onChange={(e) => setSelectedFile(e.target.value)}>{FILES.map((f) => <option key={f} value={f}>{f}</option>)}</Select><Btn onClick={() => { setContent(saved); setSaveResult(null); }}>되돌리기</Btn><Btn onClick={handleSave}>저장</Btn></Toolbar>{saveResult && <ResultMsg $success={saveResult.success}>{saveResult.msg}</ResultMsg>}<CodeEditor value={content} onChange={setContent} /></>}
|
<div style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
|
||||||
{tab === 'logs' && <><Toolbar><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>최근</span><LinesInput type="number" value={lines} onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)} min={10} max={500} /><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>줄</span><Btn onClick={fetchLogs}>{logLoading ? '로딩 중...' : '로그 가져오기'}</Btn></Toolbar><LogTerminal lines={logLines} /></>}
|
{configData?.description ?? '설명 없음'}
|
||||||
|
</div>
|
||||||
|
<MetaCard style={{ padding: '12px', marginTop: '4px' }}>
|
||||||
|
<LabelMeta style={{ display: 'block', marginBottom: '6px' }}>CONFIG STATUS</LabelMeta>
|
||||||
|
<div style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
|
||||||
|
{configData?.configAvailable ? '설정 파일 확인됨' : '설정 파일 없음 또는 조회 불가'}
|
||||||
|
</div>
|
||||||
|
</MetaCard>
|
||||||
|
</OverviewBlock>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'sessions' && (
|
||||||
|
<>
|
||||||
|
{sessionError ? (
|
||||||
|
<EmptyState>{sessionError}</EmptyState>
|
||||||
|
) : sessions.length === 0 ? (
|
||||||
|
<EmptyState>세션 없음</EmptyState>
|
||||||
|
) : (
|
||||||
|
sessions.map((session, index) => (
|
||||||
|
<SessionCard key={session.id ?? index}>
|
||||||
|
<div style={{ color: 'var(--text-primary)', fontSize: '13px' }}>
|
||||||
|
{session.title ?? session.label ?? session.id ?? 'session'}
|
||||||
|
</div>
|
||||||
|
<div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)' }}>
|
||||||
|
{session.status ?? ''}
|
||||||
|
</div>
|
||||||
|
</SessionCard>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'activity' && (
|
||||||
|
<>
|
||||||
|
{activityError ? (
|
||||||
|
<EmptyState>{activityError}</EmptyState>
|
||||||
|
) : activity.length === 0 ? (
|
||||||
|
<EmptyState>활동 없음</EmptyState>
|
||||||
|
) : (
|
||||||
|
<Timeline>
|
||||||
|
{activity.map((item) => (
|
||||||
|
<TimelineItem key={item.id}>
|
||||||
|
<TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp>
|
||||||
|
<TimelineContent>{item.detail ?? item.action}</TimelineContent>
|
||||||
|
</TimelineItem>
|
||||||
|
))}
|
||||||
|
</Timeline>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'harness' && (
|
||||||
|
<>
|
||||||
|
<Toolbar>
|
||||||
|
<Select value={selectedFile} onChange={(e) => setSelectedFile(e.target.value)}>
|
||||||
|
{FILES.map((file) => (
|
||||||
|
<option key={file} value={file}>
|
||||||
|
{file}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Btn
|
||||||
|
onClick={() => {
|
||||||
|
setContent(saved);
|
||||||
|
setSaveResult(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
되돌리기
|
||||||
|
</Btn>
|
||||||
|
<Btn onClick={handleSave}>저장</Btn>
|
||||||
|
</Toolbar>
|
||||||
|
{saveResult && <ResultMsg $success={saveResult.success}>{saveResult.msg}</ResultMsg>}
|
||||||
|
<CodeEditor value={content} onChange={setContent} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tab === 'logs' && (
|
||||||
|
<>
|
||||||
|
<Toolbar>
|
||||||
|
<span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>최근</span>
|
||||||
|
<LinesInput
|
||||||
|
type="number"
|
||||||
|
value={lines}
|
||||||
|
onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)}
|
||||||
|
min={10}
|
||||||
|
max={500}
|
||||||
|
/>
|
||||||
|
<span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>줄</span>
|
||||||
|
<Btn onClick={() => void fetchLogs()}>{logLoading ? '로딩 중...' : '로그 가져오기'}</Btn>
|
||||||
|
</Toolbar>
|
||||||
|
<LogTerminal lines={logLines} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</DetailGrid>
|
</DetailGrid>
|
||||||
</>}
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import { useAuth } from '@/lib/AuthContext';
|
|||||||
|
|
||||||
const NAV_ITEMS = [
|
const NAV_ITEMS = [
|
||||||
{ href: '/', label: '대시' },
|
{ href: '/', label: '대시' },
|
||||||
{ href: '/office', label: '오피스' },
|
|
||||||
{ href: '/projects', label: '프로' },
|
{ href: '/projects', label: '프로' },
|
||||||
{ href: '/activities', label: '활동' },
|
{ href: '/activities', label: '활동' },
|
||||||
{ href: '/sisters', label: '자매' },
|
{ href: '/sisters', label: '자매' },
|
||||||
|
|||||||
@@ -46,10 +46,10 @@ interface SisterAvatarProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function SisterAvatar({ name, size = 32, className, style }: SisterAvatarProps) {
|
export default function SisterAvatar({ name, size = 32, className, style }: SisterAvatarProps) {
|
||||||
const [failedFor, setFailedFor] = useState<string | null>(null);
|
const [failed, setFailed] = useState(false);
|
||||||
const initial = SISTER_INITIALS[name] ?? name.slice(0, 1).toUpperCase();
|
const initial = SISTER_INITIALS[name] ?? name.slice(0, 1).toUpperCase();
|
||||||
|
|
||||||
if (failedFor === name) {
|
if (failed) {
|
||||||
return <Fallback $size={size} className={className} style={style}>{initial}</Fallback>;
|
return <Fallback $size={size} className={className} style={style}>{initial}</Fallback>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -60,7 +60,7 @@ export default function SisterAvatar({ name, size = 32, className, style }: Sist
|
|||||||
alt={name}
|
alt={name}
|
||||||
className={className}
|
className={className}
|
||||||
style={style}
|
style={style}
|
||||||
onError={() => setFailedFor(name)}
|
onError={() => setFailed(true)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,647 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
||||||
import styled, { keyframes } from 'styled-components';
|
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
|
||||||
import { API_URL } from '@/lib/config';
|
|
||||||
import { withSessionRequest } from '@/lib/csrf';
|
|
||||||
import type { SisterName, AgentState } from './OfficeScene';
|
|
||||||
|
|
||||||
interface RuntimeMessage {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant' | 'tool';
|
|
||||||
content: string;
|
|
||||||
ts: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface RuntimeSnapshot {
|
|
||||||
name: SisterName;
|
|
||||||
gatewayConnected: boolean;
|
|
||||||
mainState: AgentState;
|
|
||||||
currentTask: string | null;
|
|
||||||
activeSessionLabel: string | null;
|
|
||||||
recentMessages: RuntimeMessage[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatMessage {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant' | 'tool';
|
|
||||||
content: string;
|
|
||||||
toolName?: string;
|
|
||||||
ts: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatWorkspaceProps {
|
|
||||||
initialSister: SisterName;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SISTER_DISPLAY: 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'];
|
|
||||||
|
|
||||||
const fadeIn = keyframes`
|
|
||||||
from { opacity: 0; transform: translateY(4px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
padding: var(--space-xs) var(--space-sm);
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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 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<{ $ok: boolean }>`
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: ${({ $ok }) => ($ok ? '#00BFA5' : 'var(--text-secondary)')};
|
|
||||||
border: 1px solid currentColor;
|
|
||||||
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 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 RuntimeNotice = 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: 320px;
|
|
||||||
text-align: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
&: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.6;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
text-align: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
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);
|
|
||||||
`;
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--border-hover);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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)}일 전`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function runtimeStateLabel(state: AgentState): string {
|
|
||||||
if (state === 'thinking') return 'thinking';
|
|
||||||
if (state === 'tool_calling') return 'tool_calling';
|
|
||||||
if (state === 'speaking') return 'speaking';
|
|
||||||
if (state === 'error') return 'error';
|
|
||||||
return 'idle';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix #4: Remove localStorage token — use cookie-based auth via withSessionRequest
|
|
||||||
// Token is handled by HttpOnly cookies + CSRF, no client-side access needed
|
|
||||||
|
|
||||||
function mergeMessages(prev: ChatMessage[], incoming: ChatMessage[]) {
|
|
||||||
const map = new Map<string, ChatMessage>();
|
|
||||||
[...prev, ...incoming].forEach((item) => {
|
|
||||||
map.set(item.id, item);
|
|
||||||
});
|
|
||||||
return Array.from(map.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapRuntimeMessages(items: RuntimeMessage[]): ChatMessage[] {
|
|
||||||
return items.map((item, index) => ({
|
|
||||||
id: item.id || `${item.role}-${item.ts ?? 'none'}-${index}`,
|
|
||||||
role: item.role,
|
|
||||||
content: item.content,
|
|
||||||
ts: item.ts ?? new Date().toISOString(),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceProps) {
|
|
||||||
const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
|
|
||||||
const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
|
|
||||||
const [runtimeBySister, setRuntimeBySister] = useState<Partial<Record<SisterName, RuntimeSnapshot>>>({});
|
|
||||||
// Per-sister draft — prevents input leaking across tabs
|
|
||||||
const [drafts, setDrafts] = useState<Partial<Record<SisterName, string>>>({});
|
|
||||||
const input = drafts[activeSister] ?? '';
|
|
||||||
const [sending, setSending] = useState(false);
|
|
||||||
const timelineRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
|
|
||||||
const runtime = runtimeBySister[activeSister] ?? null;
|
|
||||||
// Cookie-based auth always available (no token check needed)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setActiveSister(initialSister);
|
|
||||||
}, [initialSister]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (timelineRef.current) {
|
|
||||||
timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
|
|
||||||
}
|
|
||||||
}, [messages]);
|
|
||||||
|
|
||||||
const setMessages = useCallback((sister: SisterName, updater: (prev: ChatMessage[]) => ChatMessage[]) => {
|
|
||||||
setAllMessages((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[sister]: updater(prev[sister] ?? []),
|
|
||||||
}));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const loadRuntime = useCallback(async (sister: SisterName) => {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`, withSessionRequest());
|
|
||||||
if (!res.ok) return;
|
|
||||||
const data = (await res.json()) as RuntimeSnapshot;
|
|
||||||
setRuntimeBySister((prev) => ({ ...prev, [sister]: data }));
|
|
||||||
const runtimeMessages = mapRuntimeMessages(data.recentMessages ?? []);
|
|
||||||
if (runtimeMessages.length > 0) {
|
|
||||||
setMessages(sister, (prev) => mergeMessages(prev, runtimeMessages));
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore runtime refresh failures
|
|
||||||
}
|
|
||||||
}, [setMessages]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadRuntime(activeSister);
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
void loadRuntime(activeSister);
|
|
||||||
}, 8000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [activeSister, loadRuntime]);
|
|
||||||
|
|
||||||
const handleSend = useCallback(async () => {
|
|
||||||
const text = input.trim();
|
|
||||||
if (!text || sending) return;
|
|
||||||
|
|
||||||
// Cookie-based auth — no token check needed
|
|
||||||
|
|
||||||
const userMessage: ChatMessage = {
|
|
||||||
id: `user-${crypto.randomUUID()}`,
|
|
||||||
role: 'user',
|
|
||||||
content: text,
|
|
||||||
ts: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
|
|
||||||
setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
|
|
||||||
setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
|
|
||||||
setSending(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, withSessionRequest({
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ message: text }),
|
|
||||||
}, { csrf: true }));
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error(data?.message || '채팅 전송 실패');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data?.runtime) {
|
|
||||||
setRuntimeBySister((prev) => ({ ...prev, [activeSister]: data.runtime as RuntimeSnapshot }));
|
|
||||||
}
|
|
||||||
|
|
||||||
const reply = String(data?.reply || '').trim();
|
|
||||||
if (reply) {
|
|
||||||
setMessages(activeSister, (prev) => mergeMessages(prev, [{
|
|
||||||
id: `assistant-${crypto.randomUUID()}`,
|
|
||||||
role: 'assistant',
|
|
||||||
content: reply,
|
|
||||||
ts: new Date().toISOString(),
|
|
||||||
}]));
|
|
||||||
}
|
|
||||||
|
|
||||||
void loadRuntime(activeSister);
|
|
||||||
} catch (error) {
|
|
||||||
const message = error instanceof Error ? error.message : '채팅 전송 중 오류가 발생했어.';
|
|
||||||
setMessages(activeSister, (prev) => mergeMessages(prev, [{
|
|
||||||
id: `error-${crypto.randomUUID()}`,
|
|
||||||
role: 'assistant',
|
|
||||||
content: `전송 실패: ${message}`,
|
|
||||||
ts: new Date().toISOString(),
|
|
||||||
}]));
|
|
||||||
} finally {
|
|
||||||
setSending(false);
|
|
||||||
}
|
|
||||||
}, [activeSister, input, loadRuntime, sending, setMessages]);
|
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
|
||||||
e.preventDefault();
|
|
||||||
void handleSend();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Workspace>
|
|
||||||
<SisterTabs>
|
|
||||||
<SisterTabHeader>direct chat</SisterTabHeader>
|
|
||||||
{SISTER_ORDER.map((name) => (
|
|
||||||
<SisterTab key={name} $active={activeSister === name} onClick={() => setActiveSister(name)}>
|
|
||||||
<SisterAvatar name={name} size={22} />
|
|
||||||
<TabMeta>
|
|
||||||
<TabName>{SISTER_DISPLAY[name]}</TabName>
|
|
||||||
<TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
|
|
||||||
</TabMeta>
|
|
||||||
</SisterTab>
|
|
||||||
))}
|
|
||||||
</SisterTabs>
|
|
||||||
|
|
||||||
<MessageArea>
|
|
||||||
<MessageHeader>
|
|
||||||
<SisterAvatar name={activeSister} size={28} />
|
|
||||||
<HeaderMeta>
|
|
||||||
<HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
|
|
||||||
<HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
|
|
||||||
</HeaderMeta>
|
|
||||||
<HeaderBadge $ok={Boolean(runtime?.gatewayConnected)}>
|
|
||||||
{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}
|
|
||||||
</HeaderBadge>
|
|
||||||
<CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
|
|
||||||
</MessageHeader>
|
|
||||||
|
|
||||||
<Timeline ref={timelineRef}>
|
|
||||||
{messages.length === 0 ? (
|
|
||||||
<EmptyTimeline>
|
|
||||||
<SisterAvatar name={activeSister} size={32} />
|
|
||||||
<div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내봐.</div>
|
|
||||||
<RuntimeNotice>
|
|
||||||
{runtime?.gatewayConnected
|
|
||||||
? '직접 채팅이 자매 runtime으로 연결돼 있어. 입력하면 바로 전달돼.'
|
|
||||||
: 'runtime 상태를 확인 중이야. 연결이 느려도 메시지는 다시 시도할 수 있어.'}
|
|
||||||
</RuntimeNotice>
|
|
||||||
</EmptyTimeline>
|
|
||||||
) : (
|
|
||||||
messages.map((msg) => (
|
|
||||||
<MessageBubble key={msg.id} $role={msg.role}>
|
|
||||||
<BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
|
|
||||||
<BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
|
|
||||||
</MessageBubble>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</Timeline>
|
|
||||||
|
|
||||||
<InputMeta>
|
|
||||||
shift+enter = 줄바꿈 · enter = 전송 · runtime: {runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}
|
|
||||||
</InputMeta>
|
|
||||||
|
|
||||||
<InputArea>
|
|
||||||
<MessageInput
|
|
||||||
placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
|
|
||||||
value={input}
|
|
||||||
onChange={(e) => setDrafts((prev) => ({ ...prev, [activeSister]: e.target.value }))}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
rows={1}
|
|
||||||
/>
|
|
||||||
<SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending}>
|
|
||||||
{sending ? '전송 중' : '전송'}
|
|
||||||
</SendBtn>
|
|
||||||
</InputArea>
|
|
||||||
</MessageArea>
|
|
||||||
|
|
||||||
<SisterContext>
|
|
||||||
<ContextSection>
|
|
||||||
<CtxLabel>agent</CtxLabel>
|
|
||||||
<CtxValue>{SISTER_DISPLAY[activeSister]}</CtxValue>
|
|
||||||
<CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
|
|
||||||
</ContextSection>
|
|
||||||
|
|
||||||
<ContextSection>
|
|
||||||
<CtxLabel>채팅 상태</CtxLabel>
|
|
||||||
<CtxValue>{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}</CtxValue>
|
|
||||||
<CtxMono>{runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}</CtxMono>
|
|
||||||
</ContextSection>
|
|
||||||
|
|
||||||
<ContextSection>
|
|
||||||
<CtxLabel>data source</CtxLabel>
|
|
||||||
<CtxMono>
|
|
||||||
control: ssh → openclaw agent
|
|
||||||
<br />
|
|
||||||
activity: runtime session snapshot
|
|
||||||
</CtxMono>
|
|
||||||
</ContextSection>
|
|
||||||
|
|
||||||
<ContextSection>
|
|
||||||
<CtxLabel>current task</CtxLabel>
|
|
||||||
<CtxValue>{runtime?.currentTask ?? runtime?.activeSessionLabel ?? '작업 정보 없음'}</CtxValue>
|
|
||||||
</ContextSection>
|
|
||||||
</SisterContext>
|
|
||||||
</Workspace>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,422 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import SisterAvatar from '@/components/common/SisterAvatar';
|
|
||||||
import type { SisterNode, SubAgent, SisterName, AgentState, SelectedAgent } from './OfficeScene';
|
|
||||||
|
|
||||||
interface ContextPanelProps {
|
|
||||||
selected: SelectedAgent | null;
|
|
||||||
sisters: SisterNode[];
|
|
||||||
onOpenChat: (sisterName: SisterName) => void;
|
|
||||||
onClear: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
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: 260px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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 AgentAvatarWrap = styled.div`
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
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.7;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SISTER_DISPLAY: Record<SisterName, string> = {
|
|
||||||
harang: '하랑이',
|
|
||||||
narang: '나랑이',
|
|
||||||
darang: '다랑이',
|
|
||||||
erang: '이랑이',
|
|
||||||
};
|
|
||||||
|
|
||||||
function SisterDetail({ sister, onOpenChat }: { sister: SisterNode; onOpenChat: (name: SisterName) => void }) {
|
|
||||||
const hasLiveSubagentState = sister.subagents.some((item) => item.sessionLabel || item.currentTask || item.updatedAt);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<AgentHeader>
|
|
||||||
<AgentAvatarWrap>
|
|
||||||
<SisterAvatar name={sister.name} size={40} />
|
|
||||||
</AgentAvatarWrap>
|
|
||||||
<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 || sister.activeSessionLabel) && (
|
|
||||||
<Section>
|
|
||||||
<SectionLabel>current task</SectionLabel>
|
|
||||||
<CurrentTaskBox>{sister.currentTask ?? sister.activeSessionLabel ?? '작업 정보 없음'}</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>{hasLiveSubagentState ? 'subagent state: live runtime' : '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;
|
|
||||||
}) {
|
|
||||||
const liveNote = sub.sessionLabel || sub.currentTask || sub.updatedAt;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<AgentHeader>
|
|
||||||
<AgentAvatarWrap>
|
|
||||||
<SisterAvatar name={sister.name} size={40} />
|
|
||||||
</AgentAvatarWrap>
|
|
||||||
<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_DISPLAY[sister.name]} · {sister.role}</SectionValue>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{(sub.currentTask || sub.sessionLabel) && (
|
|
||||||
<Section>
|
|
||||||
<SectionLabel>current task</SectionLabel>
|
|
||||||
<CurrentTaskBox>{sub.currentTask ?? sub.sessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
|
|
||||||
</Section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FallbackNote>{liveNote ? 'subagent state: live runtime' : '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 sister = getSister(selected.name);
|
|
||||||
if (sister) content = <SisterDetail sister={sister} onOpenChat={onOpenChat} />;
|
|
||||||
} else if (selected?.type === 'subagent') {
|
|
||||||
const sister = getSister(selected.sister);
|
|
||||||
const sub = sister?.subagents.find((item) => item.id === selected.id);
|
|
||||||
if (sister && sub) content = <SubagentDetail sub={sub} sister={sister} onOpenChat={onOpenChat} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Panel>
|
|
||||||
<PanelHeader>
|
|
||||||
<PanelTitle>context panel</PanelTitle>
|
|
||||||
{selected && <ClearBtn onClick={onClear}>✕</ClearBtn>}
|
|
||||||
</PanelHeader>
|
|
||||||
<PanelBody>{content}</PanelBody>
|
|
||||||
</Panel>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,496 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useCallback } from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { API_URL } from '@/lib/config';
|
|
||||||
|
|
||||||
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;
|
|
||||||
currentTask?: string | null;
|
|
||||||
updatedAt?: number | null;
|
|
||||||
sessionLabel?: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SisterNode {
|
|
||||||
name: SisterName;
|
|
||||||
displayName: string;
|
|
||||||
role: string;
|
|
||||||
state: AgentState;
|
|
||||||
currentTask: string | null;
|
|
||||||
activeSessionLabel?: 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';
|
|
||||||
subagentMode: 'live' | 'fallback';
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const VB_W = 800;
|
|
||||||
const VB_H = 460;
|
|
||||||
type Point = [number, number];
|
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
const SISTER_POS: Record<SisterName, [number, number]> = {
|
|
||||||
harang: [75, 105],
|
|
||||||
darang: [725, 105],
|
|
||||||
narang: [75, 358],
|
|
||||||
erang: [725, 358],
|
|
||||||
};
|
|
||||||
|
|
||||||
const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };
|
|
||||||
|
|
||||||
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]],
|
|
||||||
};
|
|
||||||
|
|
||||||
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)',
|
|
||||||
};
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function SisterCircle({
|
|
||||||
cx,
|
|
||||||
cy,
|
|
||||||
r,
|
|
||||||
state,
|
|
||||||
name,
|
|
||||||
selected,
|
|
||||||
onClick,
|
|
||||||
}: {
|
|
||||||
cx: number;
|
|
||||||
cy: number;
|
|
||||||
r: number;
|
|
||||||
state: AgentState;
|
|
||||||
name: SisterName;
|
|
||||||
selected: boolean;
|
|
||||||
onClick: () => void;
|
|
||||||
}) {
|
|
||||||
const color = STATE_COLORS[state];
|
|
||||||
const clipId = `avatar-clip-${name}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<g
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
aria-label={`${name} — state: ${state}`}
|
|
||||||
onClick={onClick}
|
|
||||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
|
|
||||||
style={{ cursor: 'pointer', outline: 'none' }}
|
|
||||||
>
|
|
||||||
{selected && (
|
|
||||||
<circle
|
|
||||||
cx={cx}
|
|
||||||
cy={cy}
|
|
||||||
r={r + 8}
|
|
||||||
fill="none"
|
|
||||||
stroke="var(--text-primary)"
|
|
||||||
strokeWidth={1}
|
|
||||||
strokeDasharray="4 3"
|
|
||||||
opacity={0.6}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<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>
|
|
||||||
<circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
|
|
||||||
<defs>
|
|
||||||
<clipPath id={clipId}>
|
|
||||||
<circle cx={cx} cy={cy} r={r - 2} />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
<image
|
|
||||||
href={`${API_URL}/api/sisters/${name}/avatar`}
|
|
||||||
x={cx - r + 2}
|
|
||||||
y={cy - r + 2}
|
|
||||||
width={(r - 2) * 2}
|
|
||||||
height={(r - 2) * 2}
|
|
||||||
preserveAspectRatio="xMidYMid slice"
|
|
||||||
clipPath={`url(#${clipId})`}
|
|
||||||
/>
|
|
||||||
<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
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
aria-label={`subagent ${label} — state: ${state}`}
|
|
||||||
onClick={onClick}
|
|
||||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
|
|
||||||
style={{ cursor: 'pointer', outline: 'none' }}
|
|
||||||
>
|
|
||||||
{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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
|
|
||||||
|
|
||||||
export default function OfficeScene({
|
|
||||||
sisters,
|
|
||||||
selected,
|
|
||||||
onSelectSister,
|
|
||||||
onSelectSubagent,
|
|
||||||
dataMode,
|
|
||||||
subagentMode,
|
|
||||||
}: OfficeSceneProps) {
|
|
||||||
const getSister = useCallback(
|
|
||||||
(name: SisterName) => sisters.find((s) => s.name === name),
|
|
||||||
[sisters],
|
|
||||||
);
|
|
||||||
|
|
||||||
const isActive = useCallback(
|
|
||||||
(name: SisterName) => {
|
|
||||||
const sister = getSister(name);
|
|
||||||
return sister?.state === 'thinking' || sister?.state === 'tool_calling' || sister?.state === 'speaking';
|
|
||||||
},
|
|
||||||
[getSister],
|
|
||||||
);
|
|
||||||
|
|
||||||
const isSisterSelected = (name: SisterName) => selected?.type === 'sister' && selected.name === name;
|
|
||||||
const isSubSelected = (id: string) => selected?.type === 'subagent' && selected.id === id;
|
|
||||||
|
|
||||||
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'}
|
|
||||||
{subagentMode === 'live' ? ' · subagents: live · runtime' : ' · subagents: fallback'}
|
|
||||||
</FreshnessLabel>
|
|
||||||
|
|
||||||
<svg viewBox={`0 0 ${VB_W} ${VB_H}`} width="100%" height="100%" style={{ display: 'block' }}>
|
|
||||||
{SISTER_ORDER.map((name) => {
|
|
||||||
const [zx, zy, zw, zh] = ZONES[name];
|
|
||||||
return (
|
|
||||||
<rect
|
|
||||||
key={`zone-${name}`}
|
|
||||||
x={zx}
|
|
||||||
y={zy}
|
|
||||||
width={zw}
|
|
||||||
height={zh}
|
|
||||||
rx={4}
|
|
||||||
fill={ZONE_COLORS[name]}
|
|
||||||
stroke={ZONE_BORDER[name]}
|
|
||||||
strokeWidth={1}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
|
|
||||||
<rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
|
|
||||||
|
|
||||||
<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)">
|
|
||||||
회의실
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<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} />
|
|
||||||
<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} />
|
|
||||||
<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} />
|
|
||||||
<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} />
|
|
||||||
<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} />
|
|
||||||
|
|
||||||
{([
|
|
||||||
['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]}>
|
|
||||||
{text}
|
|
||||||
</text>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{SISTER_ORDER.map((name) => {
|
|
||||||
const sister = getSister(name);
|
|
||||||
const state: AgentState = sister?.state ?? 'idle';
|
|
||||||
const [cx, cy] = SISTER_POS[name];
|
|
||||||
return (
|
|
||||||
<SisterCircle
|
|
||||||
key={`sister-${name}`}
|
|
||||||
cx={cx}
|
|
||||||
cy={cy}
|
|
||||||
r={28}
|
|
||||||
state={state}
|
|
||||||
name={name}
|
|
||||||
selected={isSisterSelected(name)}
|
|
||||||
onClick={() => onSelectSister(name)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{SISTER_ORDER.map((sisterName) => {
|
|
||||||
const sister = getSister(sisterName);
|
|
||||||
const subagents = sister?.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)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
})}
|
|
||||||
|
|
||||||
{SISTER_ORDER.map((sisterName) => {
|
|
||||||
const sister = getSister(sisterName);
|
|
||||||
const subagents = sister?.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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,275 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import styled, { css, 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;
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
max-width: 100%;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-x: visible;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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 ? css`${flowAnim} 1.6s linear infinite` : 'none'};
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
width: 1px;
|
|
||||||
height: 16px;
|
|
||||||
align-self: flex-start;
|
|
||||||
margin-left: var(--space-lg);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
'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);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 359px) {
|
|
||||||
grid-template-columns: 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,7 +3,6 @@
|
|||||||
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { API_URL } from './config';
|
import { API_URL } from './config';
|
||||||
import { withSessionRequest } from './csrf';
|
|
||||||
|
|
||||||
interface AuthUser {
|
interface AuthUser {
|
||||||
userId: number;
|
userId: number;
|
||||||
@@ -32,20 +31,38 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
const loadUser = useCallback(async () => {
|
const loadUser = useCallback(async () => {
|
||||||
|
const token = localStorage.getItem('hanarang_access_token');
|
||||||
|
if (!token) { setLoading(false); return; }
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
|
const res = await fetch(`${API_URL}/api/auth/me`, {
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
setUser({ userId: data.id, username: data.username, role: data.role });
|
setUser({ userId: data.id, username: data.username, role: data.role });
|
||||||
} else if (res.status === 401) {
|
} else if (res.status === 401) {
|
||||||
// access token expired → try refresh via cookie
|
// access token 만료 → refresh 시도
|
||||||
|
const refreshToken = localStorage.getItem('hanarang_refresh_token');
|
||||||
|
if (refreshToken) {
|
||||||
try {
|
try {
|
||||||
const rRes = await fetch(`${API_URL}/api/auth/refresh`, withSessionRequest({ method: 'POST' }, { csrf: true }));
|
const rRes = await fetch(`${API_URL}/api/auth/refresh`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'x-refresh-token': refreshToken },
|
||||||
|
});
|
||||||
if (rRes.ok) {
|
if (rRes.ok) {
|
||||||
const d = await rRes.json();
|
const d = await rRes.json();
|
||||||
|
localStorage.setItem('hanarang_access_token', d.accessToken);
|
||||||
|
if (d.refreshToken) localStorage.setItem('hanarang_refresh_token', d.refreshToken);
|
||||||
setUser({ userId: 0, username: d.username, role: d.role });
|
setUser({ userId: 0, username: d.username, role: d.role });
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('hanarang_access_token');
|
||||||
|
localStorage.removeItem('hanarang_refresh_token');
|
||||||
}
|
}
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('hanarang_access_token');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
// silent
|
// silent
|
||||||
@@ -57,11 +74,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
useEffect(() => { loadUser(); }, [loadUser]);
|
useEffect(() => { loadUser(); }, [loadUser]);
|
||||||
|
|
||||||
const login = async (username: string, password: string) => {
|
const login = async (username: string, password: string) => {
|
||||||
const res = await fetch(`${API_URL}/api/auth/login`, withSessionRequest({
|
const res = await fetch(`${API_URL}/api/auth/login`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ username, password }),
|
body: JSON.stringify({ username, password }),
|
||||||
}, { csrf: true }));
|
});
|
||||||
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
const d = await res.json();
|
const d = await res.json();
|
||||||
@@ -69,23 +86,27 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const d = await res.json();
|
const d = await res.json();
|
||||||
// Tokens are set as HttpOnly cookies by the server
|
localStorage.setItem('hanarang_access_token', d.accessToken);
|
||||||
setUser({ userId: 0, username: d.username, role: d.role });
|
if (d.refreshToken) {
|
||||||
|
localStorage.setItem('hanarang_refresh_token', d.refreshToken);
|
||||||
// Fetch actual userId from /me
|
}
|
||||||
|
// me API로 실제 userId 가져오기
|
||||||
try {
|
try {
|
||||||
const meRes = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
|
const meRes = await fetch(`${API_URL}/api/auth/me`, {
|
||||||
|
headers: { Authorization: `Bearer ${d.accessToken}` },
|
||||||
|
});
|
||||||
if (meRes.ok) {
|
if (meRes.ok) {
|
||||||
const me = await meRes.json();
|
const me = await meRes.json();
|
||||||
setUser({ userId: me.id, username: me.username, role: me.role });
|
setUser({ userId: me.id, username: me.username, role: me.role });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
} catch { /* fallback — already set basic info */ }
|
} catch { /* fallback */ }
|
||||||
|
setUser({ userId: 0, username: d.username, role: d.role });
|
||||||
};
|
};
|
||||||
|
|
||||||
const logout = async () => {
|
const logout = () => {
|
||||||
try {
|
localStorage.removeItem('hanarang_access_token');
|
||||||
await fetch(`${API_URL}/api/auth/logout`, withSessionRequest({ method: 'POST' }, { csrf: true }));
|
localStorage.removeItem('hanarang_refresh_token');
|
||||||
} catch { /* silent */ }
|
|
||||||
setUser(null);
|
setUser(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,46 +0,0 @@
|
|||||||
export const CSRF_COOKIE_NAME = 'hanarang_csrf_token';
|
|
||||||
|
|
||||||
export function getCookieValue(name: string): string {
|
|
||||||
if (typeof document === 'undefined') return '';
|
|
||||||
|
|
||||||
const match = document.cookie
|
|
||||||
.split('; ')
|
|
||||||
.find((item) => item.startsWith(`${encodeURIComponent(name)}=`));
|
|
||||||
|
|
||||||
if (!match) return '';
|
|
||||||
|
|
||||||
return decodeURIComponent(match.split('=').slice(1).join('='));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCsrfToken(): string {
|
|
||||||
return getCookieValue(CSRF_COOKIE_NAME);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function needsCsrf(method?: string): boolean {
|
|
||||||
const normalized = (method ?? 'GET').toUpperCase();
|
|
||||||
return !['GET', 'HEAD', 'OPTIONS'].includes(normalized);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function withCsrfHeaders(headers?: HeadersInit): Headers {
|
|
||||||
const nextHeaders = new Headers(headers);
|
|
||||||
const csrfToken = getCsrfToken();
|
|
||||||
|
|
||||||
if (csrfToken) {
|
|
||||||
nextHeaders.set('x-csrf-token', csrfToken);
|
|
||||||
}
|
|
||||||
|
|
||||||
return nextHeaders;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function withSessionRequest(
|
|
||||||
init: RequestInit = {},
|
|
||||||
options: { csrf?: boolean } = {},
|
|
||||||
): RequestInit {
|
|
||||||
const useCsrf = options.csrf ?? needsCsrf(init.method);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...init,
|
|
||||||
credentials: 'include',
|
|
||||||
headers: useCsrf ? withCsrfHeaders(init.headers) : new Headers(init.headers),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user