fix: add test notification button (closes #930) (#948)

Adds a "Send test notification" button to the notification settings page to allow users to immediately verify their configuration. The button uses the existing notifyAgentCompletion API.

packages/ui/src/components/sections/openchamber/NotificationSettings.tsx

@@ -385,6 +385,31 @@ export const NotificationSettings: React.FC = () => {
     };
   };
 
+  const handleTestNotification = async () => {
+    const apis = getRegisteredRuntimeAPIs();
+    if (!apis?.notifications) {
+      toast.error('Notifications API not available');
+      return;
+    }
+
+    try {
+      const success = await apis.notifications.notifyAgentCompletion({
+        title: 'Test Notification',
+        body: 'This is a test notification from OpenChamber.',
+        tag: 'openchamber-test',
+      });
+
+      if (success) {
+        toast.success('Test notification sent successfully');
+      } else {
+        toast.error('Failed to send test notification');
+      }
+    } catch (error) {
+      console.error('Test notification failed:', error);
+      toast.error('Failed to send test notification');
+    }
+  };
+
   const handleEnableBackgroundNotifications = async () => {
     if (!pushSupported) {
       toast.error('Push notifications not supported');
@@ -547,26 +572,39 @@ export const NotificationSettings: React.FC = () => {
             </div>
 
             {nativeNotificationsEnabled && canShowNotifications && (
-              <div
-                className="group flex cursor-pointer items-center gap-2 py-1.5"
-                role="button"
-                tabIndex={0}
-                aria-pressed={notificationMode === 'always'}
-                onClick={() => setNotificationMode(notificationMode === 'always' ? 'hidden-only' : 'always')}
-                onKeyDown={(event) => {
-                  if (event.key === ' ' || event.key === 'Enter') {
-                    event.preventDefault();
-                    setNotificationMode(notificationMode === 'always' ? 'hidden-only' : 'always');
-                  }
-                }}
-              >
-                <Checkbox
-                  checked={notificationMode === 'always'}
-                  onChange={(checked) => setNotificationMode(checked ? 'always' : 'hidden-only')}
-                  ariaLabel="Notify while app is focused"
-                />
-                <span className="typography-ui-label text-foreground">Notify While App is Focused</span>
-              </div>
+              <>
+                <div
+                  className="group flex cursor-pointer items-center gap-2 py-1.5"
+                  role="button"
+                  tabIndex={0}
+                  aria-pressed={notificationMode === 'always'}
+                  onClick={() => setNotificationMode(notificationMode === 'always' ? 'hidden-only' : 'always')}
+                  onKeyDown={(event) => {
+                    if (event.key === ' ' || event.key === 'Enter') {
+                      event.preventDefault();
+                      setNotificationMode(notificationMode === 'always' ? 'hidden-only' : 'always');
+                    }
+                  }}
+                >
+                  <Checkbox
+                    checked={notificationMode === 'always'}
+                    onChange={(checked) => setNotificationMode(checked ? 'always' : 'hidden-only')}
+                    ariaLabel="Notify while app is focused"
+                  />
+                  <span className="typography-ui-label text-foreground">Notify While App is Focused</span>
+                </div>
+
+                <div className="py-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => void handleTestNotification()}
+                  >
+                    Send test notification
+                  </Button>
+                </div>
+              </>
             )}
           </section>