v0.1.42

v0.1.42 — 외부 노드 orientation 정렬 + 엣지 z-index + 2D 성능 대폭 개선

요청 1

• "2D 레이아웃 정렬 모드에 따라서 외부 서비스 노드도 알맞게 위치가 정렬되어야해"

변경 파일

• src/utils/layoutAlgorithm.ts — placeExternals(externals, orientation, bounds) helper 신규.
• horizontal/tree: 트리 우측에 세로 stack (기존 유지)
• vertical: 트리 아래쪽에 가로 stack (y = maxY + 200)
• radial: 가장 바깥 leaf 의 반지름 + 280px 큰 외곽 원형 배치
• city: 우하단 SE 코너 너머 grid (cols × rows ≈ √N)

요청 2

• "노드연결선은 노드보다 낮아야함"

변경 파일

• src/components/Visualizer2D/Graph2D.tsx
• 모든 엣지 zIndex 를 노드 (default 0) 보다 낮은 값으로 강제 — non-parent: 0, parent: -1.
• highlight 시에도 이전 wantZ=10 (노드 위로 노드 카드 텍스트 가림) → 0 으로 고정.

요청 3

• "2D 모드 lag 해결"

perf 진단 (sub-agent)

• 4개 HIGH-severity 핫스팟 식별 + 5000+ 노드 환경 대상.

Perf #1 — RAF + hot-edge index

• (가장 큰 win):
• Graph2D.tsx 의 edge highlight effect — 5000개 엣지 통째 iterate → RAF throttle + edgesByNode 인덱스로 hot 노드 인접 엣지만 검사. 활성 엣지 30개일 때 (5000 → 30) 약 160배 빨라짐.
• highlighted 시 wantZ 도 0 으로 고정 (노드 위로 안 올라옴).

Perf #2 — 항상-flow 엣지 OFF

• src/utils/edgeStyle.ts 의 모든 animated: true (16종, http-*, cloud-*, data-*, mcp-link, external, dynamic-import, firebase-route, supabase-route, cloud-route) → animated: false.
• 실제 활동 시 highlight effect 가 dynamically on. SVG dasharray 의 continuous CSS 애니메이션이 5000 엣지 동시 paint 비용을 차지하던 문제 해결.

Perf #3 — AgentAvatars2D events 디커플링

• src/components/Avatars/AgentAvatars2D.tsx — events 배열 직접 구독 → ${len}|${lastAt} signature 만 구독. microtask 단위 리렌더 차단. selectAvatars 는 store.getState() 로 단발성 read.

Perf #4 — useFollowCamera2D early return

• src/hooks/useFollowCamera2D.ts — followedAgent === null 일 때 selector 가 즉시 null 반환 → events 변화 무시. 추적 안 할 때 events 구독 비용 0.

Perf #5 — Graph2D agentEvents 디커플링

• agentEventsSig = events.length signature 만 구독. externalActivityNodes / agentProjectEdges 의 useMemo deps 가 agentEvents → agentEventsSig 로 교체. events 배열은 useMemo 안에서 getState() 로 단발 read.

검증

• npx tsc --noEmit exit=0. npm run build 성공 — out/renderer/index-CV-AB48Q.js 3,054.20kB (+4kB).

📦 GitHub 릴리스 노트: v0.1.42