{/* Ambient glow effects */}

{/* Header */}

VIBESYNC

Thought-Stream

RABBIT HOLE

{/* Canvas Area */}

{/* SVG Connections */} {/* Nodes */} {(visibleNodes || []).map((node, idx) => { if (!node) return null; const pos = getNodePos(node); const isSelected = selectedData?.id === node.id; const isPulsing = pulseMap[node.id]; const nodeConviction = node?.conviction ?? 50; const nodeSize = node?.size ?? 60; const isDepth2 = (node?.depth ?? 1) === 2; const floatY = Math.sin((animPhase * 0.03) + idx * 1.2) * 4; const floatX = Math.cos((animPhase * 0.02) + idx * 0.8) * 3; const entryDelay = isDepth2 ? 0.3 + idx * 0.05 : idx * 0.08; return (

handleNodeTap(node)} style={{ position: 'absolute', ...pos, transform: `translate(-50%, -50%) translate(${floatX}px, ${floatY}px) scale(${isPulsing ? 1.3 : isSelected ? 1.15 : 1})`, zIndex: isSelected ? 5 : 2, cursor: 'pointer', transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease', opacity: mounted ? 1 : 0, transitionDelay: `${entryDelay}s`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }} > {/* Glow ring */}

{/* Echo waveform ring */} {echoPlaying === node.id && (

)} {/* Node body */}

{node.emoji ?? '💫'} {node.hasEcho && (

🎤

)}

{/* Label */}

{node.label ?? 'Thought'}

{/* Mini conviction bar */} {!isSelected && (

)}

); })} {/* Rabbit hole wormhole effect */} {rabbitHole && (

)}

{/* Detail Panel - slides up when node selected */}

{/* Drag indicator */}

{selectedData?.emoji ?? '💫'}

{selectedData?.label ?? 'Thought'}

Conviction: {selectedData?.conviction ?? 50}%

setSelectedNode(null)} style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, cursor: 'pointer', transition: 'all 0.2s ease' }} > ✕

{/* Conviction Meter */}

CONVICTION METER

{selectedData?.conviction ?? 50}%

{[-10, -5, 5, 10].map(delta => (

{ if (selectedData) { handleConvictionChange(selectedData.id, (selectedData.conviction ?? 50) + delta); } }} onMouseUp={handleConvictionCommit} onTouchEnd={handleConvictionCommit} style={{ flex: 1, height: 44, borderRadius: 12, background: delta > 0 ? `rgba(0,255,136,${delta === 10 ? 0.15 : 0.08})` : `rgba(255,60,60,${delta === -10 ? 0.15 : 0.08})`, border: `1px solid ${delta > 0 ? 'rgba(0,255,136,0.2)' : 'rgba(255,60,60,0.2)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700, color: delta > 0 ? '#00ff88' : '#ff6b6b', cursor: 'pointer', transition: 'all 0.2s ease', userSelect: 'none' }} > {delta > 0 ? `+${delta}` : delta}

))}

{/* Echo Button */} {selectedData?.hasEcho && (

handlePlayEcho(selectedData?.id)} style={{ height: 52, borderRadius: 16, background: echoPlaying === selectedData?.id ? `linear-gradient(135deg, ${selectedData?.color ?? '#ff3cac'}44, ${selectedData?.color ?? '#b44aff'}44)` : 'rgba(255,255,255,0.06)', border: `1px solid ${selectedData?.color ?? '#ff3cac'}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, cursor: 'pointer', transition: 'all 0.3s ease', position: 'relative', overflow: 'hidden' }} > {echoPlaying === selectedData?.id && (

)} 🎤 {echoPlaying === selectedData?.id ? 'Playing Echo...' : 'Play Voice Echo'} {echoPlaying === selectedData?.id && (

{[...Array(5)].map((_, i) => (

))}

)}

{/* Bottom stats bar */} {!selectedData && (

{[ { label: 'THOUGHTS', value: (visibleNodes || []).length, emoji: '💫' }, { label: 'LINKS', value: (visibleConnections || []).length, emoji: '🔗' }, { label: 'AVG CONVICTION', value: `${Math.round(visibleNodes.reduce((s, n) => s + (n?.conviction ?? 0), 0) / Math.max(visibleNodes.length, 1))}%`, emoji: '🔥' } ].map((stat, i) => (

{stat.emoji}

{stat.value}

{stat.label}

))}

)}

); }