Add live clock to dashboard header in 12hr format

Displays current time before the date separated by a vertical bar:
"6:30 PM | Thursday, March 12, 2026". Updates every 60 seconds.
Uses tabular-nums for stable digit widths.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/dashboard/DashboardPage.tsx

@@ -42,6 +42,13 @@ export default function DashboardPage() {
   const [quickAddType, setQuickAddType] = useState<'event' | 'todo' | 'reminder' | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [clockNow, setClockNow] = useState(() => new Date());
+
+  // Live clock — update every minute
+  useEffect(() => {
+    const interval = setInterval(() => setClockNow(new Date()), 60_000);
+    return () => clearInterval(interval);
+  }, []);
 
   // Click outside to close dropdown
   useEffect(() => {
@@ -173,7 +180,9 @@ export default function DashboardPage() {
           </h1>
           <div className="flex items-center gap-2 mt-1">
             <p className="text-muted-foreground text-sm">
-              {format(new Date(), 'EEEE, MMMM d, yyyy')}
+              <span className="tabular-nums">{format(clockNow, 'h:mm a')}</span>
+              <span className="mx-1.5 text-muted-foreground/30">|</span>
+              {format(clockNow, 'EEEE, MMMM d, yyyy')}
             </p>
             {updatedAgo && (
               <>