나랑이
6e0583efeb
Build the 4자매 office dashboard with SVG scene, agent state visualization, context panel, direct chat workspace, pipeline panel, and server health panel. - frontend/app/office/page.tsx: Main office page (sisters + ops data, WS live + polling fallback, selected agent state, chat toggle) - frontend/components/office/OfficeScene.tsx: SVG 2D office floor plan with 4 fixed sister desks, 17 subagent nodes, handoff connector lines, conference room, and per-state animations (idle/thinking/tool_calling/ speaking/error) - frontend/components/office/ContextPanel.tsx: Right context panel showing selected sister or subagent detail, current task, subagent list, chat/detail links - frontend/components/office/ChatWorkspace.tsx: Direct chat workspace with sister tabs, message timeline, streaming-ready layout; Gateway connection pending notice (honest fallback labeling) - frontend/components/office/PipelinePanel.tsx: Bottom pipeline panel with sprint/workflow nodes and flow animations - frontend/components/office/ServerHealthPanel.tsx: Server health grid for 4 sisters + Dev + Docker with live/snapshot/fallback labels - frontend/components/common/Sidebar.tsx: Add /office nav item Data labeling: sisters live via WS (snapshot fallback), subagent states derived/fallback, pipeline snapshot, chat gateway-pending. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
하나랑 대시보드
4자매 멀티에이전트 파이프라인 관제 대시보드. 자기야가 한눈에 전체 현황, 프로젝트 흐름, QA 상태, 배포 상태를 파악하고 관리하는 화면.
기술 스택
- Frontend: Next.js 16 + styled-components
- Backend: Nest.js + Prisma
- DB: MariaDB
- Realtime: Socket.IO
- FE:
https://hanarang.nabomhalang.co.kr - BE:
https://hanarang-api.nabomhalang.co.kr
표준 저장소 구조
hanarang-dashboard/
├── ARCHITECTURE.md
├── README.md
├── .plans/
│ ├── OVERVIEW.md
│ ├── design/
│ ├── sprints/
│ ├── hotfix/
│ ├── qa/
│ └── deploy/
├── docs/
│ ├── product-specs/
│ ├── references/
│ ├── tech-debt-tracker.md
│ └── QUALITY_SCORE.md
├── frontend/
└── backend/
작업 파이프라인
- 하랑이 문서 작성 및 선 push
- 나랑이 구현 branch 작업
- 다랑이 QA +
.plans/qa/결과 문서 push - 하랑이 QA 확인 후
mainmerge - 이랑이 최신
mainpull + 재배포
main은 항상 배포 가능 상태를 유지해.
실행 방법
사전 준비
- 루트
.env.example참고 backend/.env작성SSH_KEY_PATH설정
Backend
cd backend
npm install
npx prisma migrate dev
npx prisma db seed
npm run dev
Frontend
cd frontend
npm install
npm run dev
참고 문서
- 아키텍처:
ARCHITECTURE.md - 실행 문서:
.plans/OVERVIEW.md - 구조 기준:
docs/references/repo-structure.md - 프로젝트 IA:
docs/product-specs/project-information-architecture.md