feat: info icon on all PageHeader pages + Call Desk header restyled

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

src/pages/all-leads.tsx

@@ -246,6 +246,7 @@ export const AllLeadsPage = () => {
             <PageHeader
                 title="All Leads"
                 subtitle={`${total} total`}
+                infoText="Campaign-sourced marketing leads. Organic callers are on the Contacts page."
                 controls={
                     <>
                         <div className="w-56">

src/pages/appointments-v2.tsx

@@ -555,6 +555,7 @@ export const AppointmentsPageV2 = () => {
             <PageHeader
                 title="Appointments"
                 badge={filtered.length}
+                infoText="All scheduled, completed, cancelled, and rescheduled appointments. Click the eye icon to view details or reschedule."
                 controls={
                     <div className="w-56">
                         <Input

src/pages/call-desk.tsx

@@ -16,6 +16,8 @@ import { ActiveCallCard } from '@/components/call-desk/active-call-card';
 import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
 import { cx } from '@/utils/cx';
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
+import { faCircleInfo } from '@fortawesome/pro-duotone-svg-icons';
 
 export const CallDeskPage = () => {
     const { user } = useAuth();
@@ -166,11 +168,14 @@ export const CallDeskPage = () => {
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Compact header: title + name on left, status + toggle on right */}
-            <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-3">
-                <div className="flex items-center gap-3">
+            {/* Header — matches PageHeader visual pattern */}
+            <div className="flex shrink-0 items-center justify-between px-6 py-3">
+                <div className="flex items-center gap-2">
                     <h1 className="text-lg font-bold text-primary">Call Desk</h1>
-                    <span className="text-sm text-tertiary">{user.name}</span>
+                    <span className="text-sm text-tertiary ml-1">{user.name}</span>
+                    <span className="flex size-5 items-center justify-center text-fg-quaternary" title="Your active worklist — missed calls, leads, and follow-ups prioritised by SLA.">
+                        <FAIcon icon={faCircleInfo} className="size-4" />
+                    </span>
                 </div>
 
                 <div className="flex items-center gap-2">

src/pages/call-history.tsx

@@ -194,6 +194,7 @@ export const CallHistoryPage = () => {
                     title={isAdmin ? 'Call History' : 'My Call History'}
                     badge={filteredCalls.length}
                     subtitle={isAdmin ? `${completedCount} completed \u00B7 ${missedCount} missed` : `${completedCount} completed`}
+                    infoText={isAdmin ? 'All calls across all agents with recordings and dispositions.' : 'Your answered inbound and outbound calls.'}
                     controls={
                         <>
                             <div className="w-44">

src/pages/contacts.tsx

@@ -116,7 +116,7 @@ export const ContactsPage = () => {
             <PageHeader
                 title="Contacts"
                 badge={contacts.length}
-                subtitle="People who reached out directly — phone, walk-in, referral. Not sourced from campaigns."
+                infoText="People who reached out directly — phone, walk-in, referral. Not sourced from campaigns."
                 controls={
                     <>
                         <div className="w-56">

src/pages/missed-calls.tsx

@@ -242,6 +242,7 @@ export const MissedCallsPage = () => {
             <PageHeader
                 title="Missed Calls"
                 badge={calls.length}
+                infoText="Inbound calls that were not answered. Agents can call back from here."
                 controls={
                     <>
                         <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />

src/pages/patients.tsx

@@ -131,7 +131,7 @@ export const PatientsPage = () => {
             <PageHeader
                 title="All Patients"
                 badge={filteredPatients.length}
-                subtitle="Manage and view patient records"
+                infoText="Manage and view patient records"
                 controls={
                     <>
                         <button