Cline rules

1# Inspiration Explorer - Current Features
2 
3## Core Functionality
4 
5### 1. Interactive Graph Visualization
6- Uses React Flow to create an interactive, node-based graph of inspirations
7- Nodes represent artists/concepts and their inspirations
8- Directed edges show influence relationships with "inspires" labels
9- Graph nodes can be moved, connected, and interacted with
10- Smooth animations for connections and node transitions
11- Zoom and pan controls for navigating the inspiration map
12- Intelligent node reorganization prevents overlapping even in complex graphs
13- Advanced collision detection maintains optimal spacing between nodes
14 
15### 2. Inspiration Search
16- Users can enter a name (e.g., "Daft Punk") in a retro-styled input box
17- Searches trigger API calls to find related inspirations 
18- Results are displayed as connected nodes around the search node
19- New nodes are positioned in a circular pattern around the source
20- Each search creates 3-5 new inspiration nodes automatically connected to the source
21- Loading state provides visual feedback during searches
22- Duplicate search prevention system avoids creating redundant nodes
23 
24### 3. Expandable Network
25- Any node can be clicked to enter edit mode
26- Users can search from any node to expand the inspiration network
27- Creates a tree-like structure of influences and connections
28- Unlimited depth of exploration through nested inspiration searching
29- Interactive design encourages continuous exploration
30- Nodes appear with staggered animation for a streaming effect
31- Golden ratio-based positioning for visually balanced layouts
32 
33## User Interface
34 
35### 1. Retro-UI Integration
36- Uses the pixel-retroui library for consistent retro aesthetics
37- Custom styled input fields with retro computing feel
38  - Placeholder text disappears automatically when the input is focused, and only reappears if the input is blurred and empty (no need for manual deletion)
39- Monospace fonts (VT323, Press Start) for authentic retro typography
40- Retrowave/synthwave-inspired color palette
41 
42### 2. Node Styling
43- Nodes feature glowing borders and hover effects
44- Color-coded elements (pink headers, blue type labels)
45- Semi-transparent backgrounds with retro-futuristic look
46- Interactive states (editable, static) with appropriate visual cues
47- Consistent pixel-perfect design across all elements
48- Animated pop-in effects when new nodes are created
49- Scale transformation animations for engaging appearance
50 
51### 3. Visual Effects
52- Gradient background with retrowave/synthwave aesthetics
53- CRT scanline effect overlay for retro monitor feel
54- Subtle noise texture mimicking old displays
55- Glowing text and borders with light bloom effects
56- Animated connection lines between related inspirations
57- Staggered appearance of search results for a streaming-data feel
58- Smooth scaling transitions for a polished user experience
59 
60## Technical Features
61 
62### 1. Data Structure
63- Typed interfaces for inspirations, nodes, and edges
64- Consistent data model with clear relationships
65- Reactive state management for real-time graph updates
66- Advanced positioning algorithm using golden ratio for optimal layouts
67 
68### 2. API Integration
69- REST API endpoint for querying inspirations
70- OpenAI integration for generating inspiration data
71- Fallback to mock data when API key isn't available
72- Error handling with user-friendly messages
73- Response parsing and data normalization
74 
75### 3. Interaction Handling
76- Click events for node selection and editing
77- Keyboard controls for search submission
78- Drag interactions for node repositioning
79- Connection handling between nodes
80- State management for editing and display modes
81- Collision detection to prevent node overlap
82- Sophisticated positioning system for complex networks
83 
84## User Experience
85 
86### 1. Intuitive Onboarding
87- Initial node prompts users to "Enter a name..."
88- Clear instructions within the interface
89- Visual cues guide users through the exploration flow
90- Error states with helpful messages
91- Loading indicators during search operations
92 
93### 2. Responsive Layout
94- Full-viewport design maximizes exploration space
95- Adaptable layout works across different screen sizes
96- Clear focus on the graph as the primary interface
97- Unobtrusive controls that don't interfere with the exploration
98- Smart node positioning ensures readability even with many connections
99 
100### 3. Performance Optimization
101- Dynamic loading of node data
102- Efficient rendering of complex graph structures
103- Smooth animations even with many nodes
104- Client-side data management for responsive interactions
105- Throttled operations to prevent UI blocking during complex layouts
106- Efficient collision detection algorithms for smooth experience
107