Merge branch 'improve-notifications-bfv1'

Author: knowsuchagency

public/goat.jpeg

@@ -147,7 +147,7 @@ async function sendPushoverNotification(
 }
 
 // Broadcast notification to UI via WebSocket
-function broadcastUINotification(payload: NotificationPayload, playSound: boolean): void {
+function broadcastUINotification(payload: NotificationPayload, playSound: boolean, isCustomSound: boolean): void {
   const notificationType =
     payload.type === 'pr_merged' || payload.type === 'plan_complete' ? 'success' : 'info'
 
@@ -160,6 +160,7 @@ function broadcastUINotification(payload: NotificationPayload, playSound: boolea
       notificationType,
       taskId: payload.taskId,
       playSound, // Tell desktop app to play local sound
+      isCustomSound, // Whether user has custom sound file (affects notification icon)
     },
   })
 }
@@ -178,9 +179,10 @@ export async function sendNotification(payload: NotificationPayload): Promise<No
   // Determine if sound should be played
   // Pass this to UI so desktop app can play sound locally
   const playSound = settings.sound?.enabled ?? false
+  const isCustomSound = !!settings.sound?.customSoundFile
 
   // Always broadcast to UI (with sound flag for desktop app)
-  broadcastUINotification(payload, playSound)
+  broadcastUINotification(payload, playSound, isCustomSound)
 
   // Sound (macOS only)
   if (settings.sound?.enabled) {

server/services/notification-service.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useTheme } from 'next-themes'
 import { toast } from 'sonner'
 
 interface TaskUpdatedMessage {
@@ -16,6 +17,7 @@ interface NotificationMessage {
     notificationType: 'success' | 'info' | 'warning' | 'error'
     taskId?: string
     playSound?: boolean
+    isCustomSound?: boolean
   }
 }
 
@@ -31,6 +33,7 @@ const RECONNECT_INTERVAL = 2000
 
 export function useTaskSync() {
   const queryClient = useQueryClient()
+  const { resolvedTheme } = useTheme()
   const wsRef = useRef<WebSocket | null>(null)
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const reconnectAttemptsRef = useRef(0)
@@ -43,23 +46,51 @@ export function useTaskSync() {
         if (message.type === 'task:updated') {
           queryClient.invalidateQueries({ queryKey: ['tasks'] })
         } else if (message.type === 'notification' && 'payload' in message) {
-          const { title, message: description, notificationType, playSound } = (message as NotificationMessage).payload
+          const { id, title, message: description, notificationType, playSound, isCustomSound } = (message as NotificationMessage).payload
+
+          // Determine icon: goat if default sound enabled, otherwise theme-appropriate logo
+          const useGoat = playSound && !isCustomSound
+          const iconUrl = useGoat
+            ? '/goat.jpeg'
+            : resolvedTheme === 'dark'
+              ? '/logo-dark.jpg'
+              : '/logo-light.jpg'
+
+          // Create icon element for toast
+          const icon = (
+            <img
+              src={iconUrl}
+              alt=""
+              className="size-4 rounded-sm object-cover"
+            />
+          )
+
+          // Show toast with custom icon
           switch (notificationType) {
             case 'success':
-              toast.success(title, { description })
+              toast.success(title, { description, icon })
               break
             case 'error':
-              toast.error(title, { description })
+              toast.error(title, { description, icon })
               break
             case 'warning':
-              toast.warning(title, { description })
+              toast.warning(title, { description, icon })
               break
             case 'info':
             default:
-              toast.info(title, { description })
+              toast.info(title, { description, icon })
               break
           }
 
+          // Show browser notification (skip in iframe - desktop app handles natively)
+          if ('Notification' in window && window.parent === window && Notification.permission === 'granted') {
+            new Notification(title, {
+              body: description,
+              icon: iconUrl,
+              tag: id,
+            })
+          }
+
           // Play notification sound if enabled
           // Try custom sound first (/api/uploads/sound), fall back to default
           // Use localStorage to prevent multiple tabs from playing the same sound
@@ -96,7 +127,7 @@ export function useTaskSync() {
         // Ignore parse errors
       }
     },
-    [queryClient]
+    [queryClient, resolvedTheme]
   )
 
   const connect = useCallback(() => {
@@ -135,6 +166,13 @@ export function useTaskSync() {
   // Keep connectRef in sync with connect
   connectRef.current = connect
 
+  // Request browser notification permission on first load
+  useEffect(() => {
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission()
+    }
+  }, [])
+
   useEffect(() => {
     connect()