stellavault 0.2.0 → 0.3.0

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

@@ -1,386 +0,0 @@
-// 노드 렌더링: Points (포인트 클라우드) — 확실한 가시성 + 최고 성능
-// 옵시디언 스타일: 호버 시 연결 노드 강조, 나머지 페이드
-
-import { useRef, useMemo, useEffect, useCallback } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-import { useGraphStore } from '../stores/graph-store.js';
-
-// 원형 포인트 텍스처 생성
-function createCircleTexture(): THREE.Texture {
-  const size = 64;
-  const canvas = document.createElement('canvas');
-  canvas.width = size;
-  canvas.height = size;
-  const ctx = canvas.getContext('2d')!;
-
-  // 그라디언트 원 (가운데 밝고 가장자리 페이드)
-  const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
-  gradient.addColorStop(0, 'rgba(255,255,255,1)');
-  gradient.addColorStop(0.3, 'rgba(255,255,255,0.8)');
-  gradient.addColorStop(0.7, 'rgba(255,255,255,0.3)');
-  gradient.addColorStop(1, 'rgba(255,255,255,0)');
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, size, size);
-
-  const tex = new THREE.CanvasTexture(canvas);
-  tex.needsUpdate = true;
-  return tex;
-}
-
-const circleTexture = createCircleTexture();
-
-// 선명한 15색 팔레트
-const PALETTE = [
-  [0.49, 0.23, 0.93], // #7c3aed 보라
-  [0.93, 0.27, 0.60], // #ec4899 핑크
-  [0.96, 0.62, 0.04], // #f59e0b 노랑
-  [0.06, 0.72, 0.51], // #10b981 초록
-  [0.23, 0.51, 0.96], // #3b82f6 파랑
-  [0.94, 0.27, 0.27], // #ef4444 빨강
-  [0.02, 0.71, 0.83], // #06b6d4 시안
-  [0.52, 0.80, 0.09], // #84cc16 라임
-  [0.98, 0.57, 0.09], // #f97316 오렌지
-  [0.55, 0.36, 0.96], // #8b5cf6 인디고
-  [0.08, 0.72, 0.65], // #14b8a6 틸
-  [0.91, 0.47, 0.98], // #e879f9 퓨시아
-  [0.92, 0.80, 0.03], // #eab308 골드
-  [0.13, 0.83, 0.93], // #22d3ee 스카이
-  [0.98, 0.45, 0.52], // #fb7185 코랄
-] as number[][];
-
-export function GraphNodes() {
-  const pointsRef = useRef<THREE.Points>(null);
-  const glowRef = useRef<THREE.Points>(null);
-
-  const nodes = useGraphStore((s) => s.nodes);
-  const edges = useGraphStore((s) => s.edges);
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const hoveredNodeId = useGraphStore((s) => s.hoveredNodeId);
-  const highlightedNodeIds = useGraphStore((s) => s.highlightedNodeIds);
-  const selectNode = useGraphStore((s) => s.selectNode);
-  const hoverNode = useGraphStore((s) => s.hoverNode);
-  const hiddenClusters = useGraphStore((s) => s.hiddenClusters);
-  const hiddenTypes = useGraphStore((s) => s.hiddenTypes);
-  const timelineRange = useGraphStore((s) => s.timelineRange);
-  const theme = useGraphStore((s) => s.theme);
-  const isLight = theme === 'light';
-  const lodLevel = useGraphStore((s) => s.lodLevel);
-  const showDecayOverlay = useGraphStore((s) => s.showDecayOverlay);
-  const decayData = useGraphStore((s) => s.decayData);
-
-  // LOD nodeScale 적용 — Design Ref: §8
-  const lodScale = lodLevel === 'universe' ? 0.6 : lodLevel === 'note' ? 1.2 : 1.0;
-
-  // 검색 결과 breathing pulse 애니메이션
-  const pulseTimeRef = useRef(0);
-
-  useFrame(() => {
-    if (highlightedNodeIds.size === 0) { pulseTimeRef.current = 0; return; }
-
-    const pts = pointsRef.current;
-    if (!pts || nodes.length === 0) return;
-    const sizeAttr = pts.geometry.getAttribute('size') as THREE.BufferAttribute;
-    if (!sizeAttr) return;
-
-    pulseTimeRef.current += 0.04;
-    // sin wave breathing: 1.4x ~ 2.2x 반복
-    const breath = 1.4 + Math.sin(pulseTimeRef.current) * 0.4;
-
-    for (let i = 0; i < nodes.length; i++) {
-      if (highlightedNodeIds.has(nodes[i].id)) {
-        const baseSize = 4 + nodes[i].size * 3;
-        sizeAttr.setX(i, baseSize * breath);
-      }
-    }
-    sizeAttr.needsUpdate = true;
-  });
-
-  // 호버/선택 시 이웃 노드
-  const connectedIds = useMemo(() => {
-    const activeId = hoveredNodeId || selectedNodeId;
-    if (!activeId) return null;
-    const ids = new Set<string>();
-    ids.add(activeId);
-    for (const e of edges) {
-      if (e.source === activeId) ids.add(e.target);
-      if (e.target === activeId) ids.add(e.source);
-    }
-    return ids;
-  }, [hoveredNodeId, selectedNodeId, edges]);
-
-  // 위치 + 색상 + 크기 버퍼
-  const { positions, colors, sizes, glowSizes } = useMemo(() => {
-    const n = nodes.length;
-    const pos = new Float32Array(n * 3);
-    const col = new Float32Array(n * 3);
-    const sz = new Float32Array(n);
-    const gsz = new Float32Array(n);
-
-    for (let i = 0; i < n; i++) {
-      const node = nodes[i];
-      const [x, y, z] = node.position ?? [0, 0, 0];
-      pos[i * 3] = x;
-      pos[i * 3 + 1] = y;
-      pos[i * 3 + 2] = z;
-
-      const pal = PALETTE[node.clusterId % PALETTE.length];
-      if (isLight) {
-        // Light mode: 모노톤 — 크기 무관하게 일관된 진한 회색 (모든 노드 가시성 확보)
-        const gray = 0.32 + (1 - Math.min(node.size / 7, 1)) * 0.12;
-        col[i * 3] = gray;
-        col[i * 3 + 1] = gray;
-        col[i * 3 + 2] = gray + 0.02;
-      } else {
-        // Dark mode: 기존 팔레트 + 밝기 부스트
-        const bright = Math.min((node.size - 1) / 6, 1) * 0.4;
-        col[i * 3] = Math.min(pal[0] + bright, 1);
-        col[i * 3 + 1] = Math.min(pal[1] + bright, 1);
-        col[i * 3 + 2] = Math.min(pal[2] + bright, 1);
-      }
-
-      sz[i] = (3 + node.size * 4) * lodScale;
-      gsz[i] = (8 + node.size * 12) * lodScale;
-    }
-
-    return { positions: pos, colors: col, sizes: sz, glowSizes: gsz };
-  }, [nodes, isLight, lodScale]);
-
-  // 호버/선택 시 컬러 + 크기 업데이트 (극적 효과)
-  useEffect(() => {
-    const pts = pointsRef.current;
-    const glow = glowRef.current;
-    if (!pts || nodes.length === 0) return;
-
-    const colAttr = pts.geometry.getAttribute('color') as THREE.BufferAttribute;
-    const sizeAttr = pts.geometry.getAttribute('size') as THREE.BufferAttribute;
-    const glowColAttr = glow?.geometry.getAttribute('color') as THREE.BufferAttribute | undefined;
-    const glowSizeAttr = glow?.geometry.getAttribute('size') as THREE.BufferAttribute | undefined;
-    if (!colAttr || !sizeAttr) return;
-
-    const hasPulse = highlightedNodeIds.size > 0;
-    const hasActive = connectedIds !== null && !hasPulse;
-    const currentTheme = useGraphStore.getState().theme;
-    const isLightMode = currentTheme === 'light';
-    // hiddenClusters는 컴포넌트 레벨에서 subscribe
-
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      const pal = PALETTE[node.clusterId % PALETTE.length];
-      let r = pal[0], g = pal[1], b = pal[2];
-      let sz = 4 + node.size * 3;
-      let gsz = 12 + node.size * 8;
-
-      // 감쇠 오버레이 — Design Ref: §5.1
-      if (showDecayOverlay && !hasPulse && !hasActive) {
-        const rVal = decayData[node.id] ?? 1.0; // R값 (없으면 1.0 = 건강)
-        if (rVal < 0.7) {
-          const fade = Math.max(rVal, 0.1);
-          if (isLightMode) {
-            r = 0.5 + (1 - fade) * 0.4; g = 0.5 + (1 - fade) * 0.4; b = 0.5 + (1 - fade) * 0.4;
-          } else {
-            r *= fade; g *= fade; b *= fade;
-          }
-          sz *= (0.3 + fade * 0.7);
-          gsz *= (0.2 + fade * 0.5);
-        }
-        colAttr.setXYZ(i, r, g, b);
-        sizeAttr.setX(i, sz);
-        if (glowColAttr) glowColAttr.setXYZ(i, r, g, b);
-        if (glowSizeAttr) glowSizeAttr.setX(i, gsz);
-        continue;
-      }
-
-      // 타임라인 범위 필터
-      if (timelineRange && node.lastModified) {
-        const ms = new Date(node.lastModified).getTime();
-        if (ms < timelineRange[0] || ms > timelineRange[1]) {
-          r *= 0.04; g *= 0.04; b *= 0.04;
-          sz *= 0.2;
-          gsz *= 0.1;
-          colAttr.setXYZ(i, r, g, b);
-          sizeAttr.setX(i, sz);
-          if (glowColAttr) glowColAttr.setXYZ(i, r, g, b);
-          if (glowSizeAttr) glowSizeAttr.setX(i, gsz);
-          continue;
-        }
-      }
-
-      // type/source 숨김
-      const nodeSource = node.source ?? 'local';
-      const nodeType = node.type ?? 'note';
-      if (hiddenTypes.has(`source:${nodeSource}`) || hiddenTypes.has(`type:${nodeType}`)) {
-        r *= 0.02; g *= 0.02; b *= 0.02;
-        sz *= 0.15;
-        gsz *= 0.1;
-        colAttr.setXYZ(i, r, g, b);
-        sizeAttr.setX(i, sz);
-        if (glowColAttr) glowColAttr.setXYZ(i, r, g, b);
-        if (glowSizeAttr) glowSizeAttr.setX(i, gsz);
-        continue;
-      }
-
-      // 클러스터 숨김
-      if (hiddenClusters.has(node.clusterId)) {
-        r *= 0.02; g *= 0.02; b *= 0.02;
-        sz *= 0.15;
-        gsz *= 0.1;
-        colAttr.setXYZ(i, r, g, b);
-        sizeAttr.setX(i, sz);
-        if (glowColAttr) glowColAttr.setXYZ(i, r, g, b);
-        if (glowSizeAttr) glowSizeAttr.setX(i, gsz);
-        continue;
-      }
-
-      if (hasPulse) {
-        if (highlightedNodeIds.has(node.id)) {
-          if (isLightMode) {
-            // Light: 하이라이트 시 클러스터 컬러 드러남 (모노톤→컬러)
-            r = pal[0] * 0.7; g = pal[1] * 0.7; b = pal[2] * 0.7;
-            sz *= 1.8;
-          } else {
-            r = Math.min(r * 1.6, 1);
-            g = Math.min(g * 1.6, 1);
-            b = Math.min(b * 1.6, 1);
-            sz *= 1.6;
-          }
-          gsz = isLightMode ? 0 : gsz * 2;
-        } else {
-          if (isLightMode) {
-            r = 0.90; g = 0.90; b = 0.91;
-            sz *= 0.15;
-          } else {
-            r *= 0.03; g *= 0.03; b *= 0.03;
-            sz *= 0.3;
-            gsz *= 0.2;
-          }
-          gsz = isLightMode ? 0 : gsz;
-        }
-      } else if (node.id === hoveredNodeId) {
-        if (isLightMode) {
-          // Light: 호버 시 클러스터 컬러로 전환
-          r = pal[0] * 0.65; g = pal[1] * 0.65; b = pal[2] * 0.65;
-        } else {
-          r = 1; g = 1; b = 1;
-        }
-        sz *= 2.5;
-        gsz = isLightMode ? 0 : gsz * 2.5;
-      } else if (node.id === selectedNodeId) {
-        if (isLightMode) {
-          // Light: 선택 시 클러스터 컬러
-          r = pal[0] * 0.6 + 0.15;
-          g = pal[1] * 0.6 + 0.15;
-          b = pal[2] * 0.6 + 0.15;
-        } else {
-          r = r * 0.3 + 0.7;
-          g = g * 0.3 + 0.7;
-          b = b * 0.3 + 0.7;
-        }
-        sz *= 2;
-        gsz = isLightMode ? 0 : gsz * 2;
-      } else if (hasActive && connectedIds!.has(node.id)) {
-        if (isLightMode) {
-          // Light: 연결 노드도 컬러 드러남
-          r = pal[0] * 0.7; g = pal[1] * 0.7; b = pal[2] * 0.7;
-        } else {
-          r = Math.min(r * 1.6, 1);
-          g = Math.min(g * 1.6, 1);
-          b = Math.min(b * 1.6, 1);
-        }
-        sz *= 1.5;
-        gsz = isLightMode ? 0 : gsz * 1.8;
-      } else if (hasActive && !connectedIds!.has(node.id)) {
-        if (isLightMode) {
-          r = 0.90; g = 0.90; b = 0.91;
-          sz *= 0.15;
-          gsz = 0;
-        } else {
-          r *= 0.03; g *= 0.03; b *= 0.03;
-          sz *= 0.4;
-          gsz *= 0.3;
-        }
-      }
-
-      colAttr.setXYZ(i, r, g, b);
-      sizeAttr.setX(i, sz);
-      if (glowColAttr) glowColAttr.setXYZ(i, r, g, b);
-      if (glowSizeAttr) glowSizeAttr.setX(i, gsz);
-    }
-
-    colAttr.needsUpdate = true;
-    sizeAttr.needsUpdate = true;
-    if (glowColAttr) glowColAttr.needsUpdate = true;
-    if (glowSizeAttr) glowSizeAttr.needsUpdate = true;
-  }, [nodes, hoveredNodeId, selectedNodeId, connectedIds, highlightedNodeIds, hiddenClusters, hiddenTypes, timelineRange, showDecayOverlay, decayData]);
-
-  // Raycaster로 호버/클릭 처리
-  const handlePointerMove = useCallback((e: any) => {
-    e.stopPropagation();
-    if (e.index !== undefined && e.index < nodes.length) {
-      hoverNode(nodes[e.index].id);
-      document.body.style.cursor = 'pointer';
-    }
-  }, [nodes, hoverNode]);
-
-  const handleClick = useCallback((e: any) => {
-    e.stopPropagation();
-    if (e.index !== undefined && e.index < nodes.length) {
-      selectNode(nodes[e.index].id);
-    }
-  }, [nodes, selectNode]);
-
-  const handlePointerOut = useCallback(() => {
-    hoverNode(null);
-    document.body.style.cursor = 'default';
-  }, [hoverNode]);
-
-  if (nodes.length === 0) return null;
-
-  return (
-    <group>
-      {/* 글로우 레이어 (큰 반투명 포인트) — light mode에서는 그림자 스타일 */}
-      <points ref={glowRef}>
-        <bufferGeometry>
-          <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-          <bufferAttribute attach="attributes-color" args={[new Float32Array(colors), 3]} />
-          <bufferAttribute attach="attributes-size" args={[glowSizes, 1]} />
-        </bufferGeometry>
-        <pointsMaterial
-          vertexColors
-          transparent
-          opacity={isLight ? 0.06 : 0.25}
-          depthWrite={false}
-          blending={isLight ? THREE.NormalBlending : THREE.AdditiveBlending}
-          sizeAttenuation
-          size={isLight ? 10 : 18}
-          map={circleTexture}
-          alphaTest={0.05}
-        />
-      </points>
-
-      {/* 코어 노드 */}
-      <points
-        ref={pointsRef}
-        onClick={handleClick}
-        onPointerOver={handlePointerMove}
-        onPointerOut={handlePointerOut}
-      >
-        <bufferGeometry>
-          <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-          <bufferAttribute attach="attributes-color" args={[colors, 3]} />
-          <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
-        </bufferGeometry>
-        <pointsMaterial
-          vertexColors
-          transparent
-          opacity={isLight ? 1.0 : 0.95}
-          depthWrite={false}
-          sizeAttenuation
-          size={isLight ? 8 : 6}
-          map={circleTexture}
-          alphaTest={0.01}
-        />
-      </points>
-    </group>
-  );
-}

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

