From ba8abcb9f0378c456407486fe93ebef8aaf81032 Mon Sep 17 00:00:00 2001
From: orangeboyChen <chenenhan@qq.com>
Date: Tue, 27 Oct 2026 02:19:46 +0800
Subject: [PATCH] feat: add separate web and desktop expiry notifications

---
 .../notifications/credential-expiry/route.ts  |  77 ++++++++
 .../credential-expiry/test/route.ts           |  34 ++++
 app/page-shell.tsx                            |  60 ++++++
 app/settings/settings.tsx                     | 167 +++++++++++++++-
 electron/main.ts                              |  16 ++
 electron/preload.ts                           |   2 +
 lib/server/domain/config.ts                   |  26 +++
 .../domain/credential-expiry-notifications.ts | 183 +++++++++++++++---
 messages/en-US.json                           |  12 +-
 messages/ja-JP.json                           |  12 +-
 messages/zh-CN.json                           |  12 +-
 .../credential-expiry-notifications.test.ts   |  94 +++++++++
 12 files changed, 669 insertions(+), 26 deletions(-)
 create mode 100644 app/admin-api/notifications/credential-expiry/route.ts
 create mode 100644 app/admin-api/notifications/credential-expiry/test/route.ts

diff --git a/app/admin-api/notifications/credential-expiry/route.ts b/app/admin-api/notifications/credential-expiry/route.ts
new file mode 100644
index 00000000..85fd9ad1
--- /dev/null
+++ b/app/admin-api/notifications/credential-expiry/route.ts
@@ -0,0 +1,77 @@
+import { getAdminSessionErrorResponse } from '@/lib/server/admin/session';
+import {
+  type CredentialExpiryNotificationChannel,
+  subscribeCredentialExpiryNotifications,
+  type CredentialExpiryNotificationEvent,
+} from '@/lib/server/domain/credential-expiry-notifications';
+import { createSseHeaders } from '@/lib/server/shared/sse';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const encoder = new TextEncoder();
+
+const encodeEvent = (event: CredentialExpiryNotificationEvent): Uint8Array =>
+  encoder.encode(
+    `event: credential-expiry\ndata: ${JSON.stringify(event)}\n\n`,
+  );
+
+export const GET = async (request: Request): Promise<Response> => {
+  const authError = await getAdminSessionErrorResponse(request);
+
+  if (authError) return authError;
+
+  const channel = new URL(request.url).searchParams.get('channel');
+  if (channel !== 'web' && channel !== 'desktop') {
+    return Response.json(
+      { error: 'Notification channel is required' },
+      { status: 400 },
+    );
+  }
+
+  let close = (): void => undefined;
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      let closed = false;
+      const finish = (): void => {
+        if (closed) return;
+        closed = true;
+        clearInterval(heartbeat);
+        unsubscribe();
+        request.signal.removeEventListener('abort', finish);
+        try {
+          controller.close();
+        } catch {
+          return;
+        }
+      };
+      const unsubscribe = subscribeCredentialExpiryNotifications(
+        channel as CredentialExpiryNotificationChannel,
+        (event) => {
+          if (closed) return;
+          try {
+            controller.enqueue(encodeEvent(event));
+          } catch {
+            finish();
+          }
+        },
+      );
+      const heartbeat = setInterval(() => {
+        if (closed) return;
+        try {
+          controller.enqueue(encoder.encode(': keep-alive\n\n'));
+        } catch {
+          finish();
+        }
+      }, 25_000);
+      close = finish;
+      request.signal.addEventListener('abort', finish);
+      controller.enqueue(encoder.encode(': connected\n\n'));
+    },
+    cancel() {
+      close();
+    },
+  });
+
+  return new Response(stream, { headers: createSseHeaders() });
+};
diff --git a/app/admin-api/notifications/credential-expiry/test/route.ts b/app/admin-api/notifications/credential-expiry/test/route.ts
new file mode 100644
index 00000000..eff13dfc
--- /dev/null
+++ b/app/admin-api/notifications/credential-expiry/test/route.ts
@@ -0,0 +1,34 @@
+import { getAdminSessionErrorResponse } from '@/lib/server/admin/session';
+import { publishCredentialExpiryNotification } from '@/lib/server/domain/credential-expiry-notifications';
+import { getJsonBody } from '@/lib/server/shared/http';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export const POST = async (request: Request): Promise<Response> => {
+  const authError = await getAdminSessionErrorResponse(request);
+
+  if (authError) return authError;
+
+  const body = await getJsonBody<{ channel?: unknown }>(request);
+  const channel = body.channel;
+  if (channel !== 'web' && channel !== 'desktop') {
+    return Response.json(
+      { error: 'Notification channel is required' },
+      { status: 400 },
+    );
+  }
+
+  const delivered = publishCredentialExpiryNotification(channel, {
+    body:
+      channel === 'web'
+        ? '这是一条 CodeBuddy2API Web 端测试通知。'
+        : '这是一条 CodeBuddy2API 桌面端测试通知。',
+    credential: 'test',
+    expiresAt: Date.now() / 1000 + 3 * 24 * 60 * 60,
+    key: 'three_days',
+    title: 'CodeBuddy2API 凭据提醒测试',
+  });
+
+  return Response.json({ delivered, message: 'Test notification sent.' });
+};
diff --git a/app/page-shell.tsx b/app/page-shell.tsx
index 95f484ef..3eb25865 100644
--- a/app/page-shell.tsx
+++ b/app/page-shell.tsx
@@ -199,6 +199,11 @@ interface JsonResult<T> {
   status: number;
 }
 
