stellavault 0.2.0 → 0.2.1

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

@@ -1,153 +0,0 @@
-// 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

@@ -1,83 +0,0 @@
-// 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

@@ -1,122 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-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

@@ -1,155 +0,0 @@
-// 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

@@ -1,49 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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();