stellavault 0.1.0

package/packages/graph/src/lib/layout.worker.ts

@@ -0,0 +1,153 @@
+// Design Ref: §6.1 — Force-Directed Layout (Web Worker)
+// 뇌 형태 ellipsoid 초기 배치 + Barnes-Hut 근사 force simulation
+
+interface LayoutMessage {
+  type: 'init';
+  nodes: Array<{ id: string; clusterId: number; size: number }>;
+  edges: Array<{ source: string; target: string; weight: number }>;
+  options?: Partial<LayoutOptions>;
+}
+
+interface LayoutOptions {
+  iterations: number;
+  repulsion: number;
+  attraction: number;
+  damping: number;
+  brainScale: [number, number, number]; // x, y, z 반지름 (뇌 비율)
+}
+
+const DEFAULTS: LayoutOptions = {
+  iterations: 200,
+  repulsion: 800,
+  attraction: 0.005,
+  damping: 0.92,
+  brainScale: [250, 180, 200], // 좌우 넓고, 위아래 납작, 앞뒤 중간 = 뇌 비율
+};
+
+self.onmessage = (e: MessageEvent<LayoutMessage>) => {
+  if (e.data.type !== 'init') return;
+
+  const { nodes, edges, options } = e.data;
+  const opts = { ...DEFAULTS, ...options };
+  const n = nodes.length;
+
+  if (n === 0) {
+    self.postMessage({ type: 'done', positions: [] });
+    return;
+  }
+
+  // 노드 인덱스 맵
+  const idxMap = new Map<string, number>();
+  nodes.forEach((node, i) => idxMap.set(node.id, i));
+
+  // 엣지를 인덱스 기반으로 변환
+  const edgeIdx = edges
+    .map(e => ({ s: idxMap.get(e.source) ?? -1, t: idxMap.get(e.target) ?? -1, w: e.weight }))
+    .filter(e => e.s >= 0 && e.t >= 0);
+
+  // 초기 배치: 뇌 형태 ellipsoid 표면 + 내부
+  const pos = new Float64Array(n * 3);
+  const vel = new Float64Array(n * 3);
+  const [rx, ry, rz] = opts.brainScale;
+
+  for (let i = 0; i < n; i++) {
+    // 구면 좌표 → 타원체 매핑
+    const theta = Math.acos(2 * Math.random() - 1); // 0~π
+    const phi = Math.random() * 2 * Math.PI;         // 0~2π
+    const r = 0.5 + 0.5 * Math.random();             // 반지름 비율 (내부에도 분포)
+
+    // 뇌 좌반구/우반구 비대칭 (약간의 주름 효과)
+    const wobble = 1 + 0.1 * Math.sin(5 * theta) * Math.cos(3 * phi);
+
+    pos[i * 3]     = rx * r * Math.sin(theta) * Math.cos(phi) * wobble;
+    pos[i * 3 + 1] = ry * r * Math.cos(theta) * wobble;
+    pos[i * 3 + 2] = rz * r * Math.sin(theta) * Math.sin(phi) * wobble;
+
+    // 같은 클러스터끼리 가깝게 초기 배치
+    const cluster = nodes[i].clusterId;
+    const clusterAngle = (cluster / 10) * 2 * Math.PI;
+    pos[i * 3]     += 30 * Math.cos(clusterAngle);
+    pos[i * 3 + 2] += 30 * Math.sin(clusterAngle);
+  }
+
+  // Force simulation
+  for (let iter = 0; iter < opts.iterations; iter++) {
+    const alpha = 1 - iter / opts.iterations; // cooling
+    const repForce = opts.repulsion * alpha;
+
+    // 반발력 (모든 노드 쌍 — n < 2000이면 O(n²) 허용)
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        const dx = pos[j * 3] - pos[i * 3];
+        const dy = pos[j * 3 + 1] - pos[i * 3 + 1];
+        const dz = pos[j * 3 + 2] - pos[i * 3 + 2];
+        const distSq = dx * dx + dy * dy + dz * dz + 0.01;
+        const force = repForce / distSq;
+        const fx = dx * force / Math.sqrt(distSq);
+        const fy = dy * force / Math.sqrt(distSq);
+        const fz = dz * force / Math.sqrt(distSq);
+
+        vel[i * 3]     -= fx;
+        vel[i * 3 + 1] -= fy;
+        vel[i * 3 + 2] -= fz;
+        vel[j * 3]     += fx;
+        vel[j * 3 + 1] += fy;
+        vel[j * 3 + 2] += fz;
+      }
+    }
+
+    // 인력 (연결된 노드)
+    for (const edge of edgeIdx) {
+      const dx = pos[edge.t * 3] - pos[edge.s * 3];
+      const dy = pos[edge.t * 3 + 1] - pos[edge.s * 3 + 1];
+      const dz = pos[edge.t * 3 + 2] - pos[edge.s * 3 + 2];
+      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) + 0.01;
+      const force = opts.attraction * dist * edge.w;
+      const fx = dx / dist * force;
+      const fy = dy / dist * force;
+      const fz = dz / dist * force;
+
+      vel[edge.s * 3]     += fx;
+      vel[edge.s * 3 + 1] += fy;
+      vel[edge.s * 3 + 2] += fz;
+      vel[edge.t * 3]     -= fx;
+      vel[edge.t * 3 + 1] -= fy;
+      vel[edge.t * 3 + 2] -= fz;
+    }
+
+    // 뇌 형태 유지 — ellipsoid 경계 소프트 제약
+    for (let i = 0; i < n; i++) {
+      const x = pos[i * 3], y = pos[i * 3 + 1], z = pos[i * 3 + 2];
+      // ellipsoid 밖이면 안쪽으로 끌어당김
+      const ellipDist = (x / rx) ** 2 + (y / ry) ** 2 + (z / rz) ** 2;
+      if (ellipDist > 1) {
+        const pullback = 0.3 * (ellipDist - 1);
+        vel[i * 3]     -= x * pullback * 0.01;
+        vel[i * 3 + 1] -= y * pullback * 0.01;
+        vel[i * 3 + 2] -= z * pullback * 0.01;
+      }
+
+      // 속도 적용 + 감쇠
+      pos[i * 3]     += vel[i * 3];
+      pos[i * 3 + 1] += vel[i * 3 + 1];
+      pos[i * 3 + 2] += vel[i * 3 + 2];
+      vel[i * 3]     *= opts.damping;
+      vel[i * 3 + 1] *= opts.damping;
+      vel[i * 3 + 2] *= opts.damping;
+    }
+
+    // 매 20 iteration마다 중간 결과 전송 (애니메이션)
+    if (iter % 20 === 0 || iter === opts.iterations - 1) {
+      const positions: Array<[number, number, number]> = [];
+      for (let i = 0; i < n; i++) {
+        positions.push([pos[i * 3], pos[i * 3 + 1], pos[i * 3 + 2]]);
+      }
+      self.postMessage({
+        type: iter === opts.iterations - 1 ? 'done' : 'progress',
+        positions,
+        iteration: iter,
+        total: opts.iterations,
+      });
+    }
+  }
+};

