feat(web): notification settings, and sign-out stops this browser's push

Users had no way to turn on push for a browser, set quiet hours or opt out of nudges.

Settings gains a compact Notifications section: a switch for push on this device (only where
web push works: a secure context outside the desktop app), quiet hours with from/to times
(22:00-07:00 when first turned on) and a switch for nudges. Changes save in order as they are
made. A browser that blocked notifications says so instead of offering a dead switch. Logging
out unregisters the browser first, so a shared computer stops receiving the account's pushes.

The E2E stubs the Push API (headless Chromium has no push service), walks all three controls,
checks they survive a reload and captures the notification-settings screenshot.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u

apps/web/e2e/helpers.ts

@@ -242,6 +242,7 @@ export async function openUserSettings(
     | "memory"
     | "profile"
     | "voice"
+    | "notifications"
     | "usage"
     | "computer"
     | "updates",

apps/web/e2e/notification-settings.spec.ts

@@ -0,0 +1,112 @@
+/**
+ * E2E: Settings → Notifications turns push on for this browser (the Push API is stubbed: headless
+ * Chromium has no push service), sets quiet hours and switches nudges off; all of it survives a
+ * reload.
+ */
+import { expect, type Page, test } from "@playwright/test";
+import { captureScreenshot, completeOnboarding, openUserSettings, rpc, signup } from "./helpers";
+
+const ENDPOINT = "https://push.example.test/e2e-device";
+
+/** A fake service worker registration whose push subscription lives in sessionStorage. */
+async function stubPushApi(page: Page, endpoint: string) {
+  await page.addInitScript((pushEndpoint) => {
+    const storageKey = "e2e:push-subscription";
+    const current = () => {
+      const stored = sessionStorage.getItem(storageKey);
+      if (!stored) return null;
+      const saved = JSON.parse(stored) as { serverKey: number[] };
+      return {
+        endpoint: pushEndpoint,
+        options: { applicationServerKey: new Uint8Array(saved.serverKey).buffer },
+        toJSON: () => ({
+          endpoint: pushEndpoint,
+          keys: { p256dh: `B${"A".repeat(86)}`, auth: "A".repeat(22) },
+        }),
+        unsubscribe: async () => {
+          sessionStorage.removeItem(storageKey);
+          return true;
+        },
+      };
+    };
+    const registration = {
+      scope: `${location.origin}/`,
+      pushManager: {
+        getSubscription: async () => current(),
+        subscribe: async (options: { applicationServerKey: Uint8Array }) => {
+          sessionStorage.setItem(
+            storageKey,
+            JSON.stringify({ serverKey: [...new Uint8Array(options.applicationServerKey)] }),
+          );
+          return current();
+        },
+      },
+    };
+    Object.defineProperty(navigator, "serviceWorker", {
+      configurable: true,
+      value: {
+        register: async () => registration,
+        getRegistration: async () => registration,
+        ready: Promise.resolve(registration),
+      },
+    });
+    if (!("PushManager" in window)) {
+      Object.defineProperty(window, "PushManager", { configurable: true, value: class {} });
+    }
+  }, endpoint);
+}
+
+test("notification settings: push on this device, quiet hours and nudges", async ({
+  page,
+}, testInfo) => {
+  await page.context().grantPermissions(["notifications"]);
+  await stubPushApi(page, ENDPOINT);
+  await signup(page, `notifications-${Date.now()}@rakazo.test`, "password12", "Push Tester");
+  await completeOnboarding(page);
+
+  let settings = await openUserSettings(page, "notifications");
+  const panel = settings.getByTestId("notification-settings");
+  const push = panel.getByTestId("notification-push-switch");
+  await expect(push).not.toBeChecked();
+
+  const subscribed = page.waitForRequest("**/rpc/notifications/webPush/subscribe");
+  await push.click();
+  expect((await subscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
+  await expect(push).toBeChecked();
+
+  const quiet = panel.getByTestId("notification-quiet-hours-switch");
+  await expect(quiet).not.toBeChecked();
+  await quiet.click();
+  await expect(quiet).toBeChecked();
+  const start = panel.getByTestId("notification-quiet-hours-start");
+  await expect(start).toHaveValue("22:00");
+  await expect(panel.getByTestId("notification-quiet-hours-end")).toHaveValue("07:00");
+  const saved = page.waitForResponse(
+    (response) =>
+      response.url().includes("/rpc/notifications/settings/update") &&
+      response.request().postData()?.includes("23:30") === true,
+  );
+  await start.fill("23:30");
+  await saved;
+
+  const nudges = panel.getByTestId("notification-nudges-switch");
+  await expect(nudges).toBeChecked();
+  await nudges.click();
+  await expect(nudges).not.toBeChecked();
+  await expect
+    .poll(() => rpc<{ nudges: boolean }>(page, "notifications/settings/get", null))
+    .toMatchObject({ nudges: false, quietHours: { start: "23:30", end: "07:00" } });
+
+  await captureScreenshot(page, testInfo, "notification-settings");
+
+  await page.reload();
+  settings = await openUserSettings(page, "notifications");
+  await expect(settings.getByTestId("notification-push-switch")).toBeChecked();
+  await expect(settings.getByTestId("notification-quiet-hours-start")).toHaveValue("23:30");
+  await expect(settings.getByTestId("notification-nudges-switch")).not.toBeChecked();
+
+  const unsubscribed = page.waitForRequest("**/rpc/notifications/webPush/unsubscribe");
+  await settings.getByTestId("notification-push-switch").click();
+  expect((await unsubscribed).postDataJSON()).toMatchObject({ json: { endpoint: ENDPOINT } });
+  await expect(settings.getByTestId("notification-push-switch")).not.toBeChecked();
+});

apps/web/src/components/NotificationSettingsPanel.tsx

@@ -0,0 +1,197 @@
+import { Trans, useLingui } from "@lingui/react/macro";
+import type { NotificationSettings, NotificationSettingsPatch } from "@rakazo/contracts";
+import { Input, Switch } from "@rakazo/ui-web";
+import type { ReactNode } from "react";
+import { useEffect, useId, useRef, useState } from "react";
+import { rpc } from "../lib/rpc";
+import { disableWebPush, enableWebPush, webPushEnabled, webPushSupported } from "../lib/web-push";
+
+const DEFAULT_QUIET_HOURS = { start: "22:00", end: "07:00" };
+const CLOCK_TIME = /^([01]\d|2[0-3]):[0-5]\d$/;
+
+type PushState = "loading" | "on" | "off" | "blocked";
+
+function SettingRow({
+  label,
+  testId,
+  checked,
+  disabled,
+  onCheckedChange,
+  children,
+}: {
+  label: ReactNode;
+  testId: string;
+  checked: boolean;
+  disabled?: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  children?: ReactNode;
+}) {
+  const labelId = useId();
+  return (
+    <li className="py-3 first:pt-0 last:pb-0">
+      <div className="flex items-center justify-between gap-4">
+        <span id={labelId} className="text-ui-body text-foreground">
+          {label}
+        </span>
+        <Switch
+          data-testid={testId}
+          aria-labelledby={labelId}
+          checked={checked}
+          disabled={disabled}
+          onCheckedChange={onCheckedChange}
+        />
+      </div>
+      {children}
+    </li>
+  );
+}
+
+/** Push on this browser, quiet hours and nudges. Quiet hours and nudges apply to every device. */
+export function NotificationSettingsPanel() {
+  const { t } = useLingui();
+  const pushSupported = webPushSupported();
+  const [settings, setSettings] = useState<NotificationSettings | null>(null);
+  const [push, setPush] = useState<PushState>("loading");
+  const [pushBusy, setPushBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [quietDraft, setQuietDraft] = useState(DEFAULT_QUIET_HOURS);
+  const saves = useRef(Promise.resolve());
+
+  useEffect(() => {
+    let cancelled = false;
+    rpc.notifications.settings
+      .get()
+      .then((next) => {
+        if (cancelled) return;
+        setSettings(next);
+        if (next.quietHours) setQuietDraft(next.quietHours);
+      })
+      .catch(() => {
+        if (!cancelled) setError(t`Couldn't load`);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [t]);
+
+  useEffect(() => {
+    if (!pushSupported) return;
+    let cancelled = false;
+    void webPushEnabled().then((enabled) => {
+      if (cancelled) return;
+      setPush(enabled ? "on" : Notification.permission === "denied" ? "blocked" : "off");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pushSupported]);
+
+  /** Saves in order, so the last change the user made is the one that sticks. */
+  function save(patch: NotificationSettingsPatch) {
+    setError(null);
+    setSettings((current) => (current ? { ...current, ...patch } : current));
+    saves.current = saves.current.then(async () => {
+      try {
+        setSettings(await rpc.notifications.settings.update(patch));
+      } catch {
+        setError(t`Couldn't save`);
+        setSettings(await rpc.notifications.settings.get().catch(() => null));
+      }
+    });
+  }
+
+  async function changePush(next: boolean) {
+    setPushBusy(true);
+    setError(null);
+    try {
+      if (!next) {
+        await disableWebPush();
+        setPush("off");
+        return;
+      }
+      const result = await enableWebPush();
+      if (result === "enabled") setPush("on");
+      else if (result === "denied") setPush("blocked");
+      else setError(t`Couldn't save`);
+    } catch {
+      setError(t`Couldn't save`);
+    } finally {
+      setPushBusy(false);
+    }
+  }
+
+  function changeQuietTime(field: "start" | "end", value: string) {
+    const next = { ...quietDraft, [field]: value };
+    setQuietDraft(next);
+    if (CLOCK_TIME.test(next.start) && CLOCK_TIME.test(next.end) && next.start !== next.end) {
+      save({ quietHours: next });
+    }
+  }
+
+  return (
+    <div data-testid="notification-settings" className="space-y-5">
+      {error ? (
+        <p role="alert" className="text-ui-body-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+      {settings ? (
+        <section className="rounded-xl border border-border px-4 py-4">
+          <ul className="divide-y divide-border">
+            {pushSupported ? (
+              <SettingRow
+                label={<Trans>Push on this device</Trans>}
+                testId="notification-push-switch"
+                checked={push === "on"}
+                disabled={push === "loading" || push === "blocked" || pushBusy}
+                onCheckedChange={(next) => void changePush(next)}
+              >
+                {push === "blocked" ? (
+                  <p className="mt-1 text-ui-body-sm text-muted-foreground">
+                    <Trans>Blocked in your browser settings</Trans>
+                  </p>
+                ) : null}
+              </SettingRow>
+            ) : null}
+            <SettingRow
+              label={<Trans>Quiet hours</Trans>}
+              testId="notification-quiet-hours-switch"
+              checked={settings.quietHours !== null}
+              onCheckedChange={(next) => save({ quietHours: next ? quietDraft : null })}
+            >
+              {settings.quietHours ? (
+                <div className="mt-3 flex items-center gap-2">
+                  <Input
+                    type="time"
+                    data-testid="notification-quiet-hours-start"
+                    aria-label={t`Quiet hours start`}
+                    value={quietDraft.start}
+                    onChange={(event) => changeQuietTime("start", event.target.value)}
+                    className="w-32"
+                  />
+                  <span aria-hidden="true" className="text-muted-foreground">
+                    –
+                  </span>
+                  <Input
+                    type="time"
+                    data-testid="notification-quiet-hours-end"
+                    aria-label={t`Quiet hours end`}
+                    value={quietDraft.end}
+                    onChange={(event) => changeQuietTime("end", event.target.value)}
+                    className="w-32"
+                  />
+                </div>
+              ) : null}
+            </SettingRow>
+            <SettingRow
+              label={<Trans>Nudges from your Oo</Trans>}
+              testId="notification-nudges-switch"
+              checked={settings.nudges}
+              onCheckedChange={(next) => save({ nudges: next })}
+            />
+          </ul>
+        </section>
+      ) : null}
+    </div>
+  );
+}

apps/web/src/pages/SettingsOverlay.tsx

@@ -2,6 +2,7 @@ import { useLingui } from "@lingui/react/macro";
 import type { AvatarStyle, SpaceMemoryConfig } from "@rakazo/contracts";
 import { Button, Dialog, DialogClose, DialogContent, DialogTitle } from "@rakazo/ui-web";
 import {
+  Bell,
   Brain,
   CloudDownload,
   Cpu,
@@ -16,6 +17,7 @@ import {
 } from "lucide-react";
 import { type ComponentType, useEffect, useRef, useState } from "react";
 import { computersAreUnavailable } from "../components/ComputersUnavailableHint";
+import { NotificationSettingsPanel } from "../components/NotificationSettingsPanel";
 import { UserProfileSettings } from "../components/UserProfileSettings";
 import type { TradingBotUiState } from "../lib/trading-bot-status";
 import {
@@ -37,6 +39,7 @@ export type SettingsSection =
   | "memory"
   | "profile"
   | "voice"
+  | "notifications"
   | "usage"
   | "computer"
   | "updates"
@@ -111,6 +114,7 @@ export function SettingsOverlay({
     { id: "memory", label: t`Memory`, icon: Brain },
     { id: "profile", label: t`About you`, icon: UserRound },
     { id: "voice", label: t`Voice`, icon: Volume2 },
+    { id: "notifications", label: t`Notifications`, icon: Bell },
     { id: "usage", label: t`Usage`, icon: Gauge },
     ...(showComputer ? [{ id: "computer" as const, label: t`Computer`, icon: Monitor }] : []),
     { id: "updates", label: t`Updates`, icon: CloudDownload },
@@ -250,6 +254,7 @@ export function SettingsOverlay({
                 />
               ) : null}
               {section === "profile" ? <UserProfileSettings /> : null}
+              {section === "notifications" ? <NotificationSettingsPanel /> : null}
               {section === "usage" ? (
                 <UsageSettingsPanel usage={usage} panelRef={usageRef} />
               ) : null}

apps/web/src/pages/Shell.tsx

@@ -247,6 +247,7 @@ import {
   transcriptMovedDown,
 } from "../lib/transcript-scroll";
 import { speaker } from "../lib/tts";
+import { disableWebPush } from "../lib/web-push";
 import { ActivityList } from "./ActivityList";
 import type { ContextMenuPosition } from "./BotContextMenu";
 import { CreateGroupForm, GroupSettings, memberName } from "./GroupPanel";
@@ -4296,10 +4297,14 @@ export function ShellPage() {
                 variant="ghost"
                 className="w-full justify-start font-normal"
                 onClick={() =>
-                  void authClient.signOut().then(() => {
+                  // This browser stops receiving the account's pushes once it signs out.
-                    clearSpaceSelection();
+                  void disableWebPush()
-                    navigate("/");
+                    .catch(() => undefined)
-                  })
+                    .then(() => authClient.signOut())
+                    .then(() => {
+                      clearSpaceSelection();
+                      navigate("/");
+                    })
                 }
               >
                 <LogOut className="text-muted-foreground" strokeWidth={1.75} />