docs: Comprehensive documentation update with multi-timeframe lessons

- Updated README.md with automation features and Docker troubleshooting
- Enhanced copilot-instructions.md with multi-timeframe patterns and Docker workflows
- Created DEVELOPMENT_GUIDE.md with comprehensive implementation patterns
- Added troubleshooting section for volume mount issues
- Documented fresh implementation approach vs file editing
- Included performance optimization tips and future roadmap
- Added testing strategies and common pitfall solutions

Key knowledge preserved:
- Multi-timeframe UI patterns and state management
- Docker Compose v2 syntax and volume mount troubleshooting
- Fresh file creation approach for problematic edits
- Complete automation page implementation examples

.github/copilot-instructions.instructions.md

@@ -55,6 +55,58 @@ npm run docker:exec       # Shell access for debugging inside container
 - **Development**: External port `9001` → Internal port `3000` (http://localhost:9001)
 - **Production**: External port `9000` → Internal port `3000` (http://localhost:9000)
 
+### Docker Volume Mount Troubleshooting
+**Common Issue**: File edits not reflecting in container due to volume mount sync issues.
+
+**Solutions:**
+1. **Fresh Implementation Approach**: When modifying existing files fails, create new files (e.g., `page-v2.js`) instead of editing corrupted files
+2. **Container Restart**: `docker compose -f docker-compose.dev.yml restart app`
+3. **Full Rebuild**: `docker compose -f docker-compose.dev.yml down && docker compose -f docker-compose.dev.yml up --build`
+4. **Manual Copy**: Use `docker cp` to copy files directly into container for immediate testing
+5. **Avoid sed/awk**: Direct text manipulation commands often corrupt JSX syntax - prefer file replacement
+
+**Volume Mount Verification:**
+```bash
+# Test volume mount sync
+echo "test-$(date)" > test-volume-mount.txt
+docker compose -f docker-compose.dev.yml exec app cat test-volume-mount.txt
+```
+
+### Multi-Timeframe Feature Copy Pattern
+When copying multi-timeframe functionality between pages:
+
+**Step 1: Identify Source Implementation**
+```bash
+# Search for existing timeframe patterns
+grep -r "timeframes.*=.*\[" app/ --include="*.js" --include="*.jsx"
+grep -r "selectedTimeframes" app/ --include="*.js" --include="*.jsx"
+```
+
+**Step 2: Copy Core State Management**
+```javascript
+// Always include these state hooks
+const [selectedTimeframes, setSelectedTimeframes] = useState(['1h', '4h']);
+const [balance, setBalance] = useState({ balance: 0, collateral: 0 });
+
+// Essential toggle function
+const toggleTimeframe = (tf) => {
+  setSelectedTimeframes(prev => 
+    prev.includes(tf) ? prev.filter(t => t !== tf) : [...prev, tf]
+  );
+};
+```
+
+**Step 3: Copy UI Components**
+- Timeframe checkbox grid
+- Preset buttons (Scalping, Day Trading, Swing Trading)
+- Auto-sizing position calculator
+- Formatted balance display
+
+**Step 4: Avoid Docker Issues**
+- Create new file instead of editing existing if volume mount issues persist
+- Use fresh filename like `page-v2.js` or `automation-v2/page.js`
+- Test in container before committing
+
 ### API Route Structure
 All core functionality exposed via Next.js API routes:
 ```typescript
@@ -105,6 +157,70 @@ const LAYOUT_URLS = {
 - `components/Dashboard.tsx` - Main trading dashboard with real Drift positions
 - `components/AdvancedTradingPanel.tsx` - Drift Protocol trading interface
 
+### Page Structure & Multi-Timeframe Implementation
+- `app/analysis/page.js` - Original analysis page with multi-timeframe functionality
+- `app/automation/page.js` - Original automation page (legacy, may have issues)
+- `app/automation-v2/page.js` - **NEW**: Clean automation page with full multi-timeframe support
+- `app/automation/page-v2.js` - Alternative implementation, same functionality as automation-v2
+
+**Multi-Timeframe Architecture Pattern:**
+```javascript
+// Standard timeframes array - use this exact format
+const timeframes = ['5m', '15m', '30m', '1h', '2h', '4h', '1d'];
+
+// State management for multi-timeframe selection
+const [selectedTimeframes, setSelectedTimeframes] = useState(['1h', '4h']);
+
+// Toggle function with proper array handling
+const toggleTimeframe = (tf) => {
+  setSelectedTimeframes(prev => 
+    prev.includes(tf) 
+      ? prev.filter(t => t !== tf)  // Remove if selected
+      : [...prev, tf]                // Add if not selected
+  );
+};
+
+// Preset configurations for trading styles
+const presets = {
+  scalping: ['5m', '15m', '1h'],
+  day: ['1h', '4h', '1d'],
+  swing: ['4h', '1d']
+};
+```
+
+**UI Pattern for Timeframe Selection:**
+```jsx
+// Checkbox grid layout with visual feedback
+<div className="grid grid-cols-4 gap-2 mb-4">
+  {timeframes.map(tf => (
+    <button
+      key={tf}
+      onClick={() => toggleTimeframe(tf)}
+      className={`p-2 rounded border transition-all ${
+        selectedTimeframes.includes(tf)
+          ? 'bg-blue-600 border-blue-500 text-white'
+          : 'bg-gray-700 border-gray-600 text-gray-300 hover:bg-gray-600'
+      }`}
+    >
+      {tf}
+    </button>
+  ))}
+</div>
+
+// Preset buttons for quick selection
+<div className="flex gap-2 mb-4">
+  {Object.entries(presets).map(([name, tfs]) => (
+    <button
+      key={name}
+      onClick={() => setSelectedTimeframes(tfs)}
+      className="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm"
+    >
+      {name.charAt(0).toUpperCase() + name.slice(1)}
+    </button>
+  ))}
+</div>
+```
+
 ## Environment Variables
 ```bash
 # AI Analysis (Required)