package/packages/graph/src/lib/motion-controller.ts

@@ -0,0 +1,83 @@
+// Design Ref: §2 — MediaPipe Hands 초기화 + 웹캠 관리
+
+import { detectGesture, resetGestureState, type GestureResult } from './gesture-detector.js';
+
+export interface MotionController {
+  start(): Promise<void>;
+  stop(): void;
+  isRunning(): boolean;
+  getVideoElement(): HTMLVideoElement | null;
+  onGesture(cb: (gesture: GestureResult) => void): void;
+}
+
+export function createMotionController(): MotionController {
+  let video: HTMLVideoElement | null = null;
+  let hands: any = null;
+  let camera: any = null;
+  let running = false;
+  let gestureCallback: ((g: GestureResult) => void) | null = null;
+
+  return {
+    async start() {
+      if (running) return;
+
+      // 동적 import (lazy load — ~5MB WASM)
+      const [handsModule, cameraModule] = await Promise.all([
+        import('@mediapipe/hands'),
+        import('@mediapipe/camera_utils'),
+      ]);
+
+      // 비디오 요소 생성
+      video = document.createElement('video');
+      video.setAttribute('playsinline', '');
+      video.style.display = 'none';
+      document.body.appendChild(video);
+
+      // MediaPipe Hands 초기화
+      hands = new handsModule.Hands({
+        locateFile: (file: string) =>
+          `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
+      });
+      hands.setOptions({
+        maxNumHands: 1,
+        modelComplexity: 0, // 0=lite (가장 빠름)
+        minDetectionConfidence: 0.6,
+        minTrackingConfidence: 0.5,
+      });
+
+      hands.onResults((results: any) => {
+        if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+          const gesture = detectGesture(results.multiHandLandmarks[0]);
+          if (gesture.type !== 'none' && gestureCallback) {
+            gestureCallback(gesture);
+          }
+        }
+      });
+
+      // 카메라 시작
+      camera = new cameraModule.Camera(video, {
+        onFrame: async () => {
+          if (hands && video) await hands.send({ image: video });
+        },
+        width: 320,
+        height: 240,
+      });
+
+      await camera.start();
+      running = true;
+      resetGestureState();
+    },
+
+    stop() {
+      if (camera) { camera.stop(); camera = null; }
+      if (hands) { hands.close(); hands = null; }
+      if (video) { video.remove(); video = null; }
+      running = false;
+      resetGestureState();
+    },
+
+    isRunning() { return running; },
+    getVideoElement() { return video; },
+    onGesture(cb) { gestureCallback = cb; },
+  };
+}

package/packages/graph/src/lib/profile-card.ts

@@ -0,0 +1,122 @@
+// Design Ref: §4 — SVG 프로필 카드 생성
+// 레이더 차트 (상위 6 클러스터) + 워드클라우드 (상위 20 태그) + 통계
+
+interface ClusterInfo {
+  label: string;
+  color: string;
+  nodeCount: number;
+}
+
+interface CardData {
+  title: string;
+  documentCount: number;
+  clusterCount: number;
+  edgeCount: number;
+  clusters: ClusterInfo[];
+  topTags: Array<{ tag: string; count: number }>;
+}
+
+export function generateProfileCardSVG(data: CardData): string {
+  const W = 800, H = 420;
+  const top6 = data.clusters.slice(0, 6);
+  const maxCount = Math.max(1, ...top6.map(c => c.nodeCount));
+
+  // 레이더 차트 계산
+  const radarCx = 200, radarCy = 220, radarR = 100;
+  const radarPoints = top6.map((c, i) => {
+    const angle = (Math.PI * 2 * i) / top6.length - Math.PI / 2;
+    const r = radarR * (c.nodeCount / maxCount);
+    return {
+      x: radarCx + r * Math.cos(angle),
+      y: radarCy + r * Math.sin(angle),
+      labelX: radarCx + (radarR + 20) * Math.cos(angle),
+      labelY: radarCy + (radarR + 20) * Math.sin(angle),
+      label: c.label.split(',')[0].trim().slice(0, 12),
+      color: c.color,
+    };
+  });
+
+  const radarPath = radarPoints.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ') + 'Z';
+
+  // 레이더 그리드 (3단계)
+  const gridPaths = [0.33, 0.66, 1].map(scale => {
+    return top6.map((_, i) => {
+      const angle = (Math.PI * 2 * i) / top6.length - Math.PI / 2;
+      const x = radarCx + radarR * scale * Math.cos(angle);
+      const y = radarCy + radarR * scale * Math.sin(angle);
+      return `${i === 0 ? 'M' : 'L'}${x},${y}`;
+    }).join(' ') + 'Z';
+  });
+
+  // 워드클라우드
+  const tags20 = data.topTags.slice(0, 20);
+  const maxTagCount = Math.max(1, ...tags20.map(t => t.count));
+
+  const tagElements = tags20.map((t, i) => {
+    const size = 10 + 14 * (t.count / maxTagCount);
+    const col = i % 2 === 0 ? Math.floor(i / 2) : Math.floor(i / 2);
+    const row = i % 2;
+    const x = 480 + (col % 5) * 60;
+    const y = 140 + row * 30 + Math.floor(i / 10) * 70;
+    const opacity = 0.5 + 0.5 * (t.count / maxTagCount);
+    return `<text x="${x}" y="${y}" font-size="${size}" fill="#88aaff" opacity="${opacity}" font-family="monospace">#${escapeXml(t.tag)}</text>`;
+  }).join('\n    ');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0d1028"/>
+      <stop offset="100%" stop-color="#050510"/>
+    </linearGradient>
+    <linearGradient id="radar-fill" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366f1" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#06b6d4" stop-opacity="0.15"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="${W}" height="${H}" rx="16" fill="url(#bg)"/>
+  <rect width="${W}" height="${H}" rx="16" fill="none" stroke="#6366f140" stroke-width="1"/>
+
+  <!-- Header -->
+  <text x="30" y="40" font-size="20" font-weight="700" fill="#c0c0f0" font-family="system-ui, sans-serif">
+    🧠 ${escapeXml(data.title)}
+  </text>
+  <text x="30" y="65" font-size="13" fill="#556" font-family="monospace">
+    ${data.documentCount} documents · ${data.clusterCount} clusters · ${data.edgeCount} connections
+  </text>
+  <line x1="30" y1="80" x2="${W - 30}" y2="80" stroke="#6366f120" stroke-width="1"/>
+
+  <!-- Radar Chart -->
+  <text x="${radarCx}" y="105" font-size="11" fill="#667" text-anchor="middle" font-family="system-ui">KNOWLEDGE DISTRIBUTION</text>
+
+  <!-- Grid -->
+  ${gridPaths.map(p => `<path d="${p}" fill="none" stroke="#6366f115" stroke-width="0.5"/>`).join('\n  ')}
+
+  <!-- Radar axes -->
+  ${radarPoints.map(p => `<line x1="${radarCx}" y1="${radarCy}" x2="${p.labelX}" y2="${p.labelY}" stroke="#6366f110" stroke-width="0.5"/>`).join('\n  ')}
+
+  <!-- Radar shape -->
+  <path d="${radarPath}" fill="url(#radar-fill)" stroke="#818cf8" stroke-width="1.5"/>
+
+  <!-- Radar dots + labels -->
+  ${radarPoints.map(p => `
+  <circle cx="${p.x}" cy="${p.y}" r="3" fill="${p.color}"/>
+  <text x="${p.labelX}" y="${p.labelY + 4}" font-size="9" fill="#889" text-anchor="middle" font-family="monospace">${escapeXml(p.label)}</text>
+  `).join('')}
+
+  <!-- Word Cloud -->
+  <text x="580" y="105" font-size="11" fill="#667" text-anchor="middle" font-family="system-ui">TOP TOPICS</text>
+  <rect x="440" y="115" width="320" height="240" rx="8" fill="#6366f108"/>
+    ${tagElements}
+
+  <!-- Footer -->
+  <text x="${W / 2}" y="${H - 15}" font-size="10" fill="#334" text-anchor="middle" font-family="monospace">
+    Generated by Stellavault
+  </text>
+</svg>`;
+}
+
+function escapeXml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/packages/graph/src/main.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App.js';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/packages/graph/src/stores/graph-store.ts

@@ -0,0 +1,155 @@
+// Design Ref: §10.1 — zustand (R3F 렌더 루프 충돌 방지)
+
+import { create } from 'zustand';
+
+interface GraphNode {
+  id: string;
+  label: string;
+  filePath: string;
+  tags: string[];
+  clusterId: number;
+  position?: [number, number, number];
+  size: number;
+  source?: string;
+  type?: string;
+  lastModified?: string;
+}
+
+interface GraphEdge {
+  source: string;
+  target: string;
+  weight: number;
+}
+
+interface Cluster {
+  id: number;
+  label: string;
+  color: string;
+  nodeCount: number;
+}
+
+type GraphMode = 'semantic' | 'folder';
+
+interface GraphState {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  clusters: Cluster[];
+  selectedNodeId: string | null;
+  hoveredNodeId: string | null;
+  highlightedNodeIds: Set<string>;
+  searchQuery: string;
+  loading: boolean;
+  error: string | null;
+  mode: GraphMode;
+  pulseParticlePos: [number, number, number] | null;
+  hiddenClusters: Set<number>;
+  theme: 'dark' | 'light';
+  isExporting: boolean;
+  isRecording: boolean;
+  lodLevel: 'universe' | 'constellation' | 'note';
+  showDecayOverlay: boolean;
+  decayData: Record<string, number>;
+  showConstellation: boolean;
+  hiddenTypes: Set<string>;
+  showTimeline: boolean;
+  timelineRange: [number, number] | null; // [startMs, endMs] or null = show all
+  searchHistory: string[];
+  maxVisibleNodes: number; // performance cap for large vaults
+  viewMode: 'universe' | 'multiverse';
+  federationPeers: Array<{ peerId: string; displayName: string; documentCount: number; topTopics: string[] }>;
+  setViewMode: (mode: 'universe' | 'multiverse') => void;
+  setFederationPeers: (peers: Array<{ peerId: string; displayName: string; documentCount: number; topTopics: string[] }>) => void;
+
+  setGraphData: (nodes: GraphNode[], edges: GraphEdge[], clusters: Cluster[]) => void;
+  selectNode: (id: string | null) => void;
+  hoverNode: (id: string | null) => void;
+  setHighlightedNodes: (ids: string[]) => void;
+  setSearchQuery: (query: string) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  setMode: (mode: GraphMode) => void;
+  setPulseParticlePos: (pos: [number, number, number] | null) => void;
+  toggleHiddenCluster: (id: number) => void;
+  toggleTheme: () => void;
+  setExporting: (v: boolean) => void;
+  setRecording: (v: boolean) => void;
+  setLodLevel: (level: 'universe' | 'constellation' | 'note') => void;
+  toggleDecayOverlay: () => void;
+  setDecayData: (data: Record<string, number>) => void;
+  toggleConstellation: () => void;
+  toggleHiddenType: (type: string) => void;
+  toggleTimeline: () => void;
+  setTimelineRange: (range: [number, number] | null) => void;
+  addSearchHistory: (query: string) => void;
+  clearSearchHistory: () => void;
+}
+
+export const useGraphStore = create<GraphState>((set) => ({
+  nodes: [],
+  edges: [],
+  clusters: [],
+  selectedNodeId: null,
+  hoveredNodeId: null,
+  highlightedNodeIds: new Set(),
+  searchQuery: '',
+  loading: false,
+  error: null,
+  mode: 'semantic',
+  pulseParticlePos: null,
+  hiddenClusters: new Set(),
+  theme: 'dark',
+  isExporting: false,
+  isRecording: false,
+  lodLevel: 'constellation' as const,
+  showDecayOverlay: false,
+  decayData: {},
+  showConstellation: true,
+  hiddenTypes: new Set(),
+  showTimeline: false,
+  timelineRange: null,
+  searchHistory: JSON.parse(localStorage.getItem('sv_search_history') ?? '[]') as string[],
+  maxVisibleNodes: 5000,
+  viewMode: 'universe' as const,
+  federationPeers: [],
+  setViewMode: (mode) => set({ viewMode: mode }),
+  setFederationPeers: (peers) => set({ federationPeers: peers }),
+
+  setGraphData: (nodes, edges, clusters) => set({ nodes, edges, clusters, hiddenClusters: new Set() }),
+  selectNode: (id) => set({ selectedNodeId: id }),
+  hoverNode: (id) => set({ hoveredNodeId: id }),
+  setHighlightedNodes: (ids) => set({ highlightedNodeIds: new Set(ids) }),
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  setLoading: (loading) => set({ loading }),
+  setError: (error) => set({ error }),
+  setMode: (mode) => set({ mode }),
+  setPulseParticlePos: (pos) => set({ pulseParticlePos: pos }),
+  toggleTheme: () => set((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' as const })),
+  setExporting: (v) => set({ isExporting: v }),
+  setRecording: (v) => set({ isRecording: v }),
+  setLodLevel: (level) => set({ lodLevel: level }),
+  toggleDecayOverlay: () => set((s) => ({ showDecayOverlay: !s.showDecayOverlay })),
+  setDecayData: (data) => set({ decayData: data }),
+  toggleConstellation: () => set((s) => ({ showConstellation: !s.showConstellation })),
+  toggleHiddenCluster: (id) => set((s) => {
+    const next = new Set(s.hiddenClusters);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    return { hiddenClusters: next };
+  }),
+  addSearchHistory: (query) => set((s) => {
+    const filtered = s.searchHistory.filter((q) => q !== query);
+    const next = [query, ...filtered].slice(0, 20);
+    localStorage.setItem('sv_search_history', JSON.stringify(next));
+    return { searchHistory: next };
+  }),
+  clearSearchHistory: () => set(() => {
+    localStorage.removeItem('sv_search_history');
+    return { searchHistory: [] };
+  }),
+  toggleTimeline: () => set((s) => ({ showTimeline: !s.showTimeline, timelineRange: s.showTimeline ? null : s.timelineRange })),
+  setTimelineRange: (range) => set({ timelineRange: range }),
+  toggleHiddenType: (type) => set((s) => {
+    const next = new Set(s.hiddenTypes);
+    if (next.has(type)) next.delete(type); else next.add(type);
+    return { hiddenTypes: next };
+  }),
+}));

package/packages/graph/test-click.mjs

@@ -0,0 +1,49 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage();
+await page.goto('http://localhost:5173');
+await page.waitForTimeout(4000);
+
+const canvas = await page.locator('canvas').boundingBox();
+const cx = canvas.x + canvas.width / 2;
+const cy = canvas.y + canvas.height / 2;
+
+// 노드 찾기: 넓은 범위 스캔
+let found = false;
+for (let dx = -200; dx <= 200; dx += 30) {
+  for (let dy = -150; dy <= 150; dy += 30) {
+    await page.mouse.move(cx + dx, cy + dy);
+    await page.waitForTimeout(50);
+    const cursor = await page.evaluate(() => document.body.style.cursor);
+    if (cursor === 'pointer') {
+      console.log(`NODE FOUND at [${dx}, ${dy}]`);
+
+      // 호버 확인
+      await page.waitForTimeout(200);
+
+      // 클릭 (pointerdown 방식)
+      await page.mouse.click(cx + dx, cy + dy);
+      await page.waitForTimeout(1500);
+
+      // 사이드패널 확인
+      const result = await page.evaluate(() => {
+        const text = document.body.innerText;
+        return {
+          hasPanel: text.includes('DOCUMENT PREVIEW') || text.includes('Document Preview'),
+          hasExplore: text.includes('Explore connections'),
+          snippet: text.slice(0, 400),
+        };
+      });
+      console.log('PANEL:', JSON.stringify(result, null, 2));
+      found = true;
+      break;
+    }
+  }
+  if (found) break;
+}
+
+if (!found) console.log('No node found in scan range');
+
+await page.waitForTimeout(2000);
+await browser.close();

package/packages/graph/test-explore.mjs

@@ -0,0 +1,102 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage({ viewport: { width: 1400, height: 800 } });
+page.on('console', m => console.log(`[${m.type()}]`, m.text()));
+await page.goto('http://localhost:5173');
+await page.waitForTimeout(5000);
+
+const canvas = await page.locator('canvas').boundingBox();
+const cx = canvas.x + canvas.width / 2;
+const cy = canvas.y + canvas.height / 2;
+
+// 1. 노드 찾아서 클릭
+let nodeX = 0, nodeY = 0;
+for (let dx = -250; dx <= 250; dx += 15) {
+  for (let dy = -200; dy <= 200; dy += 15) {
+    await page.mouse.move(cx + dx, cy + dy);
+    await page.waitForTimeout(20);
+    if (await page.evaluate(() => document.body.style.cursor) === 'pointer') {
+      nodeX = cx + dx; nodeY = cy + dy;
+      break;
+    }
+  }
+  if (nodeX) break;
+}
+console.log('Node at', nodeX - cx, nodeY - cy);
+
+// 클릭 → 패널 열기
+await page.mouse.move(nodeX, nodeY);
+await page.waitForTimeout(200);
+await page.mouse.down(); await page.waitForTimeout(50); await page.mouse.up();
+await page.waitForTimeout(1500);
+
+const panelOpen = await page.evaluate(() => document.body.innerText.includes('Explore connections'));
+console.log('Panel open:', panelOpen);
+
+if (panelOpen) {
+  // 2. Explore 클릭
+  console.log('Clicking Explore...');
+  const btn = page.locator('button', { hasText: 'Explore connections' });
+  await btn.click();
+
+  // 3. 3초 동안 상태 모니터링
+  for (let i = 0; i < 15; i++) {
+    await page.waitForTimeout(200);
+    const state = await page.evaluate(() => {
+      const cv = document.querySelector('canvas');
+      return {
+        canvasVisible: cv ? cv.offsetWidth > 0 : false,
+        bodyText: document.body.innerText.slice(0, 100),
+      };
+    });
+    if (i % 3 === 0) console.log(`  tick ${i}: canvas=${state.canvasVisible}`);
+  }
+
+  // 4. 다른 노드 클릭 시도
+  console.log('Trying to click another node...');
+  let found2 = false;
+  for (let dx = -200; dx <= 200; dx += 20) {
+    for (let dy = -150; dy <= 150; dy += 20) {
+      await page.mouse.move(cx + dx, cy + dy);
+      await page.waitForTimeout(20);
+      if (await page.evaluate(() => document.body.style.cursor) === 'pointer') {
+        console.log('Found second node at', dx, dy);
+        await page.mouse.down(); await page.waitForTimeout(50); await page.mouse.up();
+        await page.waitForTimeout(1000);
+
+        const afterSecond = await page.evaluate(() => {
+          const cv = document.querySelector('canvas');
+          return {
+            canvasVisible: cv ? cv.offsetWidth > 0 : false,
+            canvasW: cv?.offsetWidth ?? 0,
+            bodyText: document.body.innerText.slice(0, 150),
+          };
+        });
+        console.log('After second click:', JSON.stringify(afterSecond));
+        found2 = true;
+        break;
+      }
+    }
+    if (found2) break;
+  }
+
+  // 5. 빈 곳 클릭
+  console.log('Clicking empty space...');
+  await page.mouse.move(cx + 300, cy + 250);
+  await page.waitForTimeout(200);
+  await page.mouse.down(); await page.waitForTimeout(50); await page.mouse.up();
+  await page.waitForTimeout(1000);
+
+  const afterEmpty = await page.evaluate(() => {
+    const cv = document.querySelector('canvas');
+    return {
+      canvasVisible: cv ? cv.offsetWidth > 0 : false,
+      canvasW: cv?.offsetWidth ?? 0,
+    };
+  });
+  console.log('After empty click:', JSON.stringify(afterEmpty));
+}
+
+await page.waitForTimeout(2000);
+await browser.close();