stellavault 0.1.0

package/packages/graph/test-final.mjs

@@ -0,0 +1,61 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage({ viewport: { width: 1400, height: 800 } });
+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;
+
+for (let dx = -250; dx <= 250; dx += 20) {
+  for (let dy = -200; dy <= 200; dy += 20) {
+    await page.mouse.move(cx + dx, cy + dy);
+    await page.waitForTimeout(30);
+    const cursor = await page.evaluate(() => document.body.style.cursor);
+    if (cursor === 'pointer') {
+      console.log(`Node at [${dx}, ${dy}]`);
+
+      // 클릭
+      await page.mouse.click(cx + dx, cy + dy);
+      await page.waitForTimeout(1500);
+
+      // 확인
+      const result = await page.evaluate(() => {
+        const text = document.body.innerText;
+        const has380 = !!Array.from(document.querySelectorAll('div')).find(d => d.style.width === '380px');
+        return {
+          hasPanel: has380,
+          hasPreview: text.includes('DOCUMENT PREVIEW') || text.includes('Document Preview'),
+          hasExplore: text.includes('Explore connections'),
+        };
+      });
+      console.log('Result:', JSON.stringify(result));
+
+      if (result.hasPanel) {
+        console.log('SUCCESS - Panel is visible!');
+        await page.screenshot({ path: 'success.png', fullPage: true });
+      } else {
+        console.log('FAIL - Panel not found');
+
+        // 디버그: selectedNodeId 확인
+        const debug = await page.evaluate(() => {
+          // zustand 내부 상태에 접근할 수 없으므로 DOM 기반으로 확인
+          return {
+            allText: document.body.innerText.slice(0, 300),
+            divCount: document.querySelectorAll('div').length,
+          };
+        });
+        console.log('Debug:', JSON.stringify(debug, null, 2));
+      }
+
+      await page.waitForTimeout(2000);
+      await browser.close();
+      process.exit(0);
+    }
+  }
+}
+
+console.log('No node found');
+await browser.close();

package/packages/graph/test-graph.mjs

