feat: call desk redesign — 2-panel layout, collapsible sidebar, inline AI, ringtone

- Collapsible sidebar with Jotai atom (icon-only mode, persisted to localStorage)
- 2-panel call desk: worklist (60%) + context panel (40%) with AI + Lead 360 tabs
- Inline AI call prep card — known lead summary or unknown caller script
- Active call card with compact Answer/Decline buttons
- Worklist panel with human-readable labels, priority badges, click-to-select
- Context panel auto-switches to Lead 360 when lead selected or call incoming
- Browser ringtone via Web Audio API on incoming calls
- Sonner + Untitled UI IconNotification for toast system
- apiClient pattern: centralized post/get/graphql with auto-toast on errors
- Remove duplicate avatar from top bar, hide floating widget on call desk
- Fix Link routing in collapsed sidebar (was using <a> causing full page reload)
- Fix GraphQL field names: adStatus→status, platformUrl needs subfield selection
- Silent mode for DataProvider queries to prevent toast spam

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

src/components/call-desk/call-prep-card.tsx

@@ -0,0 +1,95 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSparkles, faUserPlus } from '@fortawesome/pro-duotone-svg-icons';
+import { Badge } from '@/components/base/badges/badges';
+import { Button } from '@/components/base/buttons/button';
+import { formatShortDate } from '@/lib/format';
+import type { Lead, LeadActivity } from '@/types/entities';
+
+interface CallPrepCardProps {
+    lead: Lead | null;
+    callerPhone: string;
+    activities: LeadActivity[];
+}
+
+export const CallPrepCard = ({ lead, callerPhone, activities }: CallPrepCardProps) => {
+    if (!lead) {
+        return <UnknownCallerPrep callerPhone={callerPhone} />;
+    }
+
+    const leadActivities = activities
+        .filter((a) => a.leadId === lead.id)
+        .sort((a, b) => {
+            const dateA = a.occurredAt ?? a.createdAt ?? '';
+            const dateB = b.occurredAt ?? b.createdAt ?? '';
+            return new Date(dateB).getTime() - new Date(dateA).getTime();
+        })
+        .slice(0, 3);
+
+    return (
+        <div className="rounded-xl bg-brand-primary p-4">
+            <div className="mb-2 flex items-center gap-1.5">
+                <FontAwesomeIcon icon={faSparkles} className="size-3.5 text-fg-brand-primary" />
+                <span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">AI Call Prep</span>
+            </div>
+
+            {lead.aiSummary && (
+                <p className="text-sm text-primary">{lead.aiSummary}</p>
+            )}
+
+            {lead.aiSuggestedAction && (
+                <span className="mt-2 inline-block rounded-lg bg-brand-solid px-3 py-1.5 text-xs font-semibold text-white">
+                    {lead.aiSuggestedAction}
+                </span>
+            )}
+
+            {!lead.aiSummary && !lead.aiSuggestedAction && (
+                <p className="text-sm text-quaternary">No AI insights available for this lead.</p>
+            )}
+
+            {leadActivities.length > 0 && (
+                <div className="mt-3 border-t border-brand pt-3">
+                    <span className="text-xs font-semibold text-secondary">Recent Activity</span>
+                    <div className="mt-1.5 space-y-1">
+                        {leadActivities.map((a) => (
+                            <div key={a.id} className="flex items-start gap-2">
+                                <Badge size="sm" color="gray" className="shrink-0 mt-0.5">{a.activityType}</Badge>
+                                <span className="flex-1 text-xs text-secondary">{a.summary}</span>
+                                {a.occurredAt && (
+                                    <span className="shrink-0 text-xs text-quaternary">{formatShortDate(a.occurredAt)}</span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const UnknownCallerPrep = ({ callerPhone }: { callerPhone: string }) => (
+    <div className="rounded-xl bg-secondary p-4">
+        <div className="mb-2 flex items-center gap-1.5">
+            <FontAwesomeIcon icon={faSparkles} className="size-3.5 text-fg-quaternary" />
+            <span className="text-xs font-bold uppercase tracking-wider text-tertiary">Unknown Caller</span>
+        </div>
+        <p className="text-sm text-secondary">
+            No record found for <span className="font-semibold">{callerPhone || 'this number'}</span>
+        </p>
+        <div className="mt-3 space-y-1.5">
+            <p className="text-xs font-semibold text-secondary">Suggested script:</p>
+            <ul className="space-y-1 text-xs text-tertiary">
+                <li>• Ask for name and date of birth</li>
+                <li>• What service are they interested in?</li>
+                <li>• How did they hear about Global Hospital?</li>
+                <li>• Offer to book a consultation</li>
+            </ul>
+        </div>
+        <div className="mt-3">
+            <Button size="sm" color="secondary" iconLeading={({ className }: { className?: string }) => (
+                <FontAwesomeIcon icon={faUserPlus} className={className} />
+            )}>
+                Create Lead
+            </Button>
+        </div>
+    </div>
+);