v0.2.47
v0.2.47 — WebGL 패널 Z 계층 정리 + SubAgentPipPanel 미니 카메라 뷰포트
원인
- Drei
<Html>의zIndexRange={[16777271, 1000]}(아바타/손 아이콘) 가 floating 패널 z-[40]~z-[210] 보다 훨씬 높아 패널이 아바타/노드 카드에 가려짐.
해결
- 모든 WebGL Html zIndexRange 를 < 40 으로 cap. 계층:
- 노드 카드:
[10, 0](3 곳: file/external/virtual) - WebGLTrailsOverlay SVG: zIndex 25 (기존, 변경 없음)
- 아바타:
[33, 27](노드 + 트레일 위, 패널 아래) - 손 아이콘:
[38, 34](아바타 위, 패널 아래) - 가장 낮은 panel z-[40] (TerminalDockPanel) 보다 모두 아래 → 모든 floating UI 가 항상 WebGL 위.
수정 파일
WebGLGraph2D.tsx5 곳의 zIndexRange.
(2) SubAgentPipPanel 미니 카메라 뷰포트 구축
원인
- 기존 PIP 는 텍스트 카드만 — sub-agent 의 위치/움직임 시각 확인 불가. "포커스" 클릭 시 메인 뷰포트 카메라만 이동.
해결
- 각 sub-agent 카드 안에 296×110 SVG 미니 캔버스 — 별도 카메라 (= viewBox) 가 해당 sub-agent 의 currentPath 노드를 중심으로 자동 잡힘.
SubAgentMiniViewport
- 컴포넌트 (파일 끝에 신규):
- viewBox:
${tx - VIEWBOX_W/2} ${ty - VIEWBOX_H/2} ${VIEWBOX_W} ${VIEWBOX_H}— sub-agent 의 currentPath 노드 중앙 기준 700×260 world units 영역. - visibleNodes: viewBox 안에 들어오는 노드만 필터링.
- 노드 rect + label: 일반 노드는 회색, currentPath 노드는 녹색 (#3DDC84) 하이라이트 + 두꺼운 border.
- sub-agent 마커: 노드 중앙 위 컬러 circle (avatar hue) + 글로우 + agent 이름 첫 글자 (C/G/X/P).
- LIVE 인디케이터: 우상단에 ● LIVE pulse — 카메라 실시간 추적 활성 표시.
- 그래프 외 위치 (terminal:bash, mind:agent 등) 시 fallback 안내.
동시 다중 추적
- 메인 뷰포트는 메인 AI 추적, PIP 의 각 카드는 각 sub-agent 의 활동을 독립적으로 추적 — 동시에 여러 위치 모니터링 가능.
수정 파일
SubAgentPipPanel.tsx:- imports:
useProjectStore,compute2DTreeLayout. MiniNode/MiniNodeCoord타입 신규.SubAgentPipPanelImpl의 layout useMemo + props pass-through.SubAgentCard시그니처에placedNodes+idCoord추가, render 안에<SubAgentMiniViewport>삽입.SubAgentMiniViewport컴포넌트 신규 (~120 lines).
변경 파일
src/components/Visualizer2D/WebGLGraph2D.tsx— zIndexRange 5 곳 변경.src/components/Avatars/SubAgentPipPanel.tsx— 미니 카메라 뷰포트 + layout 공유.package.json0.2.46 → 0.2.47.
검증
npx tsc --noEmitexit=0npm run build성공 — renderer 8.19s, 번들 3,454.45 kB (~7 kB 증가, 미니 뷰포트 추가분).
사용자 확인
- WebGL: AgentFollowPanel / SubAgentPipPanel / SettingsModal 등 모든 floating UI 가 항상 노드/아바타/손 아이콘 위에 표시. 더 이상 아바타가 패널을 가리지 않음.
- PIP 카드: 각 sub-agent 의 위치를 미니 SVG 캔버스로 실시간 확인. 카메라가 자동으로 sub-agent 노드를 추적 (currentPath 변경 시 viewBox 즉시 갱신).
- 동시 모니터링: 메인 뷰포트에서 메인 AI 보면서, PIP 에서 5명의 sub-agent 가 서로 다른 파일에서 일하는 모습을 동시에 관찰 가능.
- --
📦 GitHub 릴리스 노트: v0.2.47