@@ -0,0 +1,139 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage();
+
+console.log('1. Opening graph...');
+await page.goto('http://localhost:5173');
+await page.waitForTimeout(3000);
+
+// 페이지 상태 확인
+const statusText = await page.locator('body').innerText();
+console.log('2. Page text:', statusText.slice(0, 200));
+
+// 콘솔 로그 캡처
+page.on('console', msg => {
+  if (msg.type() === 'error') console.log('  [CONSOLE ERROR]', msg.text());
+});
+
+// zustand store 상태 확인
+const storeState = await page.evaluate(() => {
+  // zustand store 직접 접근 시도
+  const root = document.getElementById('root');
+  return {
+    rootExists: !!root,
+    rootChildren: root?.children?.length ?? 0,
+    rootHTML: root?.innerHTML?.slice(0, 500) ?? 'empty',
+  };
+});
+console.log('3. Root state:', JSON.stringify(storeState, null, 2));
+
+// selectedNodeId 상태 확인
+const graphState = await page.evaluate(() => {
+  try {
+    // window에 노출된 함수로 상태 확인
+    return {
+      hasPulse: typeof window.__sv_pulse === 'function',
+      hasStopPulse: typeof window.__sv_stopPulse === 'function',
+    };
+  } catch (e) {
+    return { error: String(e) };
+  }
+});
+console.log('4. Graph functions:', JSON.stringify(graphState));
+
+// Canvas 요소 확인
+const canvasInfo = await page.evaluate(() => {
+  const canvas = document.querySelector('canvas');
+  return {
+    canvasExists: !!canvas,
+    canvasSize: canvas ? `${canvas.width}x${canvas.height}` : 'none',
+  };
+});
+console.log('5. Canvas:', JSON.stringify(canvasInfo));
+
+// 노드 호버 시뮬레이션: 캔버스 중앙 근처로 마우스 이동
+const canvasBounds = await page.locator('canvas').boundingBox();
+if (canvasBounds) {
+  const cx = canvasBounds.x + canvasBounds.width / 2;
+  const cy = canvasBounds.y + canvasBounds.height / 2;
+
+  console.log('6. Moving mouse to canvas center:', cx, cy);
+  await page.mouse.move(cx, cy);
+  await page.waitForTimeout(500);
+
+  // 호버 후 상태
+  const afterHover = await page.evaluate(() => {
+    // DOM에서 사이드패널 찾기
+    const panels = document.querySelectorAll('div');
+    let sidePanel = null;
+    panels.forEach(p => {
+      if (p.style.width === '380px') sidePanel = p;
+    });
+    return {
+      panelFound: !!sidePanel,
+      totalDivs: panels.length,
+    };
+  });
+  console.log('7. After hover:', JSON.stringify(afterHover));
+
+  // 클릭
+  console.log('8. Clicking...');
+  await page.mouse.click(cx, cy);
+  await page.waitForTimeout(1000);
+
+  // 클릭 후 상태
+  const afterClick = await page.evaluate(() => {
+    const panels = document.querySelectorAll('div');
+    let sidePanel = null;
+    let sidePanelText = '';
+    panels.forEach(p => {
+      if (p.style.width === '380px') {
+        sidePanel = p;
+        sidePanelText = p.innerText?.slice(0, 100) ?? '';
+      }
+    });
+
+    // zustand 상태 직접 확인 — React 내부 접근
+    const allText = document.body.innerText;
+    const hasDocPreview = allText.includes('Document Preview');
+    const hasExplore = allText.includes('Explore connections');
+
+    return {
+      panelFound: !!sidePanel,
+      sidePanelText,
+      hasDocPreview,
+      hasExplore,
+      bodyTextSnippet: allText.slice(0, 300),
+    };
+  });
+  console.log('9. After click:', JSON.stringify(afterClick, null, 2));
+
+  // 여러 위치에서 클릭 시도 (노드가 있을만한 곳)
+  for (const offset of [[0, 0], [-100, -50], [100, 50], [-50, 80], [80, -60]]) {
+    const x = cx + offset[0];
+    const y = cy + offset[1];
+    await page.mouse.move(x, y);
+    await page.waitForTimeout(300);
+
+    const cursorStyle = await page.evaluate(() => document.body.style.cursor);
+    if (cursorStyle === 'pointer') {
+      console.log(`10. Found node at offset [${offset}]! Clicking...`);
+      await page.mouse.click(x, y);
+      await page.waitForTimeout(1000);
+
+      const result = await page.evaluate(() => {
+        return {
+          bodyText: document.body.innerText.slice(0, 500),
+          has380Panel: !!Array.from(document.querySelectorAll('div')).find(d => d.style.width === '380px'),
+        };
+      });
+      console.log('11. After node click:', JSON.stringify(result, null, 2));
+      break;
+    }
+  }
+}
+
+await page.waitForTimeout(3000);
+await browser.close();
+console.log('Done.');

package/packages/graph/test-hover.mjs

@@ -0,0 +1,48 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage({ viewport: { width: 1400, height: 800 } });
+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. 노드 찾아서 호버만 (클릭 없이)
+for (let dx = -250; dx <= 250; dx += 20) {
+  for (let dy = -200; dy <= 200; dy += 20) {
+    await page.mouse.move(cx + dx, cy + dy);
+    await page.waitForTimeout(30);
+    const cursor = await page.evaluate(() => document.body.style.cursor);
+    if (cursor === 'pointer') {
+      console.log(`Node at [${dx}, ${dy}] — hovering (no click)`);
+      await page.waitForTimeout(1500);
+
+      const result = await page.evaluate(() => {
+        const text = document.body.innerText;
+        return {
+          hasPreview: text.includes('Document Preview') || text.includes('DOCUMENT PREVIEW'),
+          hasExplore: text.includes('Explore connections'),
+          snippet: text.slice(0, 300),
+        };
+      });
+      console.log('Hover result:', JSON.stringify(result, null, 2));
+
+      // 2. 마우스를 빈 곳으로 이동 → 패널 사라지는지
+      await page.mouse.move(cx + 250, cy + 200);
+      await page.waitForTimeout(800);
+      const afterLeave = await page.evaluate(() => {
+        return document.body.innerText.includes('Document Preview');
+      });
+      console.log('After leave:', afterLeave ? 'Panel still visible' : 'Panel hidden');
+
+      await page.waitForTimeout(2000);
+      await browser.close();
+      process.exit(0);
+    }
+  }
+}
+
+console.log('No node found');
+await browser.close();

