@shepai/cli 1.72.9-pr220.99e5e13 → 1.72.9-pr220.b37503f

package/web/.next/standalone/src/presentation/web/hooks/use-notifications.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import type { NotificationEvent } from '@shepai/core/domain/generated/output';
@@ -9,6 +9,11 @@ import { useAgentEventsContext } from './agent-events-provider';
 import { useSoundAction } from './use-sound-action';
 import type { SoundAction } from './use-sound-action';
 
+export interface UseNotificationsResult {
+  requestBrowserPermission: () => Promise<void>;
+  browserPermissionState: NotificationPermission;
+}
+
 const SEVERITY_TO_TOAST: Record<NotificationSeverity, 'success' | 'error' | 'warning' | 'info'> = {
   [NotificationSeverity.Success]: 'success',
   [NotificationSeverity.Error]: 'error',
@@ -33,6 +38,16 @@ function dispatchToast(event: NotificationEvent, navigate?: (path: string) => vo
   });
 }
 
+function dispatchBrowserNotification(event: NotificationEvent): void {
+  if (globalThis.Notification?.permission !== 'granted') {
+    return;
+  }
+  new Notification(`Shep: ${event.featureName}`, {
+    body: event.message,
+    icon: '/favicon-light.svg',
+  });
+}
+
 const SEVERITY_TO_ACTION: Record<NotificationSeverity, SoundAction> = {
   [NotificationSeverity.Success]: 'notification-success',
   [NotificationSeverity.Error]: 'notification-error',
@@ -40,7 +55,7 @@ const SEVERITY_TO_ACTION: Record<NotificationSeverity, SoundAction> = {
   [NotificationSeverity.Info]: 'notification-info',
 };
 
-export function useNotifications(): void {
+export function useNotifications(): UseNotificationsResult {
   const router = useRouter();
   const { events } = useAgentEventsContext();
 
@@ -59,6 +74,13 @@ export function useNotifications(): void {
     [successSound, errorSound, warningSound, infoSound]
   );
 
+  const [browserPermissionState, setBrowserPermissionState] = useState<NotificationPermission>(
+    () => {
+      if (typeof globalThis.Notification === 'undefined') return 'default';
+      return globalThis.Notification.permission;
+    }
+  );
+
   // Track how many events from the array we've already processed.
   // Using the array index (instead of lastEvent) prevents React batching
   // from silently dropping events when multiple SSE messages arrive together.
@@ -81,9 +103,21 @@ export function useNotifications(): void {
       }
 
       dispatchToast(event, (path) => router.push(path as Parameters<typeof router.push>[0]));
+      dispatchBrowserNotification(event);
 
       const actionName = SEVERITY_TO_ACTION[event.severity];
       soundsByAction[actionName]?.play();
     }
   }, [events, soundsByAction, router]);
+
+  const requestBrowserPermission = useCallback(async () => {
+    if (typeof globalThis.Notification === 'undefined') return;
+    const result = await globalThis.Notification.requestPermission();
+    setBrowserPermissionState(result);
+  }, []);
+
+  return {
+    requestBrowserPermission,
+    browserPermissionState,
+  };
 }