stellavault 0.1.0

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

@@ -0,0 +1,214 @@
+// 대시보드 레이아웃 — 호버=툴팁, 클릭=사이드패널, 모션 제어
+
+import { useState, useRef } from 'react';
+import { Graph3D } from './Graph3D.js';
+import { NodeDetail } from './NodeDetail.js';
+import { StatusBar } from './StatusBar.js';
+import { SearchBar } from './SearchBar.js';
+import { ClusterFilter } from './ClusterFilter.js';
+import { TypeFilter } from './TypeFilter.js';
+import { Timeline } from './Timeline.js';
+import { MotionToggle } from './MotionToggle.js';
+import { MotionOverlay } from './MotionOverlay.js';
+import { useMotion } from '../hooks/useMotion.js';
+import { useGraphStore } from '../stores/graph-store.js';
+import { ToolsPanel } from './ToolsPanel.js';
+import { MultiverseView } from './MultiverseView.js';
+
+export function Layout() {
+  const viewMode = useGraphStore((s) => s.viewMode);
+  const setViewMode = useGraphStore((s) => s.setViewMode);
+
+  // 멀티버스 모드면 멀티버스 뷰 렌더링
+  if (viewMode === 'multiverse') {
+    return <MultiverseView />;
+  }
+
+  // 기존 universe 모드
+  const error = useGraphStore((s) => s.error);
+  const loading = useGraphStore((s) => s.loading);
+  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
+  const mode = useGraphStore((s) => s.mode);
+  const setMode = useGraphStore((s) => s.setMode);
+  const theme = useGraphStore((s) => s.theme);
+  const toggleTheme = useGraphStore((s) => s.toggleTheme);
+  const showDecay = useGraphStore((s) => s.showDecayOverlay);
+  const toggleDecay = useGraphStore((s) => s.toggleDecayOverlay);
+  const showConstellation = useGraphStore((s) => s.showConstellation);
+  const toggleConstellation = useGraphStore((s) => s.toggleConstellation);
+  const showTimeline = useGraphStore((s) => s.showTimeline);
+  const toggleTimeline = useGraphStore((s) => s.toggleTimeline);
+  const isDark = theme === 'dark';
+
+  // 모션 제어
+  const controlsRef = useRef<any>(null);
+  // controlsRef는 Graph3D 안의 OrbitControls — window로 전달
+  const getControls = () => (window as any).__sv_controls ?? controlsRef;
+  const motion = useMotion(getControls());
+  const [motionActive, setMotionActive] = useState(false);
+  const [motionLoading, setMotionLoading] = useState(false);
+  const [motionVideo, setMotionVideo] = useState<HTMLVideoElement | null>(null);
+
+  const toggleMotion = async () => {
+    if (motionActive) {
+      motion.stop();
+      setMotionActive(false);
+      setMotionVideo(null);
+    } else {
+      setMotionLoading(true);
+      try {
+        await motion.start();
+        setMotionActive(true);
+        setMotionVideo(motion.videoRef.current);
+      } catch (err) {
+        console.error('Motion start failed:', err);
+      }
+      setMotionLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: isDark ? '#050510' : '#f0f2f8' }}>
+      {/* Header */}
+      <div style={{
+        padding: '8px 16px',
+        background: isDark ? 'rgba(10, 10, 20, 0.8)' : 'rgba(240, 242, 248, 0.95)',
+        borderBottom: `1px solid ${isDark ? 'rgba(100, 120, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)'}`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        backdropFilter: 'blur(8px)',
+        position: 'relative',
+        zIndex: 10,
+      }}>
+        <button
+          onClick={() => setViewMode('multiverse')}
+          style={{
+            padding: '4px 10px', fontSize: '11px', border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
+            borderRadius: '4px', cursor: 'pointer',
+            background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)',
+            color: isDark ? '#88aaff' : '#4466aa', marginRight: '8px',
+          }}
+        >
+          Multiverse
+        </button>
+        <span style={{ fontSize: '14px', fontWeight: 600, color: isDark ? '#c0c0f0' : '#2a2a4a', letterSpacing: '0.5px' }}>
+          Stellavault
+        </span>
+        <span style={{ color: isDark ? 'rgba(100, 120, 255, 0.5)' : 'rgba(60, 60, 120, 0.5)', fontSize: '12px', marginRight: '12px' }}>
+          Neural Knowledge Graph
+        </span>
+        <SearchBar />
+        <div style={{
+          marginLeft: 'auto', display: 'flex', gap: '6px', alignItems: 'center',
+        }}>
+          <MotionToggle active={motionActive} loading={motionLoading} onToggle={toggleMotion} isDark={isDark} />
+          <div style={{
+            display: 'flex', gap: '2px',
+            background: isDark ? 'rgba(100, 120, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
+            borderRadius: '6px', padding: '2px',
+          }}>
+            {(['semantic', 'folder'] as const).map((m) => {
+              const active = mode === m;
+              return (
+                <button
+                  key={m}
+                  onClick={() => setMode(m)}
+                  style={{
+                    padding: '4px 12px', fontSize: '11px', border: 'none', borderRadius: '4px', cursor: 'pointer',
+                    background: active
+                      ? (isDark ? 'rgba(100, 120, 255, 0.3)' : 'rgba(0, 0, 0, 0.08)')
+                      : 'transparent',
+                    color: active
+                      ? (isDark ? '#c0d0ff' : '#2a2a4a')
+                      : (isDark ? '#556' : '#888'),
+                    fontWeight: active ? 600 : 400,
+                  }}
+                >
+                  {m === 'semantic' ? 'AI Semantic' : 'Obsidian Folders'}
+                </button>
+              );
+            })}
+          </div>
+          <button
+            onClick={toggleConstellation}
+            style={{
+              padding: '4px 8px', fontSize: '11px',
+              border: `1px solid ${showConstellation ? (isDark ? 'rgba(100,200,255,0.3)' : 'rgba(0,100,200,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
+              borderRadius: '4px', cursor: 'pointer',
+              background: showConstellation ? (isDark ? 'rgba(100,200,255,0.15)' : 'rgba(0,100,200,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
+              color: showConstellation ? (isDark ? '#66ccff' : '#0066aa') : (isDark ? '#aab' : '#555'),
+            }}
+          >
+            Stars
+          </button>
+          <ClusterFilter />
+          <TypeFilter />
+          <button
+            onClick={toggleTimeline}
+            style={{
+              padding: '4px 8px', fontSize: '11px',
+              border: `1px solid ${showTimeline ? (isDark ? 'rgba(100,180,255,0.3)' : 'rgba(0,100,200,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
+              borderRadius: '4px', cursor: 'pointer',
+              background: showTimeline ? (isDark ? 'rgba(100,180,255,0.15)' : 'rgba(0,100,200,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
+              color: showTimeline ? (isDark ? '#66aaff' : '#0066aa') : (isDark ? '#aab' : '#555'),
+            }}
+          >
+            Timeline
+          </button>
+          <button
+            onClick={toggleDecay}
+            style={{
+              padding: '4px 8px', fontSize: '11px',
+              border: `1px solid ${showDecay ? (isDark ? 'rgba(255,150,50,0.3)' : 'rgba(200,100,0,0.2)') : (isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)')}`,
+              borderRadius: '4px', cursor: 'pointer',
+              background: showDecay ? (isDark ? 'rgba(255,150,50,0.15)' : 'rgba(200,100,0,0.08)') : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
+              color: showDecay ? (isDark ? '#ffaa44' : '#aa6600') : (isDark ? '#aab' : '#555'),
+            }}
+          >
+            Decay
+          </button>
+          <button
+            onClick={toggleTheme}
+            style={{
+              padding: '4px 8px', fontSize: '11px',
+              border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
+              borderRadius: '4px', cursor: 'pointer',
+              background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)',
+              color: isDark ? '#aab' : '#555',
+            }}
+          >
+            {isDark ? 'Light' : 'Dark'}
+          </button>
+        </div>
+        {loading && (
+          <span style={{ fontSize: '11px', color: '#88aaff' }}>
+            {mode === 'semantic' ? 'Mapping neural connections...' : 'Loading folder structure...'}
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <div style={{ padding: '10px 16px', background: 'rgba(255, 50, 50, 0.1)', color: '#ef4444', fontSize: '12px' }}>
+          {error}
+        </div>
+      )}
+
+      {/* Main */}
+      <div style={{ flex: 1, display: 'flex', overflow: 'hidden', position: 'relative' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Graph3D />
+          {/* 모션 웹캠 PIP */}
+          {motionActive && (
+            <MotionOverlay videoElement={motionVideo} currentGesture={motion.currentGesture} />
+          )}
+        </div>
+        {selectedNodeId && <NodeDetail />}
+      </div>
+
+      <Timeline />
+      <ToolsPanel />
+      <StatusBar />
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+// 웹캠 PIP 미리보기 + 현재 제스처 상태 표시
+
+import { useEffect, useRef } from 'react';
+
+const GESTURE_LABELS: Record<string, string> = {
+  rotate: '✋ Rotate',
+  pan: '✊ Pan',
+  zoom: '🤏 Zoom',
+  select: '👆 Select',
+  reset: '👋 Reset',
+  none: '...',
+};
+
+interface Props {
+  videoElement: HTMLVideoElement | null;
+  currentGesture: React.RefObject<string>;
+}
+
+export function MotionOverlay({ videoElement, currentGesture }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const labelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!videoElement || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let animId: number;
+
+    function draw() {
+      if (!videoElement || !ctx) return;
+      ctx.save();
+      // 좌우 반전 (거울 모드)
+      ctx.scale(-1, 1);
+      ctx.drawImage(videoElement, -canvas.width, 0, canvas.width, canvas.height);
+      ctx.restore();
+
+      // 제스처 라벨 업데이트
+      if (labelRef.current) {
+        const g = currentGesture.current ?? 'none';
+        labelRef.current.textContent = GESTURE_LABELS[g] ?? g;
+      }
+
+      animId = requestAnimationFrame(draw);
+    }
+
+    draw();
+    return () => cancelAnimationFrame(animId);
+  }, [videoElement, currentGesture]);
+
+  if (!videoElement) return null;
+
+  return (
+    <div style={{
+      position: 'absolute', bottom: '16px', right: '16px',
+      borderRadius: '12px', overflow: 'hidden',
+      border: '1px solid rgba(100, 120, 255, 0.3)',
+      boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
+      zIndex: 50,
+    }}>
+      <canvas
+        ref={canvasRef}
+        width={192}
+        height={144}
+        style={{ display: 'block', background: '#111' }}
+      />
+      <div
+        ref={labelRef}
+        style={{
+          position: 'absolute', bottom: '6px', left: '50%', transform: 'translateX(-50%)',
+          background: 'rgba(0,0,0,0.7)', padding: '2px 10px', borderRadius: '10px',
+          fontSize: '11px', color: '#88aaff', whiteSpace: 'nowrap',
+        }}
+      >
+        ...
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+// 모션 ON/OFF 토글 버튼
+
+interface Props {
+  active: boolean;
+  loading: boolean;
+  onToggle: () => void;
+  isDark?: boolean;
+}
+
+export function MotionToggle({ active, loading, onToggle, isDark = true }: Props) {
+  return (
+    <button
+      onClick={onToggle}
+      disabled={loading}
+      style={{
+        padding: '4px 10px',
+        fontSize: '11px',
+        border: `1px solid ${isDark ? 'rgba(100,120,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
+        borderRadius: '4px',
+        cursor: loading ? 'wait' : 'pointer',
+        background: active
+          ? (isDark ? 'rgba(100,255,120,0.2)' : 'rgba(40,160,80,0.1)')
+          : (isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.03)'),
+        color: active
+          ? (isDark ? '#88ff88' : '#2a8a4a')
+          : (isDark ? '#aab' : '#555'),
+        transition: 'all 0.2s',
+      }}
+    >
+      {loading ? 'Loading...' : active ? '✋ Motion ON' : '✋ Motion'}
+    </button>
+  );
+}

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

@@ -0,0 +1,286 @@
+// Design Ref: Phase 1c — 멀티버스 뷰
+// "내 우주"가 대형 구체, 피어 우주들이 주변에 연결
+
+import { useRef, useMemo, useCallback } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Text, Billboard } from '@react-three/drei';
+import * as THREE from 'three';
+import { useGraphStore } from '../stores/graph-store.js';
+
+const UNIVERSE_COLORS = [
+  '#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6',
+  '#8b5cf6', '#ef4444', '#06b6d4', '#84cc16', '#f97316',
+];
+
+interface UniverseData {
+  id: string;
+  name: string;
+  documentCount: number;
+  topTopics: string[];
+  position: [number, number, number];
+  color: string;
+  isMe: boolean;
+}
+
+function UniverseNode({ data, onClick }: { data: UniverseData; onClick: () => void }) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const glowRef = useRef<THREE.Mesh>(null);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+
+  // 크기: 문서 수 기반 (최소 2, 최대 8)
+  const size = Math.max(2, Math.min(8, Math.sqrt(data.documentCount / 50) * 2));
+  const myScale = data.isMe ? 1.5 : 1;
+
+  useFrame((state) => {
+    if (meshRef.current) {
+      // 부드러운 회전
+      meshRef.current.rotation.y += data.isMe ? 0.003 : 0.001;
+    }
+    if (glowRef.current) {
+      // 호흡 효과
+      const pulse = 1 + Math.sin(state.clock.elapsedTime * (data.isMe ? 1.5 : 0.8)) * 0.1;
+      glowRef.current.scale.setScalar(pulse);
+    }
+  });
+
+  const color = new THREE.Color(data.color);
+
+  return (
+    <group position={data.position} onClick={onClick} onPointerOver={() => { document.body.style.cursor = 'pointer'; }} onPointerOut={() => { document.body.style.cursor = 'default'; }}>
+      {/* 글로우 */}
+      <mesh ref={glowRef}>
+        <sphereGeometry args={[size * myScale * 1.4, 16, 16]} />
+        <meshBasicMaterial
+          color={color}
+          transparent
+          opacity={isDark ? 0.08 : 0.04}
+          depthWrite={false}
+        />
+      </mesh>
+
+      {/* 코어 구체 */}
+      <mesh ref={meshRef}>
+        <sphereGeometry args={[size * myScale, 32, 32]} />
+        <meshStandardMaterial
+          color={color}
+          emissive={color}
+          emissiveIntensity={data.isMe ? 0.4 : 0.15}
+          roughness={0.3}
+          metalness={0.7}
+          transparent
+          opacity={0.9}
+        />
+      </mesh>
+
+      {/* 라벨 */}
+      <Billboard position={[0, size * myScale + 2, 0]}>
+        <Text
+          fontSize={data.isMe ? 1.8 : 1.2}
+          color={isDark ? '#c0c0f0' : '#2a2a4a'}
+          anchorX="center"
+          anchorY="bottom"
+          font={undefined}
+        >
+          {data.isMe ? 'My Universe' : data.name}
+        </Text>
+        <Text
+          fontSize={0.8}
+          color={isDark ? '#556' : '#999'}
+          anchorX="center"
+          anchorY="top"
+          position={[0, -0.3, 0]}
+          font={undefined}
+        >
+          {`${data.documentCount} docs`}
+        </Text>
+      </Billboard>
+
+      {/* 토픽 태그 (내 우주만) */}
+      {data.isMe && data.topTopics.length > 0 && (
+        <Billboard position={[0, -(size * myScale + 1.5), 0]}>
+          <Text
+            fontSize={0.6}
+            color={isDark ? '#445' : '#bbb'}
+            anchorX="center"
+            font={undefined}
+          >
+            {data.topTopics.slice(0, 3).map(t => `#${t}`).join('  ')}
+          </Text>
+        </Billboard>
+      )}
+    </group>
+  );
+}
+
+function MultiverseEdges({ universes }: { universes: UniverseData[] }) {
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+  const myUniverse = universes.find(u => u.isMe);
+  if (!myUniverse) return null;
+
+  const positions = useMemo(() => {
+    const pts: number[] = [];
+    for (const u of universes) {
+      if (u.isMe) continue;
+      pts.push(...myUniverse.position, ...u.position);
+    }
+    return new Float32Array(pts);
+  }, [universes, myUniverse]);
+
+  return (
+    <lineSegments>
+      <bufferGeometry>
+        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+      </bufferGeometry>
+      <lineBasicMaterial
+        color={isDark ? '#6366f1' : '#3b82f6'}
+        transparent
+        opacity={0.2}
+        linewidth={1}
+      />
+    </lineSegments>
+  );
+}
+
+function MultiverseScene() {
+  const nodes = useGraphStore((s) => s.nodes);
+  const peers = useGraphStore((s) => s.federationPeers);
+  const setViewMode = useGraphStore((s) => s.setViewMode);
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+
+  // 우주 데이터 구성
+  const universes = useMemo<UniverseData[]>(() => {
+    const result: UniverseData[] = [];
+
+    // 내 우주 (중앙)
+    result.push({
+      id: 'me',
+      name: 'My Universe',
+      documentCount: nodes.length,
+      topTopics: [],
+      position: [0, 0, 0],
+      color: '#6366f1',
+      isMe: true,
+    });
+
+    // 피어 우주들 (원형 배치)
+    for (let i = 0; i < peers.length; i++) {
+      const angle = (i / Math.max(peers.length, 1)) * Math.PI * 2 - Math.PI / 2;
+      const radius = 30 + peers.length * 5;
+      result.push({
+        id: peers[i].peerId,
+        name: peers[i].displayName,
+        documentCount: peers[i].documentCount,
+        topTopics: peers[i].topTopics,
+        position: [
+          radius * Math.cos(angle),
+          (Math.random() - 0.5) * 10,
+          radius * Math.sin(angle),
+        ],
+        color: UNIVERSE_COLORS[i % UNIVERSE_COLORS.length],
+        isMe: false,
+      });
+    }
+
+    return result;
+  }, [nodes.length, peers]);
+
+  const handleUniverseClick = useCallback((u: UniverseData) => {
+    if (u.isMe) {
+      setViewMode('universe');
+    }
+  }, [setViewMode]);
+
+  return (
+    <>
+      <ambientLight intensity={0.3} />
+      <pointLight position={[0, 50, 50]} intensity={0.8} />
+
+      {universes.map((u) => (
+        <UniverseNode key={u.id} data={u} onClick={() => handleUniverseClick(u)} />
+      ))}
+
+      <MultiverseEdges universes={universes} />
+
+      <OrbitControls
+        enablePan
+        enableZoom
+        minDistance={20}
+        maxDistance={200}
+        autoRotate
+        autoRotateSpeed={0.3}
+      />
+
+      {/* 배경 파티클 */}
+      <points>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            args={[new Float32Array(Array.from({ length: 300 }, () => (Math.random() - 0.5) * 300)), 3]}
+          />
+        </bufferGeometry>
+        <pointsMaterial
+          size={0.3}
+          color={isDark ? '#334' : '#ddd'}
+          transparent
+          opacity={0.5}
+          depthWrite={false}
+        />
+      </points>
+    </>
+  );
+}
+
+export function MultiverseView() {
+  const theme = useGraphStore((s) => s.theme);
+  const isDark = theme === 'dark';
+  const setViewMode = useGraphStore((s) => s.setViewMode);
+  const peers = useGraphStore((s) => s.federationPeers);
+
+  return (
+    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+      <Canvas camera={{ position: [0, 30, 80], fov: 50 }}>
+        <color attach="background" args={[isDark ? '#020208' : '#f0f2f8']} />
+        <fog attach="fog" args={[isDark ? '#020208' : '#f0f2f8', 100, 250]} />
+        <MultiverseScene />
+      </Canvas>
+
+      {/* 오버레이 UI */}
+      <div style={{
+        position: 'absolute', top: '16px', left: '16px',
+        color: isDark ? '#c0c0f0' : '#2a2a4a',
+        fontSize: '12px',
+      }}>
+        <div style={{ fontSize: '16px', fontWeight: 700, marginBottom: '4px' }}>
+          Stella Network
+        </div>
+        <div style={{ color: isDark ? '#556' : '#999' }}>
+          {peers.length} peer{peers.length !== 1 ? 's' : ''} connected
+        </div>
+      </div>
+
+      <div style={{
+        position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)',
+        color: isDark ? '#556' : '#999', fontSize: '11px',
+      }}>
+        Click "My Universe" to enter your knowledge graph
+      </div>
+
+      <button
+        onClick={() => setViewMode('universe')}
+        style={{
+          position: 'absolute', top: '16px', right: '16px',
+          padding: '6px 14px', fontSize: '11px',
+          background: isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.04)',
+          border: `1px solid ${isDark ? 'rgba(100,120,255,0.2)' : 'rgba(0,0,0,0.1)'}`,
+          borderRadius: '6px', cursor: 'pointer',
+          color: isDark ? '#88aaff' : '#4466aa',
+        }}
+      >
+        Enter My Universe
+      </button>
+    </div>
+  );
+}