package/packages/graph/test-pulse.mjs

@@ -0,0 +1,68 @@
+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 => { if (m.type() === 'error') console.log('ERR:', 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;
+
+// 노드 찾아서 클릭
+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') {
+      await page.waitForTimeout(200);
+      await page.mouse.down(); await page.waitForTimeout(50); await page.mouse.up();
+      await page.waitForTimeout(1500);
+
+      // Explore 클릭
+      const btn = page.locator('button', { hasText: 'Explore connections' });
+      if (await btn.isVisible()) {
+        console.log('Clicking Explore...');
+        await btn.click();
+
+        // 2초 동안 모니터링
+        for (let i = 0; i < 20; i++) {
+          await page.waitForTimeout(200);
+          const state = await page.evaluate(() => {
+            const cv = document.querySelector('canvas');
+            // 빛 입자가 있는지 확인 (mesh 개수 변화)
+            return {
+              canvasOK: cv ? cv.offsetWidth > 0 : false,
+            };
+          });
+          if (i % 5 === 0) console.log(`  ${i * 200}ms: canvas=${state.canvasOK}`);
+        }
+
+        // 완료 후 다른 노드 클릭
+        console.log('Clicking another node...');
+        for (let dx2 = -100; dx2 <= 100; dx2 += 15) {
+          for (let dy2 = -100; dy2 <= 100; dy2 += 15) {
+            await page.mouse.move(cx + dx2, cy + dy2);
+            await page.waitForTimeout(20);
+            if (await page.evaluate(() => document.body.style.cursor) === 'pointer') {
+              await page.mouse.down(); await page.waitForTimeout(50); await page.mouse.up();
+              await page.waitForTimeout(1000);
+              const ok = await page.evaluate(() => {
+                const cv = document.querySelector('canvas');
+                return { canvasW: cv?.offsetWidth ?? 0, hasPanel: document.body.innerText.includes('DOCUMENT PREVIEW') };
+              });
+              console.log('After 2nd click:', JSON.stringify(ok));
+              break;
+            }
+          }
+          break;
+        }
+      }
+      await page.waitForTimeout(2000);
+      await browser.close();
+      process.exit(0);
+    }
+  }
+}
+await browser.close();

package/packages/graph/test-screenshot.mjs

@@ -0,0 +1,56 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage({ viewport: { width: 1400, height: 800 } });
+await page.goto('http://localhost:5173');
+await page.waitForTimeout(5000);
+
+await page.screenshot({ path: '../../../images/before-click.png' });
+console.log('1. Before click screenshot saved');
+
+const canvas = await page.locator('canvas').boundingBox();
+const cx = canvas.x + canvas.width / 2;
+const cy = canvas.y + canvas.height / 2;
+
+// 노드 찾기
+for (let dx = -250; dx <= 250; dx += 20) {
+  for (let dy = -200; dy <= 200; dy += 20) {
+    await page.mouse.move(cx + dx, cy + dy);
+    await page.waitForTimeout(30);
+    const cursor = await page.evaluate(() => document.body.style.cursor);
+    if (cursor === 'pointer') {
+      console.log(`2. Node found at [${dx}, ${dy}], clicking...`);
+      await page.mouse.click(cx + dx, cy + dy);
+      await page.waitForTimeout(2000);
+      await page.screenshot({ path: '../../../images/after-click.png' });
+      console.log('3. After click screenshot saved');
+
+      // DOM 디버그
+      const debug = await page.evaluate(() => {
+        const all = document.querySelectorAll('*');
+        let panel = null;
+        all.forEach(el => {
+          if (el.textContent?.includes('DOCUMENT PREVIEW') && el.tagName === 'DIV') {
+            const rect = el.getBoundingClientRect();
+            panel = {
+              tag: el.tagName,
+              rect: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
+              visible: rect.width > 0 && rect.height > 0,
+              display: getComputedStyle(el).display,
+              overflow: getComputedStyle(el).overflow,
+              zIndex: getComputedStyle(el).zIndex,
+            };
+          }
+        });
+        return { panel, windowSize: { w: window.innerWidth, h: window.innerHeight } };
+      });
+      console.log('4. Panel debug:', JSON.stringify(debug, null, 2));
+
+      await browser.close();
+      process.exit(0);
+    }
+  }
+}
+
+console.log('No node found');
+await browser.close();

