(
- "/api/v1/notifications/settings",
- {
- method: "POST",
- body: JSON.stringify({
- webNotifyEnabled: nextEnabled,
- webNotifyEvents: nextEvents,
- }),
- }
- );
- if (webSaveRequestIdRef.current !== requestId) {
- return true;
- }
- setSavedWebEnabled(data.webNotifyEnabled);
- setSavedWebEvents(data.webNotifyEvents);
- setWebNotifyEnabled(data.webNotifyEnabled);
- setWebNotifyEvents(data.webNotifyEvents);
- setWebMessage("Browser notification settings saved.");
- return true;
- } catch (err) {
- if (webSaveRequestIdRef.current !== requestId) {
- return true;
- }
- setWebError(
- err instanceof Error
- ? err.message
- : "Failed to save browser notifications."
- );
- return false;
- } finally {
- if (webSaveRequestIdRef.current === requestId) {
- setSaving(false);
- }
- }
- },
- []
- );
-
- const handleTest = useCallback(async () => {
- setError("");
- setMessage("");
- setTesting(true);
- try {
- const result = await api<{ ok: boolean; error?: string }>(
- "/api/v1/notifications/test",
- {
- method: "POST",
- body: JSON.stringify({ webhookUrl: webhookUrl || undefined }),
- }
- );
- if (result.ok) {
- setMessage("Test message sent — check your Slack channel!");
- } else {
- setError(result.error ?? "Test failed.");
- }
- } catch (err) {
- setError(err instanceof Error ? err.message : "Failed to send test.");
- } finally {
- setTesting(false);
- }
- }, [webhookUrl]);
-
- const toggleEvent = useCallback((eventType: NotifyEventType) => {
- setNotifyEvents((prev) =>
- prev.includes(eventType)
- ? prev.filter((e) => e !== eventType)
- : [...prev, eventType]
- );
- }, []);
-
- const toggleWebEvent = useCallback(
- async (eventType: NotifyEventType) => {
- const previousEnabled = webNotifyEnabledRef.current;
- const previousEvents = webNotifyEventsRef.current;
- const nextEvents = previousEvents.includes(eventType)
- ? previousEvents.filter((e) => e !== eventType)
- : [...previousEvents, eventType];
-
- setWebNotifyEvents(nextEvents);
- const saved = await persistWebNotificationSettings(
- previousEnabled,
- nextEvents
- );
- if (!saved) {
- setWebNotifyEnabled(savedWebEnabledRef.current);
- setWebNotifyEvents(savedWebEventsRef.current);
- }
- },
- [persistWebNotificationSettings]
- );
-
- const toggleWebNotifyEnabled = useCallback(
- async (checked: boolean) => {
- const previousEvents = webNotifyEventsRef.current;
- const nextEnabled = checked;
-
- setWebNotifyEnabled(nextEnabled);
- const saved = await persistWebNotificationSettings(
- nextEnabled,
- previousEvents
- );
- if (!saved) {
- setWebNotifyEnabled(savedWebEnabledRef.current);
- setWebNotifyEvents(savedWebEventsRef.current);
- }
- },
- [persistWebNotificationSettings]
- );
-
- const handleRequestPermission = useCallback(async () => {
- const result = await requestNotificationPermission();
- setBrowserPermission(result);
- }, []);
-
- const handleTestWebNotification = useCallback(() => {
- if (Notification.permission !== "granted") return;
- new Notification("Dispatch test notification", {
- body: "Browser notifications are working!",
- tag: "dispatch-test",
- });
- setMessage("Test notification sent — check your browser!");
- }, []);
+ const {
+ loading,
+ webhookUrl,
+ handleWebhookUrlChange,
+ notifyEvents,
+ toggleEvent,
+ webNotifyEnabled,
+ webNotifyEvents,
+ browserPermission,
+ toggleWebEvent,
+ toggleWebNotifyEnabled,
+ handleRequestPermission,
+ handleTestWebNotification,
+ saving,
+ testing,
+ message,
+ error,
+ webMessage,
+ webError,
+ hasChanges,
+ handleSave,
+ handleTest,
+ } = useNotificationSettings();
if (loading) {
return Loading...
;
}
- const notificationsSupported = typeof Notification !== "undefined";
- const isStandalone =
- window.matchMedia("(display-mode: standalone)").matches ||
- ("standalone" in navigator &&
- (navigator as { standalone?: boolean }).standalone === true);
- const isIOS =
- /iPad|iPhone|iPod/.test(navigator.userAgent) ||
- (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-
return (
- {/* Browser Notifications */}
-
-
- Browser Notifications
-
-
- Get native desktop or mobile notifications when agents need attention.
- When enabled and the app is open, browser notifications are used
- instead of Slack.
-
-
- {!notificationsSupported ? (
-
- Browser notifications are not supported in this browser.
- {isIOS && !isStandalone
- ? " On iOS/iPadOS, install Dispatch as a PWA (Add to Home Screen) to enable notifications."
- : ""}
-
- ) : (
-
- {/* Permission status + grant button */}
- {browserPermission !== "granted" ? (
-
-
-
- {browserPermission === "denied"
- ? "Notifications blocked"
- : "Permission required"}
-
-
- {browserPermission === "denied"
- ? isIOS
- ? "Open device Settings > Notifications > Dispatch to enable, or tap Allow to re-request"
- : "Update the notification permission in your browser settings, or tap Allow to re-request"
- : isIOS
- ? "Tap Allow, then confirm in the system prompt"
- : "Your browser needs permission to show notifications"}
-
-
-
void handleRequestPermission()}
- >
- Allow
-
-
- ) : null}
-
- {/* Enable toggle */}
-
-
- void toggleWebNotifyEnabled(checked === true)
- }
- data-testid="web-notify-enabled"
- />
-
-
- Enable browser notifications
-
-
- {browserPermission === "granted"
- ? "Show notifications when agents change status"
- : "Grant permission above to enable"}
-
-
-
- {/* Web event toggles */}
- {webNotifyEnabled && browserPermission === "granted" && (
-
-
Notify on:
- {EVENT_OPTIONS.map(({ id, label, description }) => (
-
- void toggleWebEvent(id)}
- data-testid={`web-notify-event-${id}`}
- />
-
-
- {label}
-
-
- {description}
-
-
- ))}
-
-
- Send test
-
-
-
- )}
- {webError ? (
-
{webError}
- ) : null}
- {webMessage ? (
-
{webMessage}
- ) : null}
-
- )}
-
-
- Slack Webhook
-
-
- Receive notifications in Slack when agents finish, need input, or get
- blocked.
- {webNotifyEnabled && (
- <>
- {" "}
- When browser notifications are active, Slack is used as a fallback
- for when the app is closed.
-
- )}
- {!webNotifyEnabled && (
- <>
- {" "}
- Create an{" "}
-
- Incoming Webhook
- {" "}
- in your Slack workspace and paste the URL below.
-
- )}
-
-
-
-
-
- Slack notify on
-
-
- Choose which agent status changes trigger a Slack notification.
-
-
- {EVENT_OPTIONS.map(({ id, label, description }) => (
-
- toggleEvent(id)}
- data-testid={`notify-event-${id}`}
- />
-
-
- {label}
-
-
- {description}
-
-
- ))}
-
-
- {error &&
{error}
}
- {message && (
-
{message}
- )}
-
- void handleSave()}
- data-testid="save-notification-settings"
- >
- {saving ? "Saving..." : "Save"}
-
- void handleTest()}
- data-testid="test-slack-webhook"
- >
- {testing ? "Sending..." : "Send Slack test"}
-
-
-
+
+ Slack Webhook
+
+
+ Receive notifications in Slack when agents finish, need input, or get
+ blocked.
+ {webNotifyEnabled && (
+ <>
+ {" "}
+ When browser notifications are active, Slack is used as a fallback
+ for when the app is closed.
+
+ )}
+ {!webNotifyEnabled && (
+ <>
+ {" "}
+ Create an{" "}
+
+ Incoming Webhook
+ {" "}
+ in your Slack workspace and paste the URL below.
+
+ )}
+
+
+
+
+
+ Slack notify on
+
+
+ Choose which agent status changes trigger a Slack notification.
+
+
+ {EVENT_OPTIONS.map(({ id, label, description }) => (
+
+ onToggleEvent(id)}
+ data-testid={`notify-event-${id}`}
+ />
+
+
+ {label}
+
+
+ {description}
+
+
+ ))}
+
+
+ {error &&
{error}
}
+ {message && (
+
{message}
+ )}
+
+ void onSave()}
+ data-testid="save-notification-settings"
+ >
+ {saving ? "Saving..." : "Save"}
+
+ void onTest()}
+ data-testid="test-slack-webhook"
+ >
+ {testing ? "Sending..." : "Send Slack test"}
+
+
+
([
+ "done",
+ "waiting_user",
+ "blocked",
+ ]);
+ const [savedEvents, setSavedEvents] = useState([]);
+
+ // Web notification settings
+ const [webNotifyEnabled, setWebNotifyEnabled] = useState(false);
+ const [savedWebEnabled, setSavedWebEnabled] = useState(false);
+ const [webNotifyEvents, setWebNotifyEvents] = useState([
+ "done",
+ "waiting_user",
+ "blocked",
+ ]);
+ const [savedWebEvents, setSavedWebEvents] = useState([]);
+ const [browserPermission, setBrowserPermission] =
+ useState(getNotificationPermission());
+
+ // Re-check permission when the user returns to this page (e.g. after
+ // changing settings in iOS Settings or browser site settings).
+ useEffect(() => {
+ const onVisibilityChange = () => {
+ if (!document.hidden) {
+ setBrowserPermission(getNotificationPermission());
+ }
+ };
+ document.addEventListener("visibilitychange", onVisibilityChange);
+ return () =>
+ document.removeEventListener("visibilitychange", onVisibilityChange);
+ }, []);
+
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [testing, setTesting] = useState(false);
+ const [message, setMessage] = useState("");
+ const [error, setError] = useState("");
+ const [webMessage, setWebMessage] = useState("");
+ const [webError, setWebError] = useState("");
+ const webNotifyEnabledRef = useRef(webNotifyEnabled);
+ const webNotifyEventsRef = useRef(webNotifyEvents);
+ const savedWebEnabledRef = useRef(savedWebEnabled);
+ const savedWebEventsRef = useRef(savedWebEvents);
+ const webSaveRequestIdRef = useRef(0);
+
+ useEffect(() => {
+ let cancelled = false;
+ void (async () => {
+ try {
+ const data = await api(
+ "/api/v1/notifications/settings"
+ );
+ if (cancelled) return;
+ setWebhookUrl(data.webhookUrl);
+ setSavedUrl(data.webhookUrl);
+ setNotifyEvents(data.notifyEvents);
+ setSavedEvents(data.notifyEvents);
+ setWebNotifyEnabled(data.webNotifyEnabled);
+ setSavedWebEnabled(data.webNotifyEnabled);
+ setWebNotifyEvents(data.webNotifyEvents);
+ setSavedWebEvents(data.webNotifyEvents);
+ } catch {
+ // ignore — first load may fail if server is starting
+ } finally {
+ if (!cancelled) setLoading(false);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ useEffect(() => {
+ webNotifyEnabledRef.current = webNotifyEnabled;
+ webNotifyEventsRef.current = webNotifyEvents;
+ savedWebEnabledRef.current = savedWebEnabled;
+ savedWebEventsRef.current = savedWebEvents;
+ }, [savedWebEnabled, savedWebEvents, webNotifyEnabled, webNotifyEvents]);
+
+ const hasChanges =
+ webhookUrl !== savedUrl ||
+ JSON.stringify([...notifyEvents].sort()) !==
+ JSON.stringify([...savedEvents].sort()) ||
+ webNotifyEnabled !== savedWebEnabled ||
+ JSON.stringify([...webNotifyEvents].sort()) !==
+ JSON.stringify([...savedWebEvents].sort());
+
+ const handleSave = useCallback(async () => {
+ setError("");
+ setMessage("");
+ setSaving(true);
+ try {
+ const data = await api(
+ "/api/v1/notifications/settings",
+ {
+ method: "POST",
+ body: JSON.stringify({
+ webhookUrl,
+ notifyEvents,
+ webNotifyEnabled,
+ webNotifyEvents,
+ }),
+ }
+ );
+ setSavedUrl(data.webhookUrl);
+ setSavedEvents(data.notifyEvents);
+ setWebhookUrl(data.webhookUrl);
+ setNotifyEvents(data.notifyEvents);
+ setSavedWebEnabled(data.webNotifyEnabled);
+ setSavedWebEvents(data.webNotifyEvents);
+ setWebNotifyEnabled(data.webNotifyEnabled);
+ setWebNotifyEvents(data.webNotifyEvents);
+ setMessage("Settings saved.");
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to save.");
+ } finally {
+ setSaving(false);
+ }
+ }, [webhookUrl, notifyEvents, webNotifyEnabled, webNotifyEvents]);
+
+ const persistWebNotificationSettings = useCallback(
+ async (
+ nextEnabled: boolean,
+ nextEvents: NotifyEventType[]
+ ): Promise => {
+ const requestId = webSaveRequestIdRef.current + 1;
+ webSaveRequestIdRef.current = requestId;
+ setWebError("");
+ setWebMessage("");
+ setSaving(true);
+ try {
+ const data = await api(
+ "/api/v1/notifications/settings",
+ {
+ method: "POST",
+ body: JSON.stringify({
+ webNotifyEnabled: nextEnabled,
+ webNotifyEvents: nextEvents,
+ }),
+ }
+ );
+ if (webSaveRequestIdRef.current !== requestId) {
+ return true;
+ }
+ setSavedWebEnabled(data.webNotifyEnabled);
+ setSavedWebEvents(data.webNotifyEvents);
+ setWebNotifyEnabled(data.webNotifyEnabled);
+ setWebNotifyEvents(data.webNotifyEvents);
+ setWebMessage("Browser notification settings saved.");
+ return true;
+ } catch (err) {
+ if (webSaveRequestIdRef.current !== requestId) {
+ return true;
+ }
+ setWebError(
+ err instanceof Error
+ ? err.message
+ : "Failed to save browser notifications."
+ );
+ return false;
+ } finally {
+ if (webSaveRequestIdRef.current === requestId) {
+ setSaving(false);
+ }
+ }
+ },
+ []
+ );
+
+ const handleTest = useCallback(async () => {
+ setError("");
+ setMessage("");
+ setTesting(true);
+ try {
+ const result = await api<{ ok: boolean; error?: string }>(
+ "/api/v1/notifications/test",
+ {
+ method: "POST",
+ body: JSON.stringify({ webhookUrl: webhookUrl || undefined }),
+ }
+ );
+ if (result.ok) {
+ setMessage("Test message sent — check your Slack channel!");
+ } else {
+ setError(result.error ?? "Test failed.");
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to send test.");
+ } finally {
+ setTesting(false);
+ }
+ }, [webhookUrl]);
+
+ const handleWebhookUrlChange = useCallback((value: string) => {
+ setWebhookUrl(value);
+ setMessage("");
+ setError("");
+ }, []);
+
+ const toggleEvent = useCallback((eventType: NotifyEventType) => {
+ setNotifyEvents((prev) =>
+ prev.includes(eventType)
+ ? prev.filter((e) => e !== eventType)
+ : [...prev, eventType]
+ );
+ }, []);
+
+ const toggleWebEvent = useCallback(
+ async (eventType: NotifyEventType) => {
+ const previousEnabled = webNotifyEnabledRef.current;
+ const previousEvents = webNotifyEventsRef.current;
+ const nextEvents = previousEvents.includes(eventType)
+ ? previousEvents.filter((e) => e !== eventType)
+ : [...previousEvents, eventType];
+
+ setWebNotifyEvents(nextEvents);
+ const saved = await persistWebNotificationSettings(
+ previousEnabled,
+ nextEvents
+ );
+ if (!saved) {
+ setWebNotifyEnabled(savedWebEnabledRef.current);
+ setWebNotifyEvents(savedWebEventsRef.current);
+ }
+ },
+ [persistWebNotificationSettings]
+ );
+
+ const toggleWebNotifyEnabled = useCallback(
+ async (checked: boolean) => {
+ const previousEvents = webNotifyEventsRef.current;
+ const nextEnabled = checked;
+
+ setWebNotifyEnabled(nextEnabled);
+ const saved = await persistWebNotificationSettings(
+ nextEnabled,
+ previousEvents
+ );
+ if (!saved) {
+ setWebNotifyEnabled(savedWebEnabledRef.current);
+ setWebNotifyEvents(savedWebEventsRef.current);
+ }
+ },
+ [persistWebNotificationSettings]
+ );
+
+ const handleRequestPermission = useCallback(async () => {
+ const result = await requestNotificationPermission();
+ setBrowserPermission(result);
+ }, []);
+
+ const handleTestWebNotification = useCallback(() => {
+ if (Notification.permission !== "granted") return;
+ new Notification("Dispatch test notification", {
+ body: "Browser notifications are working!",
+ tag: "dispatch-test",
+ });
+ setMessage("Test notification sent — check your browser!");
+ }, []);
+
+ return {
+ loading,
+ // Slack
+ webhookUrl,
+ handleWebhookUrlChange,
+ notifyEvents,
+ toggleEvent,
+ // Web/browser notifications
+ webNotifyEnabled,
+ webNotifyEvents,
+ browserPermission,
+ toggleWebEvent,
+ toggleWebNotifyEnabled,
+ handleRequestPermission,
+ handleTestWebNotification,
+ // Shared status
+ saving,
+ testing,
+ message,
+ error,
+ webMessage,
+ webError,
+ hasChanges,
+ handleSave,
+ handleTest,
+ };
+}