Update

docs/UX-DEBUGGING.md

@@ -0,0 +1,89 @@
+# MotoVaultPro Debug Console Configuration
+
+## CRITICAL: Console Logs Are Stripped in Production Builds
+
+**Before debugging any UX/UI issues, ALWAYS enable console logging first.**
+
+## Production Build Console Stripping
+
+The Vite build configuration in `frontend/vite.config.ts` aggressively removes ALL console statements in production:
+
+```typescript
+// Lines 60-62: Terser removes console logs
+terserOptions: {
+  compress: {
+    drop_console: true, // ← This removes ALL console.log statements
+    drop_debugger: true,
+    pure_funcs: ['console.log', 'console.info', 'console.debug'],
+  }
+}
+
+// Line 74: ESBuild also removes console logs
+esbuild: {
+  drop: ['console', 'debugger'], // ← Additional console removal
+}
+```
+
+## Debug Protocol for UX Issues
+
+When debugging **any** UX/UI problems (buttons not working, state not updating, components not rendering):
+
+### 1. Enable Console Logging FIRST
+```typescript
+// In frontend/vite.config.ts
+
+// TEMPORARILY change these lines:
+drop_console: false, // Keep console logs for debugging
+// pure_funcs: ['console.log', 'console.info', 'console.debug'], // Comment out
+
+// AND:
+drop: ['debugger'], // Keep console, only drop debugger
+```
+
+### 2. Add Debug Statements
+```typescript
+// Example debug patterns:
+console.log('[DEBUG] Component render - state:', someState);
+console.log('[DEBUG] useEffect triggered - deps:', dep1, dep2);
+console.log('[DEBUG] Button clicked - current state:', state);
+console.log('[DEBUG] Store action called:', actionName, payload);
+```
+
+### 3. Rebuild and Test
+```bash
+make rebuild  # Required to apply vite.config.ts changes
+```
+
+### 4. Fix the Issue
+Use browser dev tools console output to identify the root cause.
+
+### 5. Clean Up and Restore Production Settings
+```typescript
+// Restore production console stripping:
+drop_console: true, // Remove console logs in production
+pure_funcs: ['console.log', 'console.info', 'console.debug'],
+drop: ['console', 'debugger'], // Additional cleanup
+```
+
+Remove debug console.log statements and rebuild.
+
+## Common UX Issue Patterns
+
+1. **Buttons not working**: Usually state management or event handler issues
+2. **Components not re-rendering**: Missing dependencies in hooks or store subscription problems
+3. **useEffect fighting with user actions**: Dependencies causing infinite loops
+4. **Store state not updating**: Action functions not properly bound or called
+
+## Example: The Sidebar Issue
+
+The sidebar X button wasn't working because:
+- `useEffect` dependency array included `sidebarOpen`
+- When user clicked X → `sidebarOpen` became `false`
+- `useEffect` fired → immediately called `setSidebarOpen(true)`
+- User action was overridden by the `useEffect`
+
+**Without console debugging enabled, this was invisible!**
+
+## Key Reminder
+
+**Never assume JavaScript is working correctly in production builds without console debugging enabled first.** The aggressive console stripping makes silent failures very common.