# Admin Panel Features (`admin.html`)

This document outlines the comprehensive list of features, background systems, and UI components implemented in the `admin.html` dashboard.

## 1. Authentication & Security
* **Two-Factor Authentication Flow:** Secure two-stage login requiring a Username/Password followed by an OTP validation.
* **Persistent Sessions:** Uses JWT tokens (`martech_admin_creds`) stored in `localStorage` to automatically log administrators back in upon page refresh.
* **Proactive Permission Requesting:** A clean, non-intrusive modal overlay prompts the admin to allow Desktop Notifications and Audio playback immediately after the first login. This ensures the background notification engine has the required browser unlocks to function.

## 2. Real-Time Notification Engine
* **Background Tab Resilience (Web Worker):** Utilizes a dedicated Web Worker (`_NOTIF_WORKER_SRC`) running off a Blob URL to continuously poll the server every 3 seconds. This entirely bypasses modern browsers' aggressive throttling of `setInterval` in background tabs.
* **Native OS Popups (Service Worker):** Registers `/sw.js` to trigger native desktop notifications. Using the `renotify: true` flag, the OS will reliably play the system notification sound even if the tag deduplicates the visual popup. Clicking the popup automatically brings the minimized/backgrounded Admin tab back into focus.
* **Hybrid Audio System:** 
  * Generates 16-bit PCM WAV blobs entirely programmatically in JavaScript without external dependencies.
  * Uses `HTMLAudioElement` (`new Audio()`) to play these WAVs, as it is permitted to play in background tabs (unlike `AudioContext`).
  * Features dual sound profiles: a 3-tone chime for new requests (`playNotifSound`) and a descending sweep for exits (`playDisconnectSound`).
* **State Persistence & Deduplication:** Strictly follows the **10 Production Rules** for notifications:
  * Uses `localStorage` (`martech_notified_ids`) to ensure a queued session fires exactly one notification, surviving page refreshes.
  * Tracks individual `alert_ids` (`martech_alert_ids`) to ensure periodic reminder alerts fire accurately once per alert.
  * Dynamically cleans up queued IDs when a user leaves the queue, allowing the system to naturally re-notify if they queue up again later.

## 3. In-App Notification Center
* **Persistent History:** A dropdown menu stores the 50 most recent notifications, persisting for 24 hours via `localStorage` (`martech_notifications`).
* **Read / Unread State:** Notifications have distinct visual states for Read (grayed out text) and Unread.
* **Actionable Items:**
  * **Unread Badge:** A dynamic red badge alerts the admin to unseen notifications. Opening the bell dropdown instantly marks all visible notifications as read.
  * **Dismissal:** Individual "X" buttons allow admins to clear specific notifications from the history.
  * **Quick Navigation:** Clicking any notification instantly switches the view to the Live Sessions tab and loads that specific user's chat thread.
* **Global Snooze:** A toggle allows admins to silence all audio and visual notifications. This state is saved in `localStorage` (`martech_snoozed`).

## 4. Dashboard & Analytics
* **Summary Metrics:** Real-time calculation of key metrics including Total Sessions, Active Users, Escalations, and Average Wait Time.
* **Interactive Charting:** Integrates `Chart.js` to render a 7-day trailing graph comparing total sessions against human intervention requests.

## 5. Live Session Management
* **Dynamic Filtering:** Sort the user sessions list by `All`, `Queued` (users actively waiting for a human), and `Blocked`.
* **Live Chat Interface:** Administrators can view the live chat transcript syncing between the AI and the user.
* **Human Handoff:** Admins can "Take Over" the chat, temporarily disabling the AI and allowing the admin to message the user directly from the panel.
* **Resolution & Deletion:** Admins can send the user back to the AI, or permanently delete the session/chat. Deleting a session dynamically scrubs its footprint from the `localStorage` notification queues to prevent cache bloat.

## 6. WhatsApp System Settings
* **Configuration UI:** A dedicated tab allows administrators to dynamically update system variables via the backend API, such as the AI's System Prompt, the Business Phone Number, and the Auto-Response message.