← 모든 릴리스 · 2026-05-20 · release

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.tsx 5 곳의 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.json 0.2.46 → 0.2.47.

검증

npx tsc --noEmit exit=0
npm 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 가 서로 다른 파일에서 일하는 모습을 동시에 관찰 가능.
--

← v0.2.46 v0.2.48 →

📦 GitHub 릴리스 노트: v0.2.47