# Frontend Components - Bug Analysis

> 20 issues found in `admin/src/`

---

## CRITICAL (3)

### 1. Stale Closure in useRealtimeEvent
**File:** `context/RealtimeContext.jsx:261-267`
**Description:** `callback` in dependency array causes subscription churn. Old subscriptions not cleaned properly.
**Impact:** Memory leaks, duplicate events, missed events.
**Fix:** Use `useCallback` in consuming components for stable callback references.

### 2. Missing MediaRecorder/Socket Cleanup
**File:** `components/LiveCopilot.jsx:145-164, 219-234`
**Description:** WebSocket and AudioWorklet not guaranteed cleanup on unmount during initialization. AudioContext may not close on all exit paths.
**Impact:** Audio device locks, WebSocket leaks, browser memory exhaustion.
**Fix:** Proper cleanup in useEffect return, validate socket state before operations.

### 3. Race Condition in CallContext.endCall
**File:** `context/CallContext.jsx:250-277`
**Description:** Async `generateAutoSummary` runs but `setActiveLead(null)` happens regardless. Component may unmount during async op.
**Impact:** "Can't perform state update on unmounted component" warnings, state corruption.
**Fix:** Track mounted state in useRef.

---

## HIGH (6)

### 4. No Error Handling for Realtime Events
**Files:** `pages/Dashboard.jsx:51-66`, `pages/Messages.jsx`
**Description:** `useRealtimeEvent` callbacks can throw errors not caught by ErrorBoundary.
**Impact:** Unhandled rejections, app instability.
**Fix:** Add try-catch in all realtime callbacks.

### 5. Silent Session Save Failure
**File:** `components/LiveCopilot.jsx:883-903`
**Description:** `aiApi.saveCopilotSession` errors only logged, no user feedback.
**Impact:** Silent data loss, user unaware call data wasn't saved.
**Fix:** Show error toast/notification.

### 6. Missing Array Bounds Check
**File:** `components/LiveCopilot.jsx:502-504`
**Description:** `suggestions[suggestionIndex]` accessed without bounds validation.
**Impact:** Feedback doesn't send silently.
**Fix:** `if (!suggestion || suggestionIndex >= suggestions.length) return;`

### 7. Memory Leak in useLongPress
**File:** `hooks/useLongPress.js:80-82`
**Description:** `handleMove` listeners not removed if component unmounts during long-press.
**Impact:** Memory accumulation, duplicate handlers.
**Fix:** Add useEffect cleanup.

### 8. Stale Closure in useClickOutside
**File:** `hooks/useClickOutside.js:9-24`
**Description:** Callback changes cause re-subscriptions.
**Fix:** Document requirement for `useCallback` wrapper.

### 9. Missing Null Check on Lead Prop
**File:** `components/TwilioCall.jsx:287`
**Description:** `lead.first_name` accessed without null check on `lead` itself.
**Fix:** `if (!lead) return null;` at component top.

---

## MEDIUM (6)

### 10. Race Condition in Messages Page
**File:** `pages/Messages.jsx`
**Description:** Multiple async operations without AbortController.
**Impact:** Stale data overwrites newer data.
**Fix:** Cancel in-flight requests on new searches.

### 11. Inline Callbacks in useRealtimeEvent
**File:** `pages/Dashboard.jsx:51-66`
**Description:** Callbacks created inline may cause re-subscriptions.
**Fix:** Memoize with useCallback.

### 12. Missing Image Error Handler
**File:** `pages/CallList.jsx:299`
**Description:** Avatar `img` has no `onError` fallback.
**Impact:** Broken image icon shown.

### 13. Race Condition in CallOutcomeSheet
**File:** `components/CallOutcomeSheet.jsx:42-56, 58-115`
**Description:** Props change while save executing causes inconsistency.
**Fix:** Track mounted status.

### 14. Excessive Re-renders in LiveCopilot
**File:** `components/LiveCopilot.jsx:628, 652`
**Description:** `setTranscript` called on every interim result.
**Impact:** Battery drain, dropped frames on mobile.
**Fix:** Debounce interim results.

### 15. Missing Navigate Check
**File:** `context/PowerDialerContext.jsx:55-57, 134-137`
**Description:** `navigateRef.current` used without null check.
**Impact:** Power dialer navigation silently fails.
**Fix:** `if (navigateRef.current)` guard.

---

## LOW (5)

### 16. Missing Loading States
**File:** `pages/LeadProfile.jsx`
**Description:** Some async operations lack visual loading feedback.

### 17. Missing Aria Labels
**Files:** TwilioCall.jsx, LiveCopilot.jsx, CallList.jsx
**Description:** Icon-only buttons missing accessibility labels.
**Fix:** Add `aria-label` to all icon buttons.

### 18. Fixed Position Overlap
**File:** `components/TwilioCall.jsx:290-294`
**Description:** Fixed positioning may overlap on notched devices.
**Fix:** Test on various devices.

### 19. Missing Form Validation
**File:** `pages/LeadProfile.jsx:193-210`
**Description:** No validation before API save.
**Fix:** Add client-side validation.

### 20. Native Alert Usage
**Files:** LeadProfile.jsx, CallOutcomeSheet.jsx
**Description:** Using `alert()` instead of toast component.
**Fix:** Use consistent toast/notification system.