자기야 피드백: "픽셀 아트 안 예쁘다, 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 — 클릭으로
다 볼 수 있음.
- 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>
TASK-061: 프로젝트 목록 자매 프로필 사진 제거, 프로젝트용 neutral initial placeholder로 교체
TASK-062: 프로젝트 상세에서 Sprint timeline과 Hotfix history 분리, TIMELINE 반복 라벨 제거
테스트 23/23 pass, FE 16 routes build 성공
TASK-057: 자매 상세 설정 탭 제거 (개요/세션/활동/하네스/로그만 유지)
TASK-058: 관리 > 자매 관리 카드 이모지 제거, SisterAvatar 적용
TASK-059: 프로젝트 상세 이력 API/history 추가, Sprint + Hotfix timeline 표시
TASK-060: GlobalStyle에 user-select 정책 추가 (기본 none, 편집/로그/입력/코드만 text)
테스트 23/23 pass, FE 16 routes build 성공
TASK-052: 프로젝트 목록 3구역 구조로 재배치 (avatar/name-desc | progress+sprint counts | status+updated)
TASK-053: 프로젝트 대표 avatar를 자매 프로필 사진으로 교체 (ownerSister 기반)
TASK-054: 자매 상세 탭에 세션/활동/하네스/로그 통합
TASK-055: 메인 대시보드에 실데이터 막대 그래프 2종 추가 (sister load, project progress)
TASK-056: 관리자 상단 탭에서 하네스 제거 (자매 상세로 이동)
테스트 23/23 pass, FE 16 routes build 성공
TASK-049: DISK 사용률 퍼센트 계산 추가, NaN/0 fallback 처리
TASK-050: 자매 카드 전체를 Link로 전환
TASK-051: 우측 영역을 리소스 중복 텍스트에서 운영 메타(STATUS/ROLE/LXC/LAST CHECK/CURRENT TASK)로 교체
테스트 23/23 pass, FE 16 routes build 성공
TASK-046: /sisters/[name] 상단 프로필 hero 재디자인, avatar 120px 확대
TASK-047: 개요 레이아웃 우선순위 재정렬 (hero → system summary → activity)
TASK-048: ActivityService sanitize 추가
- stderr/bash command not found/raw 내부 오류 직접 노출 금지
- 원격 노드 연결 실패 메시지 사용자 친화화
테스트 23/23 pass, FE 16 routes build 성공
TASK-040: SprintSyncService .qa/SPRINT-XXX-review-*.md PASSED 여부로 status 결정
TASK-041: ProjectsService 진행률을 Sprint done수/전체Sprint수 기반으로 수정
TASK-042/043: SisterAvatar 공통 컴포넌트 생성, 대시보드/자매/상세 페이지 적용
- onError 시 이니셜 fallback으로 전환 (숨기기 제거)
- API_URL 기반 src 사용
테스트 23/23 pass, FE 16 routes build 성공
TASK-036: admin/layout.tsx API Key UI 완전 제거
TASK-037: adminFetch JWT 전용 단순화 (api key fallback 제거)
TASK-038: ApiKeyStrategy, ApiKeyGuard, CompositeGuard 제거
- api-key.strategy.ts, api-key.guard.ts 파일 삭제
- 모든 컨트롤러 @UseGuards JwtGuard로 전환
- AuthModule에서 ApiKey 관련 providers 제거
TASK-039: PUBLIC_PATHS에서 /register 제거, login FooterLink dead code 제거
테스트 23/23 pass, FE 16 routes build 성공
TASK-032: /register → /login redirect, register API/로직 제거
TASK-033: SprintSyncService(.plans/sprints/ 파싱), /api/projects/:id/sync-sprints, sync-all
TASK-034: 프로젝트 목록 SPRINT SYNC 버튼 추가, Gitea sync 시 Sprint 자동 동기화
TASK-035: 아바타 onError 처리, 캐시 실패 시 삭제 로직 추가
테스트 23/23 pass, FE 16 routes build 성공
Sprint 006 non-blocking:
- N2: AuthContext 401 시 refresh token 자동 재발급
- N3: login 후 /me API로 실제 userId 조회
- N4: register refreshToken localStorage 저장
TASK-024: Gitea 동기화
- GiteaSyncService: syncRepos() (Project upsert + ActivityLog)
- POST /api/admin/gitea/sync + GET /api/admin/gitea/status
- GiteaSyncModule (CompositeGuard + @Roles('admin'))
TASK-025: Commit/Branch/PR API
- GiteaService 강화: getCommits, getBranches, getPulls
- GiteaCommit/GiteaBranch 인터페이스 추가
- GET /api/projects/:id/{commits,branches,pulls}
TASK-026: 프로젝트 FE
- /projects: GITEA SYNC 버튼 + sync 결과 표시
- /projects/[id]: Overview/Commits/Branches/PRs 탭
TASK-027: 활동 로그 자동 기록
- SistersService: 상태 변경 시 ActivityLog 자동 기록 (@Optional ActivityService)
- GiteaSyncService: sync 시 new_repo/sync_complete 로그
- /activities: 실제 API 연결 확인 (하드코딩 없음)
테스트 26/26 pass, FE 16 routes build 성공
- 디자인 시스템: #151515 배경, 1px 보더 카드, CSS vars, mono 포인트
- GlobalStyle/theme.ts v2 (DESIGN-SYSTEM.md 기반)
- 공통 컴포넌트 (ui/base.tsx): LabelMeta, BracketValue, Card, TechBar, Timeline 등
- Sidebar: [대시] 브라켓 네비 + 모바일 하단 탭바 (767px)
- LayoutShell: SidebarContext 제거, 단순화
- 대시보드 (/): SYS 상태 카드 4개 + ONGOING PROJECTS + ACTIVITY FEED
- 활동 로그 (/activities): 로그 테이블 + 필터 + 검색 + 페이지네이션 (신규)
- 설정 (/settings): 4섹션 Toggle/Bracket Input 그리드
- 자매 노드 관리 (/sisters): 3열 수평 레이아웃 (INFO/GRAPH/SYNC)
- 자매 상세 (/sisters/[name]): 간소화 + 터미널 스타일
- 조직도 (/org): 터미널 카드 트리 구조 + 레벨 색상
- 프로젝트 목록 (/projects): 새 라우트
- 프로젝트 상세 (/projects/[id]): Phase Timeline + Audit Log + Checklist
- FE 14 routes build 성공
Sprint 004 non-blocking:
- null byte 방지 (harness file write)
Sprint 005 본문:
- CostLog Prisma 모델 추가
- TASK-016: GET /api/admin/costs + POST /api/admin/costs/record/:name
자매별/모델별/일별 토큰 + 예상 비용 (USD), 기간 필터(day/week/month)
- TASK-018: WebSocket Gateway (@WebSocketGateway /ws namespace)
sisters:update, activity:new 브로드캐스트
EventsScheduler: 30초 주기 자매 상태 체크 + 브로드캐스트
ActivityService: 새 로그 생성 시 실시간 브로드캐스트
- TASK-017: /admin/costs 비용 대시보드 (BarChart + 요약 카드)
- 메인 대시보드 useSocket 훅 + 실시간 연결 상태 표시
- 테스트 22/22 pass, FE 12 routes build 성공
- NEXT_PUBLIC_WS_URL env (.env.local.example 업데이트)