+interface CredentialExpiryNotificationEvent {
+  body?: string;
+  title?: string;
+}
+
 const requestJson = async <T,>(
   input: RequestInfo | URL,
   init?: RequestInit,
@@ -404,6 +409,61 @@ const AdminPageLayoutContent = ({
     [],
   );
 
+  useEffect(() => {
+    if (typeof window === 'undefined' || !('EventSource' in window)) {
+      return;
+    }
+
+    const desktopBridge = (
+      window as unknown as {
+        desktop?: {
+          notify?: (nextTitle: string, nextBody: string) => Promise<void>;
+        };
+      }
+    ).desktop;
+    const desktopApp = desktop || Boolean(desktopBridge?.notify);
+    const source = new EventSource(
+      `/admin-api/notifications/credential-expiry?channel=${desktopApp ? 'desktop' : 'web'}`,
+    );
+    const handleEvent = (event: Event): void => {
+      const messageEvent = event as MessageEvent<string>;
+      let payload: CredentialExpiryNotificationEvent;
+
+      try {
+        payload = JSON.parse(
+          messageEvent.data,
+        ) as CredentialExpiryNotificationEvent;
+      } catch {
+        return;
+      }
+
+      const body = payload.body?.trim();
+      const title = payload.title?.trim();
+
+      if (!body || !title) return;
+
+      if (desktopApp) {
+        if (desktopBridge?.notify) {
+          void desktopBridge.notify(title, body);
+        }
+      } else if (
+        'Notification' in window &&
+        Notification.permission === 'granted'
+      ) {
+        new Notification(title, { body });
+      } else {
+        showNotification('warning', body);
+      }
+    };
+
+    source.addEventListener('credential-expiry', handleEvent);
+
+    return () => {
+      source.removeEventListener('credential-expiry', handleEvent);
+      source.close();
+    };
+  }, [desktop, showNotification]);
+
   /*
     Nothing is dropped into the console. A file or an image dropped on the
     window navigates it to that file, or lands in one of the fields it is
diff --git a/app/settings/settings.tsx b/app/settings/settings.tsx
index a55c15dc..9cf1d838 100644
--- a/app/settings/settings.tsx
+++ b/app/settings/settings.tsx
@@ -15,7 +15,14 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 
 import {
   BACKEND_CONFIG_KEYS,
@@ -190,6 +197,8 @@ const DESKTOP_HIDDEN_CONFIG_KEYS = new Set([
 
 const CUSTOM_CONFIG_KEYS = new Set([
   'CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED',
+  'CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED',
+  'CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED',
   'CODEBUDDY_BARK_TOKEN',
 ]);
 
@@ -265,10 +274,12 @@ const SettingField = ({
 };
 
 const CredentialExpiryNotificationSettings = ({
+  desktop,
   onChange,
   settings,
   translations,
 }: {
+  desktop: boolean;
   onChange: (key: string, value: string | boolean) => void;
   settings: SettingsState;
   translations: (key: string) => string;
@@ -277,12 +288,27 @@ const CredentialExpiryNotificationSettings = ({
   const [testResult, setTestResult] = useState<'success' | 'error' | null>(
     null,
   );
+  const [webTestResult, setWebTestResult] = useState<
+    'success' | 'error' | null
+  >(null);
+  const [webTesting, setWebTesting] = useState(false);
+  const [desktopTesting, setDesktopTesting] = useState(false);
   const token = String(settings.values.CODEBUDDY_BARK_TOKEN ?? '');
   const enabled =
     settings.values.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED ===
       true ||
     settings.values.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED ===
       'true';
+  const webEnabled =
+    settings.values.CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED ===
+      true ||
+    settings.values.CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED ===
+      'true';
+  const desktopEnabled =
+    settings.values
+      .CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED === true ||
+    settings.values
+      .CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED === 'true';
 
   const testNotification = async () => {
     setTesting(true);
@@ -302,6 +328,52 @@ const CredentialExpiryNotificationSettings = ({
     }
   };
 
+  const testWebNotification = async () => {
+    setWebTesting(true);
+    setWebTestResult(null);
+
+    try {
+      if ('Notification' in window && Notification.permission !== 'granted') {
+        await Notification.requestPermission();
+      }
+
+      const response = await fetch(
+        '/admin-api/notifications/credential-expiry/test',
+        {
+          body: JSON.stringify({ channel: 'web' }),
+          headers: { 'Content-Type': 'application/json' },
+          method: 'POST',
+        },
+      );
+      setWebTestResult(response.ok ? 'success' : 'error');
+    } catch {
+      setWebTestResult('error');
+    } finally {
+      setWebTesting(false);
+    }
+  };
+
+  const testDesktopNotification = async () => {
+    setDesktopTesting(true);
+    setWebTestResult(null);
+
+    try {
+      const response = await fetch(
+        '/admin-api/notifications/credential-expiry/test',
+        {
+          body: JSON.stringify({ channel: 'desktop' }),
+          headers: { 'Content-Type': 'application/json' },
+          method: 'POST',
+        },
+      );
+      setWebTestResult(response.ok ? 'success' : 'error');
+    } catch {
+      setWebTestResult('error');
+    } finally {
+      setDesktopTesting(false);
+    }
+  };
+
   return (
     <Block direction="vertical" gap={16} padding={24} variant="outlined">
       <Flexbox align="center" gap={8} horizontal>
@@ -327,6 +399,54 @@ const CredentialExpiryNotificationSettings = ({
           }
         />
       </Flexbox>
+      {desktop ? (
+        <>
+          <Flexbox align="center" distribution="space-between" horizontal>
+            <span className="font-medium">
+              {translations('settingsPanel.desktopNotificationsEnabled')}
+            </span>
+            <Switch
+              checked={desktopEnabled}
+              onChange={(checked) =>
+                onChange(
+                  'CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED',
+                  checked,
+                )
+              }
+            />
+          </Flexbox>
+          <p className="text-secondary">
+            {translations('settingsPanel.desktopNotificationsDescription')}
+          </p>
+        </>
+      ) : (
+        <>
+          <Flexbox align="center" distribution="space-between" horizontal>
+            <span className="font-medium">
+              {translations('settingsPanel.webNotificationsEnabled')}
+            </span>
+            <Switch
+              checked={webEnabled}
+              onChange={(checked) => {
+                if (
+                  checked &&
+                  'Notification' in window &&
+                  Notification.permission === 'default'
+                ) {
+                  void Notification.requestPermission();
+                }
+                onChange(
+                  'CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED',
+                  checked,
+                );
+              }}
+            />
+          </Flexbox>
+          <p className="text-secondary">
+            {translations('settingsPanel.webNotificationsDescription')}
+          </p>
+        </>
+      )}
       <div>
         <label
           className="mb-2 block whitespace-normal break-words font-medium text-text-light dark:text-text-dark"
@@ -367,6 +487,37 @@ const CredentialExpiryNotificationSettings = ({
             {translations('settingsPanel.testBarkFailed')}
           </span>
         ) : null}
+        <Button
+          disabled={desktop ? desktopTesting : webTesting}
+          loading={desktop ? desktopTesting : webTesting}
+          onClick={() =>
+            void (desktop ? testDesktopNotification() : testWebNotification())
+          }
+        >
+          {translations(
+            desktop
+              ? 'settingsPanel.testDesktopNotification'
+              : 'settingsPanel.testWebNotification',
+          )}
+        </Button>
+        {webTestResult === 'success' ? (
+          <span className="text-secondary">
+            {translations(
+              desktop
+                ? 'settingsPanel.testDesktopNotificationSuccess'
+                : 'settingsPanel.testWebNotificationSuccess',
+            )}
+          </span>
+        ) : null}
+        {webTestResult === 'error' ? (
+          <span className="text-secondary">
+            {translations(
+              desktop
+                ? 'settingsPanel.testDesktopNotificationFailed'
+                : 'settingsPanel.testWebNotificationFailed',
+            )}
+          </span>
+        ) : null}
       </Flexbox>
     </Block>
   );
@@ -790,6 +941,19 @@ const Settings = ({
   const { onChange, onSave, settings } = useSettings();
   const translations = useTranslations('Admin');
   const [clearingUsage, setClearingUsage] = useState(false);
+  const desktopRuntime = useSyncExternalStore(
+    () => () => undefined,
+    () =>
+      Boolean(
+        (
+          window as unknown as {
+            desktop?: { notify?: unknown };
+          }
+        ).desktop?.notify,
+      ),
+    () => false,
+  );
+  const desktopApp = desktop || desktopRuntime;
 
   const clearUsageEvents = async () => {
     if (
@@ -883,6 +1047,7 @@ const Settings = ({
         </Flexbox>
       </Block>
       <CredentialExpiryNotificationSettings
+        desktop={desktopApp}
         onChange={onChange}
         settings={settings}
         translations={translations}
diff --git a/electron/main.ts b/electron/main.ts
index 538c7390..2e15759a 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -7,6 +7,7 @@ import {
   BrowserWindow,
   Menu,
   MenuItemConstructorOptions,
+  Notification,
   type NativeImage,
   Tray,
   app,
@@ -3707,6 +3708,21 @@ ipcMain.handle('desktop:open-home-page', () => {
   openExternally(HOME_PAGE_URL);
 });
 
+ipcMain.handle(
+  'desktop:notify',
+  (event, title: unknown, body: unknown): void => {
+    if (!mainWindow || mainWindow.isDestroyed()) return;
+    if (event.sender.id !== mainWindow.webContents.id) return;
+    if (typeof title !== 'string' || typeof body !== 'string') return;
+
+    const normalizedTitle = title.trim();
+    const normalizedBody = body.trim();
+    if (!normalizedTitle || !normalizedBody) return;
+
+    new Notification({ body: normalizedBody, title: normalizedTitle }).show();
+  },
+);
+
 /** The deployment itself, in the system browser: the app's window is not one. */
 ipcMain.handle('desktop:open-in-browser', () => {
   if (backend.mode === 'remote') {
diff --git a/electron/preload.ts b/electron/preload.ts
index b7d848f2..2f501ed7 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -24,4 +24,6 @@ contextBridge.exposeInMainWorld('desktop', {
   // and it is the page that knows how much room its own text took.
   setContentSize: (width: number, height: number): Promise<void> =>
     ipcRenderer.invoke('desktop:set-content-size', width, height),
+  notify: (title: string, body: string): Promise<void> =>
+    ipcRenderer.invoke('desktop:notify', title, body),
 });
diff --git a/lib/server/domain/config.ts b/lib/server/domain/config.ts
index c7504ddc..7e5e6731 100644
--- a/lib/server/domain/config.ts
+++ b/lib/server/domain/config.ts
@@ -32,6 +32,8 @@ export interface RuntimeConfig {
   CODEBUDDY_LOG_LEVEL: string;
   CODEBUDDY_API_TIMEOUT_MINUTES: number;
   CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED: boolean;
+  CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED: boolean;
+  CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED: boolean;
   CODEBUDDY_BARK_TOKEN: string;
   CODEBUDDY_WEB_SEARCH_BACKEND: string;
   CODEBUDDY_WEB_FETCH_BACKEND: string;
@@ -71,6 +73,8 @@ const DEFAULT_CONFIG: RuntimeConfig = {
   CODEBUDDY_LOG_LEVEL: 'INFO',
   CODEBUDDY_API_TIMEOUT_MINUTES: DEFAULT_API_TIMEOUT_MINUTES,
   CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED: false,
+  CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED: false,
+  CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED: false,
   CODEBUDDY_BARK_TOKEN: '',
   CODEBUDDY_WEB_SEARCH_BACKEND: 'searxng',
   CODEBUDDY_WEB_FETCH_BACKEND: 'codebuddy',
@@ -102,6 +106,10 @@ const SETTING_LABELS_BY_LOCALE: Record<
     CODEBUDDY_API_TIMEOUT_MINUTES: 'API timeout, first token (minutes)',
     CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED:
       'Credential expiry notifications',
+    CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED:
+      'Web/desktop credential expiry notifications',
+    CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED:
+      'Desktop credential expiry notifications',
     CODEBUDDY_BARK_TOKEN: 'Bark device key',
     CODEBUDDY_WEB_SEARCH_BACKEND: 'Web search backend',
     CODEBUDDY_WEB_FETCH_BACKEND: 'Web fetch backend',
@@ -127,6 +135,10 @@ const SETTING_LABELS_BY_LOCALE: Record<
     CODEBUDDY_LOG_LEVEL: 'ログレベル',
     CODEBUDDY_API_TIMEOUT_MINUTES: 'API タイムアウト・最初のトークン (分)',
     CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED: '認証情報の有効期限通知',
+    CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED:
+      'Web/デスクトップの認証情報有効期限通知',
+    CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED:
+      'デスクトップの認証情報有効期限通知',
     CODEBUDDY_BARK_TOKEN: 'Bark デバイスキー',
     CODEBUDDY_WEB_SEARCH_BACKEND: 'Web 検索バックエンド',
     CODEBUDDY_WEB_FETCH_BACKEND: 'Web フェッチバックエンド',
@@ -151,6 +163,10 @@ const SETTING_LABELS_BY_LOCALE: Record<
     CODEBUDDY_LOG_LEVEL: '日志级别',
     CODEBUDDY_API_TIMEOUT_MINUTES: 'API 超时时间,首个 token(分钟)',
     CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED: '凭据过期通知',
+    CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED:
+      'Web/桌面端凭据过期通知',
+    CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED:
+      '桌面端凭据过期通知',
     CODEBUDDY_BARK_TOKEN: 'Bark Token',
     CODEBUDDY_WEB_SEARCH_BACKEND: 'WebSearch 后端',
     CODEBUDDY_WEB_FETCH_BACKEND: 'WebFetch 后端',
@@ -303,6 +319,16 @@ export const getActiveConfig = async (): Promise<RuntimeConfig> => {
       persisted.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED ??
         process.env.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED,
     ),
+    CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED: normalizeValue(
+      'CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED',
+      persisted.CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED ??
+        process.env.CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED,
+    ),
+    CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED: normalizeValue(
+      'CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED',
+      persisted.CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED ??
+        process.env.CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED,
+    ),
     CODEBUDDY_BARK_TOKEN: normalizeValue(
       'CODEBUDDY_BARK_TOKEN',
       persisted.CODEBUDDY_BARK_TOKEN ?? process.env.CODEBUDDY_BARK_TOKEN,
diff --git a/lib/server/domain/credential-expiry-notifications.ts b/lib/server/domain/credential-expiry-notifications.ts
index 097b4c52..60d0508b 100644
--- a/lib/server/domain/credential-expiry-notifications.ts
+++ b/lib/server/domain/credential-expiry-notifications.ts
@@ -15,7 +15,12 @@ type ExpiryNotificationKey =
 
 interface ExpiryNotificationState {
   expiresAt: number;
-  sent: Partial<Record<ExpiryNotificationKey, boolean>>;
+  sent: Partial<
+    Record<
+      ExpiryNotificationKey,
+      Partial<Record<'bark' | 'web' | 'desktop', boolean>>
+    >
+  >;
 }
 
 type ExpiryNotificationStates = Record<string, ExpiryNotificationState>;
@@ -28,6 +33,60 @@ const globalSchedulerState = globalThis as typeof globalThis & {
   __codebuddy2apiCredentialExpiryNotifications__?: {
     timer: ReturnType<typeof setInterval>;
   };
+  __codebuddy2apiCredentialExpirySubscribers__?: Set<CredentialExpiryNotificationSubscriber>;
+};
+
+export type CredentialExpiryNotificationChannel = 'desktop' | 'web';
+
+export interface CredentialExpiryNotificationEvent {
+  body: string;
+  credential: string;
+  expiresAt: number;
+  key: ExpiryNotificationKey;
+  title: string;
+}
+
+interface CredentialExpiryNotificationSubscriber {
+  channel: CredentialExpiryNotificationChannel;
+  send: (event: CredentialExpiryNotificationEvent) => void;
+}
+
+const notificationSubscribers =
+  globalSchedulerState.__codebuddy2apiCredentialExpirySubscribers__ ??
+  new Set<CredentialExpiryNotificationSubscriber>();
+globalSchedulerState.__codebuddy2apiCredentialExpirySubscribers__ =
+  notificationSubscribers;
+
+export const subscribeCredentialExpiryNotifications = (
+  channel: CredentialExpiryNotificationChannel,
+  send: (event: CredentialExpiryNotificationEvent) => void,
+): (() => void) => {
+  const subscriber = { channel, send };
+  notificationSubscribers.add(subscriber);
+  return () => notificationSubscribers.delete(subscriber);
+};
+
+export const publishCredentialExpiryNotification = (
+  channel: CredentialExpiryNotificationChannel,
+  event: CredentialExpiryNotificationEvent,
+): number => {
+  let delivered = 0;
+
+  notificationSubscribers.forEach((subscriber) => {
+    if (subscriber.channel !== channel) return;
+
+    try {
+      subscriber.send(event);
+      delivered += 1;
+    } catch (error) {
+      console.warn(
+        '[CodeBuddy2API] Credential expiry notification subscriber failed',
+        error,
+      );
+    }
+  });
+
+  return delivered;
 };
 
 let stateMutationQueue: Promise<void> = Promise.resolve();
@@ -56,7 +115,26 @@ const loadNotificationStates = async (): Promise<ExpiryNotificationStates> => {
       sent: Object.fromEntries(
         CREDENTIAL_EXPIRY_NOTIFICATION_THRESHOLDS.filter(({ key }) =>
           Boolean((sent as Record<string, unknown>)[key]),
-        ).map(({ key }) => [key, true]),
+        ).map(({ key }) => {
+          const value = (sent as Record<string, unknown>)[key];
+          return [
+            key,
+            typeof value === 'boolean'
+              ? { bark: value }
+              : Object.fromEntries(
+                  ['bark', 'web', 'desktop']
+                    .filter((channel) =>
+                      Boolean(
+                        value &&
+                        typeof value === 'object' &&
+                        !Array.isArray(value) &&
+                        (value as Record<string, unknown>)[channel],
+                      ),
+                    )
+                    .map((channel) => [channel, true]),
+                ),
+          ];
+        }),
       ),
     };
     return result;
@@ -135,8 +213,14 @@ export const runCredentialExpiryNotificationTick = async (
 ): Promise<string[]> => {
   const config = await getActiveConfig();
   const token = config.CODEBUDDY_BARK_TOKEN.trim();
-
-  if (!config.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED || !token) {
+  const barkEnabled =
+    config.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED && Boolean(token);
+  const webEnabled =
+    config.CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED;
+  const desktopEnabled =
+    config.CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED;
+
+  if (!barkEnabled && !webEnabled && !desktopEnabled) {
     return [];
   }
 
@@ -171,29 +255,84 @@ export const runCredentialExpiryNotificationTick = async (
               )
             : undefined;
 
-    if (!threshold || state.sent[threshold.key]) continue;
+    if (!threshold) continue;
+
+    const thresholdState = state.sent[threshold.key] ?? {};
+    const shouldSendBark = barkEnabled && !thresholdState.bark;
+    const shouldSendWeb = webEnabled && !thresholdState.web;
+    const shouldSendDesktop = desktopEnabled && !thresholdState.desktop;
+
+    if (!shouldSendBark && !shouldSendWeb && !shouldSendDesktop) continue;
 
     const name = credentialName(credential);
 
-    try {
-      await sendBarkNotification({
-        body: `凭据 ${name} ${threshold.label}。过期时间：${new Date(
-          expiresAt * 1000,
-        ).toLocaleString()}`,
-        title: 'CodeBuddy2API 凭据提醒',
-        token,
+    const body = `凭据 ${name} ${threshold.label}。过期时间：${new Date(
+      expiresAt * 1000,
+    ).toLocaleString()}`;
+    const title = 'CodeBuddy2API 凭据提醒';
+    let delivered = false;
+
+    if (shouldSendBark) {
+      try {
+        await sendBarkNotification({
+          body,
+          title,
+          token,
+        });
+        thresholdState.bark = true;
+        delivered = true;
+      } catch (error) {
+        console.warn(
+          `[CodeBuddy2API] Bark credential expiry notification failed for ${credential.filename}`,
+          error,
+        );
+      }
+    }
+
+    if (shouldSendWeb) {
+      const subscriberCount = publishCredentialExpiryNotification('web', {
+        body,
+        credential: name,
+        expiresAt,
+        key: threshold.key,
+        title,
       });
-      state.sent[threshold.key] = true;
-      states[credential.filename] = state;
-      await updateNotificationStates((saved) => {
-        saved[credential.filename] = state;
+
+      if (subscriberCount > 0) {
+        thresholdState.web = true;
+        delivered = true;
+      }
+    }
+
+    if (shouldSendDesktop) {
+      const subscriberCount = publishCredentialExpiryNotification('desktop', {
+        body,
+        credential: name,
+        expiresAt,
+        key: threshold.key,
+        title,
       });
-      sentNotifications.push(`${credential.filename}:${threshold.key}`);
-    } catch (error) {
-      console.warn(
-        `[CodeBuddy2API] Bark credential expiry notification failed for ${credential.filename}`,
-        error,
-      );
+
+      if (subscriberCount > 0) {
+        thresholdState.desktop = true;
+        delivered = true;
+      }
+    }
+
+    if (delivered) {
+      state.sent[threshold.key] = thresholdState;
+      states[credential.filename] = state;
+      try {
+        await updateNotificationStates((saved) => {
+          saved[credential.filename] = state;
+        });
+        sentNotifications.push(`${credential.filename}:${threshold.key}`);
+      } catch (error) {
+        console.warn(
+          `[CodeBuddy2API] Credential expiry notification state save failed for ${credential.filename}`,
+          error,
+        );
+      }
     }
   }
 
diff --git a/messages/en-US.json b/messages/en-US.json
index 8fa3e431..2024d112 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -462,13 +462,23 @@
       "apiTimeoutHint": "Measured from when a request is sent until the upstream produces its first delta. Once output has started, a long answer is allowed to finish. Accepts fractional minutes, from 0.1 to 1440.",
       "credentialExpiryNotificationsTitle": "Credential expiry notifications",
       "credentialExpiryNotificationsDescription": "Send a Bark notification when a credential has 3 days left, 1 day left, or has expired. Checks run while the service is running.",
-      "credentialExpiryNotificationsEnabled": "Enable credential expiry notifications",
+      "credentialExpiryNotificationsEnabled": "Enable Bark credential expiry notifications",
+      "webNotificationsEnabled": "Enable web credential expiry notifications",
+      "webNotificationsDescription": "Show a browser notification at the same thresholds. Allow notifications when prompted.",
+      "desktopNotificationsEnabled": "Enable desktop credential expiry notifications",
+      "desktopNotificationsDescription": "Show a native system notification in the desktop app at the same thresholds.",
       "barkToken": "Bark token",
       "barkTokenPlaceholder": "Enter your Bark token",
       "barkLink": "Open the Bark website to get a token",
       "testBark": "Send test notification",
       "testBarkSuccess": "Test notification sent.",
       "testBarkFailed": "Test notification failed.",
+      "testWebNotification": "Send web/desktop test notification",
+      "testWebNotificationSuccess": "Web/desktop test notification sent.",
+      "testWebNotificationFailed": "Web/desktop test notification failed.",
+      "testDesktopNotification": "Send desktop test notification",
+      "testDesktopNotificationSuccess": "Desktop test notification sent.",
+      "testDesktopNotificationFailed": "Desktop test notification failed.",
       "clearUsageEvents": "Clear usage event cache",
       "confirmClearUsageEvents": "Clear all stored usage events?",
       "helper": "The passkey RP ID should usually match the final site domain. HTTPS works directly; localhost is commonly allowed for local development, while other non-HTTPS domains usually cannot use passkeys.",
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index 418f5227..358a243a 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -462,13 +462,23 @@
       "apiTimeoutHint": "リクエスト送信からアップストリームが最初の delta を返すまでの時間です。出力が始まった後は、長い応答でも完了まで許可されます。0.1〜1440 の範囲で小数分を指定できます。",
       "credentialExpiryNotificationsTitle": "認証情報の有効期限通知",
       "credentialExpiryNotificationsDescription": "認証情報の有効期限が 3 日前、1 日前、または期限切れになったときに Bark で通知します。サービスの実行中に確認します。",
-      "credentialExpiryNotificationsEnabled": "認証情報の有効期限通知を有効にする",
+      "credentialExpiryNotificationsEnabled": "Bark の認証情報有効期限通知を有効にする",
+      "webNotificationsEnabled": "Web の認証情報有効期限通知を有効にする",
+      "webNotificationsDescription": "同じタイミングでブラウザ通知を表示します。表示された権限を許可してください。",
+      "desktopNotificationsEnabled": "デスクトップの認証情報有効期限通知を有効にする",
+      "desktopNotificationsDescription": "同じタイミングでデスクトップアプリのシステム通知を表示します。",
       "barkToken": "Bark トークン",
       "barkTokenPlaceholder": "Bark トークンを入力",
       "barkLink": "Bark のサイトでトークンを取得",
       "testBark": "テスト通知を送信",
       "testBarkSuccess": "テスト通知を送信しました。",
       "testBarkFailed": "テスト通知の送信に失敗しました。",
+      "testWebNotification": "Web/デスクトップのテスト通知を送信",
+      "testWebNotificationSuccess": "Web/デスクトップのテスト通知を送信しました。",
+      "testWebNotificationFailed": "Web/デスクトップのテスト通知の送信に失敗しました。",
+      "testDesktopNotification": "デスクトップのテスト通知を送信",
+      "testDesktopNotificationSuccess": "デスクトップのテスト通知を送信しました。",
+      "testDesktopNotificationFailed": "デスクトップのテスト通知の送信に失敗しました。",
       "clearUsageEvents": "使用量イベントキャッシュを削除",
       "confirmClearUsageEvents": "保存済みの使用量イベントをすべて削除しますか？",
       "helper": "Passkey の RP ID は通常、最終的にアクセスするドメインと一致させます。HTTPS ではそのまま利用でき、localhost はローカル開発で使えることが多い一方、それ以外の非 HTTPS ドメインでは通常 passkey を利用できません。",
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 03b3a4c6..4ba49720 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -462,13 +462,23 @@
       "apiTimeoutHint": "从发起请求开始计时,直到上游返回第一个 delta。一旦开始输出,即使回答较长也会允许其完成。支持小数分钟,取值范围 0.1~1440。",
       "credentialExpiryNotificationsTitle": "凭据过期通知",
       "credentialExpiryNotificationsDescription": "凭据将在还有 3 天、还有 1 天和已过期时通过 Bark 通知。通知服务只会在服务运行时检查。",
-      "credentialExpiryNotificationsEnabled": "启用凭据过期通知",
+      "credentialExpiryNotificationsEnabled": "启用 Bark 凭据过期通知",
+      "webNotificationsEnabled": "启用 Web 端凭据过期通知",
+      "webNotificationsDescription": "在相同的时间点通过浏览器通知提醒。出现权限提示时请允许通知。",
+      "desktopNotificationsEnabled": "启用桌面端凭据过期通知",
+      "desktopNotificationsDescription": "在相同的时间点通过桌面应用的系统通知提醒。",
       "barkToken": "Bark Token",
       "barkTokenPlaceholder": "输入 Bark Token",
       "barkLink": "打开 Bark 官网获取 Token",
       "testBark": "发送测试通知",
       "testBarkSuccess": "测试通知已发送。",
       "testBarkFailed": "测试通知发送失败。",
+      "testWebNotification": "发送 Web/桌面端测试通知",
+      "testWebNotificationSuccess": "Web/桌面端测试通知已发送。",
+      "testWebNotificationFailed": "Web/桌面端测试通知发送失败。",
+      "testDesktopNotification": "发送桌面端测试通知",
+      "testDesktopNotificationSuccess": "桌面端测试通知已发送。",
+      "testDesktopNotificationFailed": "桌面端测试通知发送失败。",
       "clearUsageEvents": "清空用量统计缓存",
       "confirmClearUsageEvents": "确认清空所有已保存的用量统计记录吗？",
       "helper": "Passkey RP ID 通常应与最终访问域名一致。HTTPS 站点可直接使用；localhost 在现代浏览器中通常可用于本地调试，其它非 HTTPS 域名通常无法使用 passkey。",
diff --git a/tests/server/credential-expiry-notifications.test.ts b/tests/server/credential-expiry-notifications.test.ts
index b71fbf26..fe9fd044 100644
--- a/tests/server/credential-expiry-notifications.test.ts
+++ b/tests/server/credential-expiry-notifications.test.ts
@@ -30,11 +30,16 @@ vi.stubGlobal('fetch', send);
 const {
   runCredentialExpiryNotificationTick,
   sendBarkNotification,
+  subscribeCredentialExpiryNotifications,
   startCredentialExpiryNotificationScheduler,
   stopCredentialExpiryNotificationScheduler,
 } = await import('@/lib/server/domain/credential-expiry-notifications');
 const BarkTestRoute =
   await import('@/app/admin-api/notifications/bark/test/route');
+const CredentialExpiryTestRoute =
+  await import('@/app/admin-api/notifications/credential-expiry/test/route');
+const CredentialExpiryStreamRoute =
+  await import('@/app/admin-api/notifications/credential-expiry/route');
 
 const cleanup = (): void => {
   fs.rmSync(tempRootDir, { force: true, recursive: true, maxRetries: 5 });
@@ -142,6 +147,37 @@ describe('credential expiry notifications', () => {
     ]);
   });
 
+  it('delivers web and desktop notifications through separate subscribers', async () => {
+    await updateSettings({
+      CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED: false,
+      CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED: true,
+      CODEBUDDY_CREDENTIAL_EXPIRY_DESKTOP_NOTIFICATIONS_ENABLED: true,
+      CODEBUDDY_BARK_TOKEN: '',
+    });
+    await seed('separate-channels.json', 3 * DAY - 5);
+    const web = vi.fn();
+    const desktop = vi.fn();
+    const unsubscribeWeb = subscribeCredentialExpiryNotifications('web', web);
+    const unsubscribeDesktop = subscribeCredentialExpiryNotifications(
+      'desktop',
+      desktop,
+    );
+
+    try {
+      await expect(runCredentialExpiryNotificationTick(now)).resolves.toEqual([
+        'separate-channels.json:three_days',
+      ]);
+      expect(web).toHaveBeenCalledTimes(1);
+      expect(desktop).toHaveBeenCalledTimes(1);
+      await expect(runCredentialExpiryNotificationTick(now)).resolves.toEqual(
+        [],
+      );
+    } finally {
+      unsubscribeWeb();
+      unsubscribeDesktop();
+    }
+  });
+
   it('ignores malformed state and credentials without expiry data', async () => {
     await writeStorageJson('credentials', 'expiry_notifications.json', {
       invalid: { expiresAt: 'not-a-number', sent: {} },
@@ -245,6 +281,64 @@ describe('credential expiry notifications', () => {
     expect(unauthorized.status).toBe(401);
   });
 
+  it('serves channel-specific web and desktop test notifications', async () => {
+    const web = vi.fn();
+    const desktop = vi.fn();
+    const unsubscribeWeb = subscribeCredentialExpiryNotifications('web', web);
+    const unsubscribeDesktop = subscribeCredentialExpiryNotifications(
+      'desktop',
+      desktop,
+    );
+
+    try {
+      const webResponse = await CredentialExpiryTestRoute.POST(
+        new Request(
+          'http://localhost/admin-api/notifications/credential-expiry/test',
+          {
+            body: JSON.stringify({ channel: 'web' }),
+            headers: { 'Content-Type': 'application/json' },
+            method: 'POST',
+          },
+        ),
+      );
+      expect(webResponse.status).toBe(200);
+      expect(web).toHaveBeenCalledTimes(1);
+      expect(desktop).not.toHaveBeenCalled();
+
+      const missingChannel = await CredentialExpiryTestRoute.POST(
+        new Request(
+          'http://localhost/admin-api/notifications/credential-expiry/test',
+          {
+            body: JSON.stringify({}),
+            headers: { 'Content-Type': 'application/json' },
+            method: 'POST',
+          },
+        ),
+      );
+      expect(missingChannel.status).toBe(400);
+
+      const stream = await CredentialExpiryStreamRoute.GET(
+        new Request(
+          'http://localhost/admin-api/notifications/credential-expiry?channel=web',
+        ),
+      );
+      expect(stream.status).toBe(200);
+      const reader = stream.body?.getReader();
+      await expect(reader?.read()).resolves.toMatchObject({ done: false });
+      await reader?.cancel();
+
+      const invalidStream = await CredentialExpiryStreamRoute.GET(
+        new Request(
+          'http://localhost/admin-api/notifications/credential-expiry',
+        ),
+      );
+      expect(invalidStream.status).toBe(400);
+    } finally {
+      unsubscribeWeb();
+      unsubscribeDesktop();
+    }
+  });
+
   it('starts only one scheduler and can be stopped', () => {
     const interval = vi.spyOn(globalThis, 'setInterval');
     const clear = vi.spyOn(globalThis, 'clearInterval');