feat: notifikasi real-time bug baru via WebSocket

- presence.ts: tambah notifSubs (ADMIN+DEVELOPER) dan broadcastNotification
- app.ts: broadcast new_bug event setelah bug dibuat, update WS handler
- usePresence: terima callback onNewBug, expose NewBugPayload type
- DashboardLayout: pasang usePresence, tampilkan Mantine notification saat bug baru masuk

src/frontend/components/DashboardLayout.tsx

@@ -1,5 +1,6 @@
 import { APP_CONFIGS } from '@/frontend/config/appMenus'
 import { useLogout, useSession } from '@/frontend/hooks/useAuth'
+import { usePresence } from '@/frontend/hooks/usePresence'
 import React from 'react'
 import {
   ActionIcon,
@@ -24,12 +25,14 @@ import {
   useMantineColorScheme
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
 import { useQuery } from '@tanstack/react-query'
 import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router'
 import {
   TbAlertTriangle,
   TbApps,
   TbArrowLeft,
+  TbBug,
   TbChevronRight,
   TbClock,
   TbDashboard,
@@ -64,6 +67,20 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   const user = sessionData?.user
   const logout = useLogout()
 
+  // ─── Real-time bug notifications ─────────────────────
+  usePresence((bug) => {
+    const appLabel = bug.appId ? bug.appId.toUpperCase() : 'Unknown App'
+    notifications.show({
+      id: `new-bug-${bug.id}`,
+      title: `New bug report — ${appLabel}`,
+      message: bug.description.length > 80 ? `${bug.description.slice(0, 80)}…` : bug.description,
+      color: 'red',
+      icon: React.createElement(TbBug, { size: 18 }),
+      autoClose: 8000,
+      withBorder: true,
+    })
+  })
+
   // Redirect USER role to profile (pending approval)
   React.useEffect(() => {
     if (!sessionLoading && user?.role === 'USER') {