feat: notification bell in PageHeader + remove wasted top bar row for supervisors

- PageHeader: renders NotificationBell when isAdmin — bell now appears
  on every page that uses PageHeader (leads, contacts, appointments,
  patients, call history, missed calls, call recordings, live monitor,
  team performance, settings)
- app-shell: top bar row only renders for agents (network indicator +
  status toggle). Supervisors no longer see a wasted empty row.
- Call Recordings: TopBar → PageHeader with badge + info icon
- Live Monitor: TopBar → PageHeader with badge + info icon
- Team Performance: TopBar → PageHeader with info icon
- Settings: TopBar → PageHeader with info icon
- Missed Calls: underline tabs → custom pills (consistent with all pages)
- Desktop overlay app-shell synced with same changes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/live-monitor.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHeadset, faPhoneVolume, faPause, faClock, faSparkles, faCalendarCheck, faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons';
-import { TopBar } from '@/components/layout/top-bar';
+import { PageHeader } from '@/components/layout/page-header';
 import { Badge } from '@/components/base/badges/badges';
 import { Table } from '@/components/application/table/table';
 import { BargeControls } from '@/components/call-desk/barge-controls';
@@ -182,7 +182,11 @@ export const LiveMonitorPage = () => {
 
     return (
         <>
-            <TopBar title="Live Call Monitor" subtitle="Monitor, whisper, or barge into active calls" />
+            <PageHeader
+                title="Live Call Monitor"
+                badge={activeCalls.length}
+                infoText="Monitor, whisper, or barge into active calls in real-time."
+            />
 
             <div className="flex flex-1 overflow-hidden">
                 {/* Left panel — KPIs + call list */}