자기야 피드백: "픽셀 아트 안 예쁘다, profile photo 로 바꿀 수 없나?
픽셀 아트 고집 안 해도 됨." → 16x28 픽셀로는 anime 일러스트 정체성 못
살리는 게 사실. Phaser 자체도 큰 의존성이라 깔끔하게 빼고 React+CSS+SVG
로 재작성.
## 변경
### 제거
- phaser 4.0.0 의존성 (~3MB)
- frontend/components/office-rpg/ 전체 (Phaser 통합 layer + procedural
pixel sprite factory + Office scene)
### 신설
- frontend/components/office-room/OfficeRoom.tsx
- 2x2 grid layout: 하랑/나랑 (위), 다랑/이랑 (아래)
- 가운데 회의실 (시각 표시만, 향후 인터랙션용)
- 각 자매 = 책상 SVG 위에 원형 portrait card
- 72px portrait (실제 /api/sisters/{name}/avatar)
- 자매 시그니처 색 border (harang=blue, narang=teal, darang=red, erang=violet)
- hover 시 위로 살짝 떠오름
- 활성 stage 일 때 PulseRing + StatusDot 펄스
- 자매 사이 SVG flow arrow (plan → impl → review → deploy 방향)
활성 stage 시 화살표 hi-lighted
- 클릭 → 우측 SisterDetailPanel slide-in
- frontend/components/office-room/SisterDetailPanel.tsx
- 기존 office-rpg 의 detail panel 을 재사용 (PortraitLg + 자매 시그니처
accent + 역할 설명 + 백엔드 sister info)
### app/page.tsx
- OfficeRpg → OfficeRoom 으로 교체
- 4초 polling 으로 활성 파이프라인의 currentState 추적 →
STATE_TO_STAGE 매핑 → 해당 자매 카드 자동 펄스
자기야 발견: 1차 sprite 색상이 실제 자매 일러스트와 거리가 멀었음. 4 자매
실제 avatar.png (각 LXC 의 ~/.openclaw/avatar.png) 를 직접 확인 후 시그니처
정정:
하랑 — 흰/은 머리 + 흰 cat ears + 파란 리본 + 파란 눈 (이전: 빨강 — 틀림)
나랑 — 검은 short bob + 검은 cat ears + 청록 보타이 + 청록 눈 (그나마 비슷)
다랑 — 흰 머리 + 흰 cat ears + 빨간 chinese 옷 + 빨간 눈 (이전: 노랑 — 틀림)
이랑 — 흰 long hair + 흰 cat ears + 흰 옷 + 파란 눈 + 파란 나비 (이전: 보라)
핵심 변경:
- spriteFactory.ts SISTER_PALETTES 전면 재작성: hair / hairShadow / outfit /
outfit2 / eye / earInner 등 분리. 자매별로 정확한 시그니처 색상.
- 4 자매 모두 catgirl 이라 sprite 위쪽에 cat ears 추가 (행 0-2 에 cat ear
outline + hair fill + earInner pink).
- CHAR_H 24 → 28 로 키워서 cat ears 와 더 긴 머리/몸 표현 공간 확보.
- 자매별 추가 디테일:
darang → 이마에 빨간 보석 점
erang → 머리 옆에 작은 파란 나비
harang → 머리 위에 파란 리본
narang → 옆머리 청록 헤어핀
- narang 만 short bob (옆 bangs 다른 자매보다 짧음). 나머지 3 명은 long hair.
- OfficeScene.ts: sprite 28px 으로 커졌으니 origin 을 (0.5, 1) 로 바꾸고
발끝을 타일 바닥 위에 정렬해 일관된 standing height.
이전: sprite 가 식별 불가능한 색깔 박스. 이번: 4 자매 각각 일러스트 시그
니처 색 + cat ears + 머리스타일이 보임.
자기야 요청: 대시보드의 LLM 응답 본문을 드래그해서 복사하고 싶음.
수정:
- LlmOutput 에 user-select: text + cursor: text 를 명시. 부모 어딘가에서
상속받을 가능성을 차단. ::selection 색상도 추가해 선택 영역이 가시적
- LlmOutput 내부의 button (더보기 토글) 만 user-select: none 로 예외 처리
- Backdrop click 핸들러 개선: 사용자가 drawer 내부에서 drag-select 시작
하다가 mouseup 이 backdrop 위에서 끝나면 기존 코드는 drawer 를 닫아 버려
selection 이 사라졌음. 이제 mousedown 도 backdrop 에서 시작했을 때만
close 를 실행 (data-backdrop-down attr 로 추적)
자기야 피드백: 드로어가 너무 길어서 보기 힘듦. LLM 응답 + 전체 이벤트 로그
+ 자식 노드 다 펼쳐져 있어서 하나 클릭하면 화면 한 페이지가 다 차버림.
수정:
- LLM 응답: 280 자 미리보기 + "더 보기 (+N chars)" 토글. 긴 마크다운이
디폴트로 화면을 먹지 않음. 응답 길이를 헤더 옆 배지로 미리 표시
- 하위 노드: 디폴트 접힘. 헤더에 개수 배지, 클릭하면 펼침
- 이벤트 로그: 디폴트 접힘. 펼치면 두 칩 (milestones / all) 으로 필터링
- milestones: spawned/completed/failed/escalated 만
- all: started/progress/output 까지 전부
대부분 디버깅엔 milestones 만 보면 충분
- 새 sub-task 클릭 시 expanded 상태 전부 리셋
새 styled components: CollapsibleHeader, ChevronIcon, SectionCount, ChipRow,
Chip, ShowMoreButton (재사용 가능)
대시보드 한 화면이 디폴트로 절반 이하로 줄어듦. 정보 손실 0 — 클릭으로
다 볼 수 있음.
- 기존에는 git.nabomhalang.co.kr 한 곳만 하드코딩되어 있었음
- GIT_RAW_ALLOWED_HOSTS=comma,separated,hosts 로 여러 호스트 지원
- 기본값은 기존과 동일 (git.nabomhalang.co.kr) — 행동 변화 없음
- hanarang-rails v0.1.3 의 외부 배포 친화 패키지와 세트
- resultJson was showing as raw {"text":"..."} JSON string
- Now parses the JSON and renders the text via react-markdown
- Pretty rendering: headings, lists, code blocks, blockquotes, links
- Shows status dot + model name header
- Fallback to raw view when text field is empty
- OfficeFloor: 4자매 책상에 SisterAvatar (60px gradient frame)
- SubTaskTree: 노드 row 에 작은 SisterAvatar (20px) 표시
- SubTaskDetailDrawer: 헤더에 큰 SisterAvatar (40px) + role badge 함께
이미 있는 백엔드 /api/sisters/:name/avatar 엔드포인트 재활용
(SSH 로 ~/.openclaw/avatar.png 가져오는 AvatarService)
Office (full rewrite):
- frontend/components/office/OfficeFloor.tsx — 새로운 책상 그리드
4 자매 책상 (2x2 grid), 자매당 카드 형태
자매 아바타 (gradient), 역할 라벨, 작업 중 pulse 애니메이션
worker pill chips (manager/principal/lead/junior 색상별)
Stats: workers / active / done / fail
십자 가이드 라인으로 office floor plan 분위기
- frontend/app/office/page.tsx — 867 → 220 줄 압축
rails 데이터 직접 사용 (sisters API 의존성 제거)
사이드 패널: 선택된 자매의 sub-task 트리
Rails (간격 + 가독성):
- frontend/app/rails/page.tsx — 카드 spacing 확대, 헤더 명료화
Start 폼을 별도 카드로 분리 (한 줄 → enter 시 시작)
파이프라인 카드 padding 18px, 클릭 영역 확장
state badge 컬러 + 라운드, project name 큼지막
rel time / id 메타는 mono font 로 separator
- frontend/components/rails/SubTaskTree.tsx — 노드 padding 12px,
자식들 사이 dashed border + 16px 들여쓰기 ( 시각적 hierarchy)
Title sans font 로 변경, complexity meta 별도 줄
Sidebar:
- 기존 작업 변경 없음 ('레일' 메뉴는 이전 커밋에서 추가됨)
검증: pnpm build (next 16 turbopack) ✓
Backend:
- src/rails/rails.service.ts — HTTP client for rails API (read-only)
- src/rails/rails.controller.ts — REST under /api/rails/* (JwtGuard 보호)
GET /pipelines, /pipelines/:id, /pipelines/:id/sub-tasks, /health
POST /pipelines/start, /pipelines/:id/abort
- src/rails/rails.scheduler.ts — 2초마다 rails poll → EventEmitter2 broadcast
- src/rails/rails.module.ts — module + DI
- events.gateway.ts — rails.* 이벤트 핸들러 3종 (Socket.IO 'rails:*')
- app.module.ts — RailsModule 등록
Frontend:
- lib/useRailsSocket.ts — Socket.IO 훅 (rails:pipelines / pipeline:updated / subtasks)
- components/rails/PipelineList.tsx — 좌측 파이프라인 카드 목록
- components/rails/SubTaskTree.tsx — 우측 계층 트리 뷰
role 별 색상 (manager/principal/lead/junior)
state 별 dot + running pulse 애니메이션
duration / model 표시
- app/rails/page.tsx — 라이브 대시보드 페이지
좌: 파이프라인 목록 + Start 폼
우: 선택된 파이프라인의 sub-task 트리
- components/common/Sidebar.tsx — '레일' 메뉴 추가
기존 hanarang-dashboard 의 UX/테마 그대로 재사용 (CSS variables).
인증은 기존 JwtGuard 그대로 적용.
검증: backend nest build ✓ | frontend next build ✓ (turbopack)
다음: Dev 서버에 배포 + 첫 라이브 파이프라인 구동 확인.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace EventsGateway direct dependency in ActivityService with EventEmitter2
- ActivityModule no longer imports EventsModule (cycle broken)
- Register EventEmitterModule in AppModule
- Update activity.service.spec.ts to provide EventEmitter2
- SistersModule safely imports ActivityModule without creating a cycle
Dependency graph after fix:
EventsModule → SistersModule → ActivityModule (leaf, no back-edge)