package/packages/graph/test-v2.mjs

@@ -0,0 +1,97 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: false });
+const page = await browser.newPage({ viewport: { width: 1400, height: 800 } });
+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);
+    const cursor = await page.evaluate(() => document.body.style.cursor);
+    if (cursor === 'pointer') {
+      nodeX = cx + dx;
+      nodeY = cy + dy;
+      console.log(`1. Node found at [${dx}, ${dy}]`);
+      break;
+    }
+  }
+  if (nodeX) break;
+}
+
+if (!nodeX) { console.log('No node found'); await browser.close(); process.exit(1); }
+
+// 2. 호버 상태 확인 (툴팁만, 사이드패널 없음)
+await page.mouse.move(nodeX, nodeY);
+await page.waitForTimeout(500);
+let result = await page.evaluate(() => ({
+  hasPanel: document.body.innerText.includes('Document Preview'),
+  bodySnippet: document.body.innerText.slice(0, 200),
+}));
+console.log(`2. Hover only — panel: ${result.hasPanel}`);
+
+// 3. 클릭 (mousedown + mouseup at same position)
+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);
+
+result = await page.evaluate(() => ({
+  hasPanel: document.body.innerText.includes('Document Preview'),
+  hasExplore: document.body.innerText.includes('Explore connections'),
+  snippet: document.body.innerText.slice(0, 400),
+}));
+console.log(`3. After click — panel: ${result.hasPanel}, explore: ${result.hasExplore}`);
+if (result.hasPanel) console.log('   Content:', result.snippet.slice(200, 400));
+
+// 4. 빈 곳 클릭 → 해제
+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(800);
+
+result = await page.evaluate(() => ({
+  hasPanel: document.body.innerText.includes('Document Preview'),
+}));
+console.log(`4. After empty click — panel: ${result.hasPanel}`);
+
+// 5. 같은 노드 다시 클릭 → 열기
+await page.mouse.move(nodeX, nodeY);
+await page.waitForTimeout(300);
+await page.mouse.down();
+await page.waitForTimeout(50);
+await page.mouse.up();
+await page.waitForTimeout(1500);
+
+result = await page.evaluate(() => ({
+  hasPanel: document.body.innerText.includes('Document Preview'),
+}));
+console.log(`5. Re-click node — panel: ${result.hasPanel}`);
+
+// 6. 같은 노드 또 클릭 → 토글 닫기
+await page.mouse.move(nodeX, nodeY);
+await page.waitForTimeout(300);
+await page.mouse.down();
+await page.waitForTimeout(50);
+await page.mouse.up();
+await page.waitForTimeout(800);
+
+result = await page.evaluate(() => ({
+  hasPanel: document.body.innerText.includes('Document Preview'),
+}));
+console.log(`6. Toggle off — panel: ${result.hasPanel}`);
+
+console.log('\nDone!');
+await page.waitForTimeout(2000);
+await browser.close();

package/packages/graph/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3333',
+        changeOrigin: true,
+      },
+    },
+  },
+});

package/packages/sync/.env.example

@@ -0,0 +1,11 @@
+# Notion API 키 (https://www.notion.so/my-integrations 에서 생성)
+NOTION_API_KEY=ntn_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# 프로젝트 상위 페이지 ID (노션 URL의 마지막 32자리)
+NOTION_ROOT_PAGE_ID=330dcee017df808d92d4d9ff46fa7697
+
+# 옵시디언 저장 경로
+OBSIDIAN_PATH=F:/obsidian/Evan/04_Projects
+
+# 로컬 프로젝트 경로들 (쉼표 구분)
+PROJECT_PATHS=E:/AI코딩프로젝트/클로드코드/ai_destiny,E:/AI코딩프로젝트/클로드코드/project-manager,E:/AI코딩프로젝트/클로드코드/stock_analist_beta,E:/AI코딩프로젝트/클로드코드/stock-autotrade,E:/AI코딩프로젝트/클로드코드/vibevonweb,E:/AI코딩프로젝트/클로드코드/TEST