@@ -1,173 +0,0 @@
-// 노트 건강도 대시보드 — decay/gaps/duplicates/growth 종합 뷰
-
-import { useState, useEffect } from 'react';
-import { fetchHealth } from '../api/client.js';
-import { useGraphStore } from '../stores/graph-store.js';
-
-interface HealthData {
-  stats: { documentCount: number; chunkCount: number; dbSizeMB?: number; vaultName?: string };
-  decay: { totalDocuments: number; criticalCount: number; decayingCount: number; averageR: number; topDecaying: Array<{ title: string; retrievability: number }> };
-  gaps: { gapCount: number; isolatedCount: number };
-  duplicates: { count: number };
-  distribution: { source: Record<string, number>; type: Record<string, number> };
-  growth: Record<string, number>;
-}
-
-function MetricCard({ label, value, sub, color }: { label: string; value: string | number; sub?: string; color: string }) {
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  return (
-    <div style={{
-      padding: '10px 12px', borderRadius: '8px', flex: '1 1 120px', minWidth: '120px',
-      background: isDark ? 'rgba(100,120,255,0.06)' : 'rgba(0,0,0,0.02)',
-      border: `1px solid ${isDark ? 'rgba(100,120,255,0.1)' : 'rgba(0,0,0,0.06)'}`,
-    }}>
-      <div style={{ fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.5px', color: isDark ? '#667' : '#999', marginBottom: '4px' }}>
-        {label}
-      </div>
-      <div style={{ fontSize: '20px', fontWeight: 700, color, lineHeight: 1.2 }}>
-        {value}
-      </div>
-      {sub && <div style={{ fontSize: '10px', color: isDark ? '#556' : '#888', marginTop: '2px' }}>{sub}</div>}
-    </div>
-  );
-}
-
-function MiniBar({ items, isDark }: { items: Array<{ label: string; value: number; color: string }>; isDark: boolean }) {
-  const total = items.reduce((s, i) => s + i.value, 0) || 1;
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
-      {items.map((item) => (
-        <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '10px' }}>
-          <span style={{ width: '50px', color: isDark ? '#aab' : '#555', textAlign: 'right' }}>{item.label}</span>
-          <div style={{ flex: 1, height: '6px', background: isDark ? 'rgba(100,120,255,0.08)' : 'rgba(0,0,0,0.04)', borderRadius: '3px', overflow: 'hidden' }}>
-            <div style={{ width: `${(item.value / total) * 100}%`, height: '100%', background: item.color, borderRadius: '3px' }} />
-          </div>
-          <span style={{ width: '30px', color: isDark ? '#667' : '#999', fontSize: '9px' }}>{item.value}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const SOURCE_COLORS: Record<string, string> = {
-  local: '#10b981', notion: '#3b82f6', clip: '#f59e0b', bridge: '#8b5cf6', pack: '#ec4899',
-};
-
-const TYPE_COLORS: Record<string, string> = {
-  note: '#3b82f6', clip: '#f59e0b', sync: '#10b981', bridge: '#8b5cf6', decision: '#ef4444', snapshot: '#06b6d4',
-};
-
-export function HealthDashboard() {
-  const theme = useGraphStore((s) => s.theme);
-  const isDark = theme === 'dark';
-  const [data, setData] = useState<HealthData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    setLoading(true);
-    fetchHealth()
-      .then(setData)
-      .catch((err) => setError(String(err)))
-      .finally(() => setLoading(false));
-  }, []);
-
-  if (loading) return <div style={{ padding: '20px', color: isDark ? '#667' : '#999', fontSize: '12px' }}>Loading health data...</div>;
-  if (error) return <div style={{ padding: '20px', color: '#ef4444', fontSize: '12px' }}>{error}</div>;
-  if (!data) return null;
-
-  const rPct = Math.round(data.decay.averageR * 100);
-  const rColor = rPct >= 70 ? '#10b981' : rPct >= 40 ? '#f59e0b' : '#ef4444';
-
-  const sourceItems = Object.entries(data.distribution.source).map(([label, value]) => ({
-    label, value, color: SOURCE_COLORS[label] ?? '#666',
-  }));
-  const typeItems = Object.entries(data.distribution.type).map(([label, value]) => ({
-    label, value, color: TYPE_COLORS[label] ?? '#666',
-  }));
-
-  // 성장 추이 — 최근 12개월 미니 차트
-  const growthEntries = Object.entries(data.growth).slice(-12);
-  const maxGrowth = Math.max(1, ...growthEntries.map(([, v]) => v));
-
-  return (
-    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {/* 핵심 메트릭 */}
-      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-        <MetricCard label="Total Docs" value={data.stats.documentCount} sub={`${data.stats.chunkCount} chunks`} color={isDark ? '#c0c0f0' : '#2a2a4a'} />
-        <MetricCard label="Avg Retrievability" value={`${rPct}%`} sub={`${data.decay.criticalCount} critical`} color={rColor} />
-        <MetricCard label="Knowledge Gaps" value={data.gaps.gapCount} sub={`${data.gaps.isolatedCount} isolated`} color={data.gaps.gapCount > 5 ? '#f59e0b' : '#10b981'} />
-        <MetricCard label="Duplicates" value={data.duplicates.count} color={data.duplicates.count > 10 ? '#f59e0b' : '#10b981'} />
-      </div>
-
-      {/* 분포 */}
-      <div style={{ display: 'flex', gap: '16px' }}>
-        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.5px', color: isDark ? '#667' : '#999', marginBottom: '6px' }}>
-            By Source
-          </div>
-          <MiniBar items={sourceItems} isDark={isDark} />
-        </div>
-        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.5px', color: isDark ? '#667' : '#999', marginBottom: '6px' }}>
-            By Type
-          </div>
-          <MiniBar items={typeItems} isDark={isDark} />
-        </div>
-      </div>
-
-      {/* 성장 추이 */}
-      {growthEntries.length > 1 && (
-        <div>
-          <div style={{ fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.5px', color: isDark ? '#667' : '#999', marginBottom: '6px' }}>
-            Monthly Growth
-          </div>
-          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2px', height: '40px' }}>
-            {growthEntries.map(([month, count]) => (
-              <div key={month} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2px' }}>
-                <div style={{
-                  width: '100%', maxWidth: '24px',
-                  height: `${(count / maxGrowth) * 100}%`, minHeight: '2px',
-                  background: isDark ? 'rgba(100,180,255,0.5)' : 'rgba(59,130,246,0.4)',
-                  borderRadius: '2px 2px 0 0',
-                }} />
-              </div>
-            ))}
-          </div>
-          <div style={{ display: 'flex', gap: '2px', marginTop: '2px' }}>
-            {growthEntries.map(([month]) => (
-              <div key={month} style={{ flex: 1, fontSize: '7px', color: isDark ? '#445' : '#bbb', textAlign: 'center', overflow: 'hidden' }}>
-                {month.slice(5)}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Decay 위험 노트 */}
-      {data.decay.topDecaying.length > 0 && (
-        <div>
-          <div style={{ fontSize: '9px', textTransform: 'uppercase', letterSpacing: '0.5px', color: isDark ? '#667' : '#999', marginBottom: '4px' }}>
-            Most Decaying Notes
-          </div>
-          {data.decay.topDecaying.map((d, i) => {
-            const r = Math.round((d.retrievability ?? 0) * 100);
-            const barColor = r >= 50 ? '#10b981' : r >= 30 ? '#f59e0b' : '#ef4444';
-            return (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0', fontSize: '10px' }}>
-                <span style={{ flex: 1, color: isDark ? '#aab' : '#444', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {d.title}
-                </span>
-                <div style={{ width: '60px', height: '4px', background: isDark ? 'rgba(100,120,255,0.08)' : 'rgba(0,0,0,0.04)', borderRadius: '2px', overflow: 'hidden' }}>
-                  <div style={{ width: `${r}%`, height: '100%', background: barColor, borderRadius: '2px' }} />
-                </div>
-                <span style={{ width: '28px', color: barColor, fontSize: '9px', textAlign: 'right' }}>{r}%</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}