stellavault 0.1.0

package/packages/graph/src/components/NodeDetail.tsx

@@ -0,0 +1,232 @@
+// 사이드패널: 클릭된 노드의 문서 미리보기
+
+import { useEffect, useState, useRef, useMemo } from 'react';
+import Markdown from 'react-markdown';
+import { fetchDocument } from '../api/client.js';
+import { useGraphStore } from '../stores/graph-store.js';
+
+interface DocData {
+  id: string;
+  title: string;
+  filePath: string;
+  content: string;
+  tags: string[];
+  lastModified: string;
+  related: Array<{ id: string; title: string; score: number }>;
+}
+
+export function NodeDetail() {
+  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
+  const selectNode = useGraphStore((s) => s.selectNode);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+  const [doc, setDoc] = useState<DocData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const cacheRef = useRef<Map<string, DocData>>(new Map());
+
+  useEffect(() => {
+    if (!selectedNodeId) { setDoc(null); return; }
+
+    const cached = cacheRef.current.get(selectedNodeId);
+    if (cached) { setDoc(cached); return; }
+
+    let cancelled = false;
+    setLoading(true);
+    fetchDocument(selectedNodeId)
+      .then((data: any) => {
+        if (!cancelled) { setDoc(data); cacheRef.current.set(selectedNodeId, data); }
+      })
+      .catch(() => { if (!cancelled) setDoc(null); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [selectedNodeId]);
+
+  if (!selectedNodeId) return null;
+
+  // Theme colors
+  const bg = isDark ? '#0d0d18' : '#fafafa';
+  const border = isDark ? 'rgba(100, 120, 255, 0.15)' : 'rgba(0, 0, 0, 0.08)';
+  const textPrimary = isDark ? '#e0e0f0' : '#1a1a2e';
+  const textSecondary = isDark ? '#556' : '#888';
+  const textBody = isDark ? '#b0b0c0' : '#444';
+  const tagBg = isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(80, 100, 200, 0.08)';
+  const tagColor = isDark ? '#88aaff' : '#4466aa';
+  const btnBg = isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(80, 100, 200, 0.06)';
+  const btnBorder = isDark ? 'rgba(100, 120, 255, 0.2)' : 'rgba(80, 100, 200, 0.15)';
+  const btnColor = isDark ? '#88aaff' : '#4466aa';
+
+  return (
+    <div style={{
+      width: '380px', background: bg,
+      borderLeft: `1px solid ${border}`,
+      display: 'flex', flexDirection: 'column', overflow: 'hidden',
+    }}>
+      <div style={{
+        padding: '10px 16px',
+        borderBottom: `1px solid ${border}`,
+        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+      }}>
+        <span style={{ fontSize: '11px', color: textSecondary, textTransform: 'uppercase', letterSpacing: '1px' }}>
+          Document Preview
+        </span>
+        <button
+          onClick={() => selectNode(null)}
+          style={{ background: 'none', border: 'none', color: textSecondary, cursor: 'pointer', fontSize: '14px', padding: '2px 6px' }}
+        >
+          x
+        </button>
+      </div>
+
+      {loading ? (
+        <div style={{ padding: '24px 16px', color: textSecondary }}>Loading...</div>
+      ) : doc ? (
+        <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
+          <h2 style={{ fontSize: '16px', fontWeight: 600, color: textPrimary, marginBottom: '6px', lineHeight: 1.3 }}>
+            {doc.title}
+          </h2>
+          {doc.tags.length > 0 && (
+            <div style={{ display: 'flex', gap: '5px', flexWrap: 'wrap', marginBottom: '10px' }}>
+              {doc.tags.map((tag) => (
+                <span key={tag} style={{ fontSize: '10px', color: tagColor, background: tagBg, padding: '1px 7px', borderRadius: '4px' }}>
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+          <div style={{ fontSize: '10px', color: textSecondary, marginBottom: '12px' }}>
+            {new Date(doc.lastModified).toLocaleDateString('ko-KR')}
+          </div>
+          <button
+            onClick={() => {
+              setTimeout(() => (window as any).__sv_pulse?.(doc.id), 100);
+            }}
+            style={{
+              width: '100%', padding: '7px', marginBottom: '8px',
+              background: btnBg, border: `1px solid ${btnBorder}`,
+              borderRadius: '5px', color: btnColor, fontSize: '11px', cursor: 'pointer',
+            }}
+          >
+            Explore connections
+          </button>
+          <button
+            onClick={async () => {
+              const relFile = (doc.filePath ?? doc.title).replace(/\\/g, '/').replace(/\.md$/, '');
+              let vault = 'Evan';
+              try {
+                const res = await fetch('http://127.0.0.1:3333/api/stats');
+                const stats = await res.json();
+                if (stats.vaultName) vault = stats.vaultName;
+              } catch { /* fallback */ }
+              const uri = `obsidian://open?vault=${encodeURIComponent(vault)}&file=${encodeURIComponent(relFile)}`;
+              window.location.href = uri;
+            }}
+            style={{
+              width: '100%', padding: '7px', marginBottom: '14px',
+              background: isDark ? 'rgba(140, 100, 255, 0.08)' : 'rgba(120, 80, 200, 0.05)',
+              border: `1px solid ${isDark ? 'rgba(140, 100, 255, 0.15)' : 'rgba(120, 80, 200, 0.12)'}`,
+              borderRadius: '5px', color: isDark ? '#a088ff' : '#6644aa', fontSize: '11px', cursor: 'pointer',
+            }}
+          >
+            Open in Obsidian
+          </button>
+          <ContentAccordion content={doc.content} isDark={isDark} />
+          {doc.related.length > 0 && (
+            <div style={{ marginTop: '20px', paddingTop: '12px', borderTop: `1px solid ${border}` }}>
+              <div style={{ fontSize: '10px', color: textSecondary, textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '6px' }}>
+                Related
+              </div>
+              {doc.related.map((r) => (
+                <div
+                  key={r.id}
+                  onClick={() => selectNode(r.id)}
+                  style={{ padding: '4px 0', fontSize: '11px', color: isDark ? '#778' : '#555', cursor: 'pointer' }}
+                >
+                  {r.title}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ContentAccordion({ content, isDark }: { content: string; isDark: boolean }) {
+  const sections = useMemo(() => {
+    const parts: Array<{ heading: string; body: string }> = [];
+    const lines = content.split('\n');
+    let currentHeading = 'Overview';
+    let currentBody: string[] = [];
+
+    for (const line of lines) {
+      const match = line.match(/^#{1,3}\s+(.+)$/);
+      if (match) {
+        if (currentBody.length > 0) {
+          parts.push({ heading: currentHeading, body: currentBody.join('\n') });
+        }
+        currentHeading = match[1];
+        currentBody = [];
+      } else {
+        currentBody.push(line);
+      }
+    }
+    if (currentBody.length > 0) {
+      parts.push({ heading: currentHeading, body: currentBody.join('\n') });
+    }
+
+    return parts;
+  }, [content]);
+
+  const bodyColor = isDark ? '#b0b0c0' : '#444';
+
+  if (content.length < 500 || sections.length <= 1) {
+    return (
+      <div style={{ fontSize: '13px', lineHeight: 1.7, color: bodyColor }}>
+        <Markdown>{content}</Markdown>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {sections.map((sec, i) => (
+        <AccordionSection key={i} heading={sec.heading} body={sec.body} defaultOpen={i === 0} isDark={isDark} />
+      ))}
+    </div>
+  );
+}
+
+function AccordionSection({ heading, body, defaultOpen, isDark }: { heading: string; body: string; defaultOpen: boolean; isDark: boolean }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const trimmed = body.trim();
+  if (!trimmed) return null;
+
+  return (
+    <div style={{ borderBottom: `1px solid ${isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.05)'}`, marginBottom: '4px' }}>
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          width: '100%', textAlign: 'left', background: 'none', border: 'none',
+          padding: '8px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
+        }}
+      >
+        <span style={{
+          fontSize: '10px', color: isDark ? '#556' : '#999', transition: 'transform 0.2s',
+          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+          display: 'inline-block',
+        }}>
+          ▶
+        </span>
+        <span style={{ fontSize: '12px', fontWeight: 600, color: isDark ? '#99a' : '#555' }}>
+          {heading}
+        </span>
+      </button>
+      {open && (
+        <div style={{ fontSize: '13px', lineHeight: 1.7, color: isDark ? '#b0b0c0' : '#444', paddingBottom: '8px' }}>
+          <Markdown>{trimmed}</Markdown>
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/graph/src/components/PulseParticle.tsx

@@ -0,0 +1,232 @@
+// 빛 입자 + 궤적 — 작고 화려한 입자가 부드럽게 이동, 지나간 경로 표시
+
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { useGraphStore } from '../stores/graph-store.js';
+import { pulseData } from '../hooks/usePulse.js';
+
+const TRAIL_LENGTH = 60; // 궤적 점 개수
+
+export function PulseAnimator() {
+  const coreRef = useRef<THREE.Points>(null);
+  const glowRef = useRef<THREE.Points>(null);
+  const trailRef = useRef<THREE.Line>(null);
+  const theme = useGraphStore((s) => s.theme);
+  const isLight = theme === 'light';
+
+  const stepRef = useRef(0);
+  const tRef = useRef(0);
+  const litRef = useRef<string[]>([]);
+  const flashRef = useRef(0);
+
+  // 궤적 위치 버퍼 (ring buffer)
+  const trailBuf = useRef(new Float32Array(TRAIL_LENGTH * 3));
+  const trailHead = useRef(0);
+  const trailCount = useRef(0);
+
+  // 원형 텍스처 (노드와 동일 스타일)
+  const texture = useRef<THREE.Texture | null>(null);
+  if (!texture.current) {
+    const sz = 64;
+    const cv = document.createElement('canvas');
+    cv.width = sz; cv.height = sz;
+    const ctx = cv.getContext('2d')!;
+    const g = ctx.createRadialGradient(sz/2, sz/2, 0, sz/2, sz/2, sz/2);
+    g.addColorStop(0, 'rgba(255,255,255,1)');
+    g.addColorStop(0.2, 'rgba(180,220,255,0.9)');
+    g.addColorStop(0.5, 'rgba(100,180,255,0.3)');
+    g.addColorStop(1, 'rgba(60,120,255,0)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, sz, sz);
+    texture.current = new THREE.CanvasTexture(cv);
+  }
+
+  useFrame(() => {
+    const core = coreRef.current;
+    const glow = glowRef.current;
+    const trail = trailRef.current;
+    if (!core || !glow || !trail) return;
+
+    if (!pulseData.running || pulseData.visitOrder.length === 0) {
+      core.visible = false;
+      glow.visible = false;
+      trail.visible = false;
+      return;
+    }
+
+    core.visible = true;
+    glow.visible = true;
+    trail.visible = true;
+
+    const { visitOrder, positions } = pulseData;
+    const step = stepRef.current;
+
+    if (step >= visitOrder.length - 1) {
+      pulseData.running = false;
+      core.visible = false;
+      glow.visible = false;
+      // 탐색 완료 — 하이라이트 3초간 유지 후 해제
+      const finalLit = [...litRef.current];
+      setTimeout(() => {
+        // 아직 같은 하이라이트 상태이면 해제
+        const current = useGraphStore.getState().highlightedNodeIds;
+        if (finalLit.length > 0 && finalLit.every(id => current.has(id))) {
+          useGraphStore.getState().setHighlightedNodes([]);
+        }
+        useGraphStore.getState().setPulseParticlePos(null);
+        stepRef.current = 0;
+        tRef.current = 0;
+        litRef.current = [];
+        trailCount.current = 0;
+        if (trail) trail.visible = false;
+      }, 3000);
+      return;
+    }
+
+    const from = positions.get(visitOrder[step]) ?? [0, 0, 0];
+    const to = positions.get(visitOrder[step + 1]) ?? [0, 0, 0];
+
+    // 부드러운 이동
+    tRef.current += 0.03;
+    const t = tRef.current;
+    const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+
+    const x = from[0] + (to[0] - from[0]) * ease;
+    const y = from[1] + (to[1] - from[1]) * ease;
+    const z = from[2] + (to[2] - from[2]) * ease;
+
+    // 코어 입자 위치
+    const corePos = core.geometry.getAttribute('position') as THREE.BufferAttribute;
+    corePos.setXYZ(0, x, y, z);
+    corePos.needsUpdate = true;
+
+    const glowPos = glow.geometry.getAttribute('position') as THREE.BufferAttribute;
+    glowPos.setXYZ(0, x, y, z);
+    glowPos.needsUpdate = true;
+
+    // 궤적 기록
+    const tb = trailBuf.current;
+    const hi = trailHead.current % TRAIL_LENGTH;
+    tb[hi * 3] = x;
+    tb[hi * 3 + 1] = y;
+    tb[hi * 3 + 2] = z;
+    trailHead.current++;
+    trailCount.current = Math.min(trailCount.current + 1, TRAIL_LENGTH);
+
+    // 궤적 라인 업데이트
+    const trailPos = trail.geometry.getAttribute('position') as THREE.BufferAttribute;
+    const count = trailCount.current;
+    for (let i = 0; i < TRAIL_LENGTH; i++) {
+      if (i < count) {
+        const idx = ((trailHead.current - count + i) % TRAIL_LENGTH + TRAIL_LENGTH) % TRAIL_LENGTH;
+        trailPos.setXYZ(i, tb[idx * 3], tb[idx * 3 + 1], tb[idx * 3 + 2]);
+      } else {
+        trailPos.setXYZ(i, x, y, z); // 아직 안 채워진 부분은 현재 위치
+      }
+    }
+    trailPos.needsUpdate = true;
+    trail.geometry.setDrawRange(0, count);
+
+    // 플래시 감쇠
+    flashRef.current *= 0.88;
+
+    // Light mode: 진한 색 + NormalBlending / Dark mode: 밝은 색 + AdditiveBlending
+    const currentIsLight = useGraphStore.getState().theme === 'light';
+
+    // 코어
+    const coreMat = core.material as THREE.PointsMaterial;
+    coreMat.size = (currentIsLight ? 12 : 8) + flashRef.current * 6;
+    coreMat.color.set(currentIsLight ? '#1144cc' : '#ffffff');
+    coreMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
+    coreMat.opacity = currentIsLight ? 1.0 : 0.95;
+
+    // 글로우
+    const glowMat = glow.material as THREE.PointsMaterial;
+    glowMat.size = (currentIsLight ? 28 : 20) + flashRef.current * 15;
+    glowMat.opacity = currentIsLight ? (0.3 + flashRef.current * 0.3) : (0.25 + flashRef.current * 0.2);
+    glowMat.color.set(currentIsLight ? '#2266dd' : '#66ddff');
+    glowMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
+
+    // 궤적
+    const trailMat = trail.material as THREE.LineBasicMaterial;
+    trailMat.color.set(currentIsLight ? '#2255bb' : '#44bbff');
+    trailMat.opacity = currentIsLight ? 0.5 : 0.25;
+    trailMat.blending = currentIsLight ? THREE.NormalBlending : THREE.AdditiveBlending;
+
+    // 노드 도착
+    if (t >= 1) {
+      tRef.current = 0;
+      stepRef.current++;
+
+      const arrivedId = visitOrder[Math.min(step + 1, visitOrder.length - 1)];
+      if (!litRef.current.includes(arrivedId)) {
+        litRef.current.push(arrivedId);
+        useGraphStore.getState().setHighlightedNodes([...litRef.current]);
+      }
+      flashRef.current = 1;
+
+      // 도착 노드 툴팁 표시 (0.8초 후 자동 해제)
+      useGraphStore.getState().hoverNode(arrivedId);
+      setTimeout(() => {
+        // 아직 같은 노드를 표시 중이면 해제
+        if (useGraphStore.getState().hoveredNodeId === arrivedId) {
+          useGraphStore.getState().hoverNode(null);
+        }
+      }, 800);
+    }
+  });
+
+  return (
+    <group>
+      {/* 궤적 라인 — 시안 글로우 */}
+      <primitive
+        ref={trailRef}
+        object={(() => {
+          const geo = new THREE.BufferGeometry();
+          geo.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(TRAIL_LENGTH * 3), 3));
+          const mat = new THREE.LineBasicMaterial({
+            color: '#44bbff', transparent: true, opacity: 0.25,
+            depthWrite: false, blending: THREE.AdditiveBlending,
+          });
+          return new THREE.Line(geo, mat);
+        })()}
+        visible={false}
+      />
+
+      {/* 글로우 (부드러운 빛 번짐) */}
+      <points ref={glowRef} visible={false}>
+        <bufferGeometry>
+          <bufferAttribute attach="attributes-position" args={[new Float32Array(3), 3]} />
+        </bufferGeometry>
+        <pointsMaterial
+          color="#66ddff"
+          size={20}
+          transparent
+          opacity={0.25}
+          depthWrite={false}
+          blending={THREE.AdditiveBlending}
+          sizeAttenuation
+          map={texture.current}
+        />
+      </points>
+
+      {/* 코어 (밝은 화이트 점) */}
+      <points ref={coreRef} visible={false}>
+        <bufferGeometry>
+          <bufferAttribute attach="attributes-position" args={[new Float32Array(3), 3]} />
+        </bufferGeometry>
+        <pointsMaterial
+          color="#ffffff"
+          size={8}
+          transparent
+          opacity={0.95}
+          depthWrite={false}
+          blending={THREE.AdditiveBlending}
+          sizeAttenuation
+          map={texture.current}
+        />
+      </points>
+    </group>
+  );
+}

package/packages/graph/src/components/SearchBar.tsx

@@ -0,0 +1,107 @@
+// 검색바 — 상단 헤더에 통합, 결과 수 표시, 검색 히스토리
+
+import { useRef, useState } from 'react';
+import { useSearch } from '../hooks/useSearch.js';
+import { useGraphStore } from '../stores/graph-store.js';
+
+export function SearchBar() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { search, clearSearch } = useSearch();
+  const query = useGraphStore((s) => s.searchQuery);
+  const highlightedCount = useGraphStore((s) => s.highlightedNodeIds.size);
+  const searchHistory = useGraphStore((s) => s.searchHistory);
+  const clearSearchHistory = useGraphStore((s) => s.clearSearchHistory);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+  const [showHistory, setShowHistory] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <div style={{
+        position: 'relative',
+        display: 'flex', alignItems: 'center',
+        background: isDark ? 'rgba(100, 120, 255, 0.06)' : 'rgba(0, 0, 0, 0.03)',
+        border: `1px solid ${isDark ? 'rgba(100, 120, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'}`,
+        borderRadius: '6px', padding: '0 10px',
+      }}>
+        <span style={{ fontSize: '12px', color: isDark ? '#556' : '#999', marginRight: '6px' }}>
+          {'\u{1F50D}'}
+        </span>
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder="Search knowledge..."
+          value={query}
+          onChange={(e) => search(e.target.value)}
+          onFocus={() => setShowHistory(true)}
+          onBlur={() => setTimeout(() => setShowHistory(false), 200)}
+          onKeyDown={(e) => { if (e.key === 'Escape') { clearSearch(); setShowHistory(false); inputRef.current?.blur(); } }}
+          style={{
+            background: 'transparent', border: 'none', outline: 'none',
+            color: isDark ? '#c0c0f0' : '#2a2a4a',
+            fontSize: '12px', padding: '5px 0',
+            width: '160px',
+          }}
+        />
+        {query && (
+          <button
+            onClick={clearSearch}
+            style={{
+              background: 'none', border: 'none',
+              color: isDark ? '#556' : '#999',
+              cursor: 'pointer', fontSize: '12px', padding: '0 2px',
+            }}
+          >
+            x
+          </button>
+        )}
+
+        {/* 검색 히스토리 드롭다운 */}
+        {showHistory && !query && searchHistory.length > 0 && (
+          <div style={{
+            position: 'absolute', top: '100%', left: 0, marginTop: '4px',
+            background: isDark ? 'rgba(10,10,20,0.95)' : 'rgba(255,255,255,0.97)',
+            border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
+            borderRadius: '8px', padding: '4px', minWidth: '220px',
+            backdropFilter: 'blur(8px)', zIndex: 100,
+            boxShadow: isDark ? 'none' : '0 4px 16px rgba(0,0,0,0.08)',
+          }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 6px', marginBottom: '2px' }}>
+              <span style={{ fontSize: '9px', color: isDark ? '#556' : '#999', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                Recent
+              </span>
+              <button
+                onMouseDown={(e) => { e.preventDefault(); clearSearchHistory(); }}
+                style={{
+                  fontSize: '9px', color: isDark ? '#556' : '#999', background: 'none', border: 'none',
+                  cursor: 'pointer', textDecoration: 'underline',
+                }}
+              >
+                Clear
+              </button>
+            </div>
+            {searchHistory.slice(0, 10).map((q) => (
+              <div
+                key={q}
+                onMouseDown={(e) => { e.preventDefault(); search(q); setShowHistory(false); }}
+                style={{
+                  padding: '4px 8px', fontSize: '11px', cursor: 'pointer', borderRadius: '4px',
+                  color: isDark ? '#aab' : '#444',
+                }}
+                onMouseEnter={(e) => { (e.target as HTMLElement).style.background = isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.04)'; }}
+                onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent'; }}
+              >
+                {q}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {query && highlightedCount > 0 && (
+        <span style={{ fontSize: '11px', color: isDark ? '#88aaff' : '#5577cc' }}>
+          {highlightedCount} found
+        </span>
+      )}
+    </div>
+  );
+}