glad-web 1.0.35 → 1.0.37

package/lib/notifications/serverchan-settings-store.js

@@ -0,0 +1,115 @@
+const fs = require('fs');
+const {
+  getConfig,
+  setConfig,
+  getConfigPath
+} = require('../config/manager');
+
+const CLIENT_TYPES = new Set(['wechat', 'pushdeer']);
+
+function normalizeClientType(value) {
+  const clientType = String(value || 'wechat').trim().toLowerCase();
+  if (!CLIENT_TYPES.has(clientType)) {
+    const error = new Error('接收客户端必须是微信或 PushDeer');
+    error.statusCode = 400;
+    throw error;
+  }
+  return clientType;
+}
+
+function normalizeSendKey(value) {
+  const sendKey = String(value || '').trim();
+  if (!sendKey || sendKey.length < 8 || sendKey.length > 512 || /\s/.test(sendKey)) {
+    const error = new Error('请输入有效的 Server酱 SendKey');
+    error.statusCode = 400;
+    throw error;
+  }
+  return sendKey;
+}
+
+function maskSendKey(sendKey) {
+  if (!sendKey) return '';
+  return `${sendKey.slice(0, Math.min(3, sendKey.length))}${'•'.repeat(10)}`;
+}
+
+class ServerChanSettingsStore {
+  constructor({
+    readConfig = getConfig,
+    writeConfig = setConfig,
+    configPath = getConfigPath,
+    chmod = fs.chmodSync
+  } = {}) {
+    this.readConfig = readConfig;
+    this.writeConfig = writeConfig;
+    this.configPath = configPath;
+    this.chmod = chmod;
+  }
+
+  get() {
+    const stored = this.readConfig('serverChan') || {};
+    return {
+      sendKey: String(stored.sendKey || '').trim(),
+      clientType: CLIENT_TYPES.has(stored.clientType) ? stored.clientType : 'wechat'
+    };
+  }
+
+  getPublic() {
+    const settings = this.get();
+    return {
+      configured: Boolean(settings.sendKey),
+      maskedKey: maskSendKey(settings.sendKey),
+      clientType: settings.clientType
+    };
+  }
+
+  save(input = {}) {
+    const existing = this.get();
+    const sendKey = input.sendKey == null || String(input.sendKey).trim() === ''
+      ? existing.sendKey
+      : normalizeSendKey(input.sendKey);
+    if (!sendKey) {
+      const error = new Error('请先填写 Server酱 SendKey');
+      error.statusCode = 400;
+      throw error;
+    }
+    const settings = {
+      sendKey,
+      clientType: normalizeClientType(input.clientType ?? existing.clientType)
+    };
+    this.writeConfig('serverChan', settings);
+    this.restrictConfigFile();
+    return this.getPublic();
+  }
+
+  resolve(input = {}) {
+    const existing = this.get();
+    return {
+      sendKey: input.sendKey == null || String(input.sendKey).trim() === ''
+        ? normalizeSendKey(existing.sendKey)
+        : normalizeSendKey(input.sendKey),
+      clientType: normalizeClientType(input.clientType ?? existing.clientType)
+    };
+  }
+
+  clear() {
+    this.writeConfig('serverChan', { sendKey: '', clientType: 'wechat' });
+    this.restrictConfigFile();
+    return this.getPublic();
+  }
+
+  restrictConfigFile() {
+    try {
+      const configPath = typeof this.configPath === 'function' ? this.configPath() : this.configPath;
+      if (configPath && fs.existsSync(configPath)) this.chmod(configPath, 0o600);
+    } catch (_) {
+      // Best effort: configuration remains usable on filesystems without chmod support.
+    }
+  }
+}
+
+module.exports = {
+  ServerChanSettingsStore,
+  normalizeClientType,
+  normalizeSendKey,
+  maskSendKey
+};

package/lib/server/routes/notifications.js

@@ -0,0 +1,52 @@
+function statusCode(error) {
+  return Number(error?.statusCode) || 500;
+}
+
+function registerNotificationRoutes(app, {
+  settingsStore,
+  notificationService
+}) {
+  app.get('/api/notifications/serverchan', (_req, res) => {
+    res.json(settingsStore.getPublic());
+  });
+
+  app.put('/api/notifications/serverchan', (req, res) => {
+    try {
+      res.json({ success: true, settings: settingsStore.save(req.body || {}) });
+    } catch (error) {
+      res.status(statusCode(error)).json({ error: error.message });
+    }
+  });
+
+  app.delete('/api/notifications/serverchan', (_req, res) => {
+    const settings = settingsStore.clear();
+    notificationService.disableAllSessions();
+    res.json({ success: true, settings });
+  });
+
+  app.post('/api/notifications/serverchan/test', async (req, res) => {
+    try {
+      await notificationService.sendTest(req.body || {});
+      res.json({ success: true });
+    } catch (error) {
+      res.status(statusCode(error)).json({ error: error.message });
+    }
+  });
+
+  app.put('/api/sessions/:id/notifications/serverchan', async (req, res) => {
+    try {
+      const state = await notificationService.setSessionEnabled(
+        req.params.id,
+        Boolean(req.body?.enabled)
+      );
+      res.json({ success: true, state });
+    } catch (error) {
+      res.status(statusCode(error)).json({
+        error: error.message,
+        ...(error.code ? { code: error.code } : {})
+      });
+    }
+  });
+}
+
+module.exports = registerNotificationRoutes;

package/lib/session/session-manager.js

@@ -69,6 +69,7 @@ class SessionManager extends EventEmitter {
       workingDirectory: this.getSessionWorkingDirectory(session),
       mode: ['claude-structured', 'codex-structured'].includes(session.kind) ? (session.presentation || 'structured') : 'terminal',
       hasUnreadCompletion: Boolean(session.hasUnreadCompletion),
+      serverChanNotificationEnabled: Boolean(session.serverChanNotificationEnabled),
       timedInputCount: session.timedInputs
         ? Array.from(session.timedInputs.values()).filter(item => item.sendAt > Date.now()).length
         : 0

package/lib/web/codex.js

@@ -10,6 +10,11 @@
             if (status === 'completed') return item.exitCode && item.exitCode !== 0 ? 'failed' : 'completed';
             return status;
         }
+        function codexMessageNeedsDetail(item) {
+            if (!item?.hasDetail) return false;
+            const loadedRevision = Number(codexDetailRevisions.get(String(item.id)) || 0);
+            return !item.detailLoaded || loadedRevision < Number(item.detailRevision || 0);
+        }
         function formatCodexDuration(durationMs) {
             const value = Number(durationMs || 0);
             if (!(value > 0)) return '';
@@ -108,7 +113,7 @@
         }
         function renderCodexTool(item, permission = null) {
             const status = codexToolStatus(item);
-            const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
+            const isError = status === 'failed' || Boolean(item.error) || Boolean(item.hasError) || (item.exitCode != null && item.exitCode !== 0);
             const runningClass = status === 'running' ? ' running' : '';
             if (item.name === 'CodexPatch') {
                 return `<div class="codex-tool${isError ? ' error' : ''}">${renderCodexPatch(item)}${permission ? renderCodexPermission(permission, true) : ''}</div>`;
@@ -138,7 +143,11 @@
             }).join('');
             const label = running ? 'Working' : failed ? 'Work finished with errors' : duration ? `Worked for ${duration}` : 'Worked';
             const key = items.map(item => item.id || item.providerId || '').join('-');
-            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"><summary>${label} · ${items.length} ${items.length === 1 ? 'tool' : 'tools'}</summary><div class="codex-work-group-body">${tools}</div></details>`;
+            const allDetailIds = items.filter(item => item.hasDetail).map(item => item.id).filter(Boolean);
+            const detailIds = items.filter(codexMessageNeedsDetail).map(item => item.id).filter(Boolean);
+            const lazy = detailIds.length
+                ? '<div class="codex-lazy-detail">Open to load tool details…</div>' : '';
+            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"${allDetailIds.length ? ` data-codex-detail-ids="${escapeHtml(allDetailIds.join(','))}"` : ''}><summary>${label} · ${items.length} ${items.length === 1 ? 'tool' : 'tools'}</summary><div class="codex-work-group-body">${tools}${lazy}</div></details>`;
         }
         function isCodexSubagentItem(item) {
             return Boolean(item?.threadId && codexState.threadId && item.threadId !== codexState.threadId);
@@ -159,8 +168,13 @@
             if (tools.length) counts.push(`${tools.length} ${tools.length === 1 ? 'tool' : 'tools'}`);
             if (messages.length) counts.push(`${messages.length} ${messages.length === 1 ? 'message' : 'messages'}`);
             const label = running ? 'Subagent working' : duration ? `Subagent worked for ${duration}` : 'Subagent worked';
+            const needsDetail = items.some(codexMessageNeedsDetail);
+            const deferContent = needsDetail && !items.some(item => item.detailLoaded);
             const body = [];
-            for (let i = 0; i < content.length;) {
+            if (needsDetail) {
+                body.push(`<div class="codex-lazy-detail">${deferContent ? 'Open to load subagent details…' : 'Updating subagent details…'}</div>`);
+            }
+            for (let i = 0; !deferContent && i < content.length;) {
                 const item = content[i];
                 if (item.kind === 'tool') {
                     const group = [];
@@ -171,14 +185,14 @@
                     continue;
                 }
                 if (item.kind === 'assistant' || item.kind === 'user') {
-                    body.push(`<div class="codex-subagent-message${item.kind === 'user' ? ' task' : ''}">${renderMarkdown(item.text || '')}</div>`);
+                    if (item.text) body.push(`<div class="codex-subagent-message${item.kind === 'user' ? ' task' : ''}">${renderMarkdown(item.text)}</div>`);
                 } else if (item.text) {
                     body.push(`<div class="codex-subagent-message">${codexText(item.text)}</div>`);
                 }
                 i += 1;
             }
             const suffix = counts.length ? ` · ${counts.join(' · ')}` : '';
-            return `<details class="codex-work-group codex-subagent-group" data-codex-key="subagent-${escapeHtml(threadId)}"><summary>${escapeHtml(label + suffix)}</summary><div class="codex-work-group-body">${body.join('')}</div></details>`;
+            return `<details class="codex-work-group codex-subagent-group" data-codex-key="subagent-${escapeHtml(threadId)}" data-codex-thread-id="${escapeHtml(threadId)}"><summary>${escapeHtml(label + suffix)}</summary><div class="codex-work-group-body">${body.join('')}</div></details>`;
         }
         function renderCodexMessageTime(item, finalOnly = false) {
             if (!item || (finalOnly && item.streaming)) return '';
@@ -320,46 +334,89 @@
             const current = container.firstElementChild;
             if (!current) container.appendChild(next);
             else syncCodexDom(current, next);
-            if (codexHistoryPrependAnchor) {
-                const anchor = codexHistoryPrependAnchor;
-                codexHistoryPrependAnchor = null;
-                container.scrollTop = anchor.scrollTop + Math.max(0, container.scrollHeight - anchor.scrollHeight);
-            } else {
-                container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
+            container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
+        }
+
+        function installCodexLazyDetailHandler() {
+            const container = document.getElementById('codex-chat-container');
+            if (!container || container.dataset.lazyDetailHandler === 'true') return;
+            container.dataset.lazyDetailHandler = 'true';
+            container.addEventListener('toggle', handleCodexLazyToggle, true);
+        }
+
+        function handleCodexLazyToggle(event) {
+            const group = event.target;
+            if (!(group instanceof HTMLDetailsElement) || !group.open || !group.classList.contains('codex-work-group')) return;
+            const threadId = group.dataset.codexThreadId || '';
+            const ids = String(group.dataset.codexDetailIds || '').split(',').filter(Boolean)
+                .filter(id => codexMessageNeedsDetail(codexMessages.find(item => item.id === id)));
+            if (threadId && codexMessages.some(item => item.threadId === threadId && codexMessageNeedsDetail(item))) {
+                void requestCodexDetails({ threadId });
             }
+            else if (ids.length) void requestCodexDetails({ ids });
         }
 
-        function applyCodexHistoryPageMeta(page = {}) {
-            codexHistoryBeforeId = page?.beforeId || codexMessages[0]?.id || null;
-            codexHistoryHasMore = Boolean(page?.hasMore);
-            codexHistoryLoading = false;
+        function requestCodexDetails({ ids = [], threadId = '' } = {}) {
+            if (currentSocket?.readyState !== 1) return Promise.resolve(false);
+            const normalizedIds = Array.from(new Set(ids.map(value => String(value || '')).filter(Boolean))).sort();
+            const key = threadId ? `thread:${threadId}` : `ids:${normalizedIds.join(',')}`;
+            for (const pending of codexDetailRequests.values()) {
+                if (pending.key === key) return pending.promise;
+            }
+            const requestId = `detail-${++codexDetailRequestSeq}`;
+            let resolveRequest;
+            const promise = new Promise(resolve => { resolveRequest = resolve; });
+            const timer = setTimeout(() => {
+                const pending = codexDetailRequests.get(requestId);
+                if (!pending) return;
+                codexDetailRequests.delete(requestId);
+                pending.resolve(false);
+            }, 15000);
+            codexDetailRequests.set(requestId, { key, promise, resolve: resolveRequest, timer });
+            currentSocket.send(JSON.stringify({
+                type: 'codex-detail-request',
+                requestId,
+                ...(threadId ? { threadId } : { ids: normalizedIds })
+            }));
+            return promise;
         }
 
-        function handleCodexHistoryScroll(event) {
-            if (event?.isTrusted) codexHistoryUserScrolled = true;
-            if (!codexHistoryUserScrolled || !codexHistoryHasMore || codexHistoryLoading) return;
-            const container = event?.currentTarget || document.getElementById('codex-chat-container');
-            const scrollRange = Math.max(0, container.scrollHeight - container.clientHeight);
-            if (container.scrollTop > scrollRange * 0.5) return;
-            if (!codexHistoryBeforeId || currentSocket?.readyState !== 1) return;
-            codexHistoryLoading = true;
-            currentSocket.send(JSON.stringify({ type: 'codex-history-before', beforeId: codexHistoryBeforeId }));
+        function applyCodexDetailResponse(response) {
+            const pending = codexDetailRequests.get(response.requestId);
+            if (!pending) return;
+            const detail = response.detail || {};
+            for (const message of detail.messages || []) {
+                const index = codexMessages.findIndex(item => item.id === message.id);
+                if (index >= 0) codexMessages[index] = { ...codexMessages[index], ...message, detailLoaded: true };
+                else codexMessages.push({ ...message, detailLoaded: true });
+                codexDetailRevisions.set(String(message.id), Number(message.updatedAt || message.createdAt || 0));
+            }
+            clearTimeout(pending.timer);
+            codexDetailRequests.delete(response.requestId);
+            pending.resolve(true);
+            renderCodexChat();
         }
 
-        function applyCodexHistoryPage(page = {}) {
-            const older = Array.isArray(page.messages) ? page.messages : [];
-            const knownIds = new Set(codexMessages.map(item => String(item.id || '')));
-            const uniqueOlder = older.filter(item => item?.id && !knownIds.has(String(item.id)));
-            const container = document.getElementById('codex-chat-container');
-            if (uniqueOlder.length && container) {
-                codexHistoryPrependAnchor = {
-                    scrollTop: container.scrollTop,
-                    scrollHeight: container.scrollHeight
-                };
-                codexMessages = [...uniqueOlder, ...codexMessages];
+        function codexDetailIsOpen(message) {
+            if (!message?.id) return false;
+            if (isCodexSubagentItem(message)) {
+                return Array.from(document.querySelectorAll('.codex-subagent-group[open]'))
+                    .some(group => group.dataset.codexKey === `subagent-${message.threadId}`);
             }
-            applyCodexHistoryPageMeta(page);
-            if (uniqueOlder.length) renderCodexChat();
+            return Array.from(document.querySelectorAll('.codex-work-group[open][data-codex-detail-ids]'))
+                .some(group => String(group.dataset.codexDetailIds || '').split(',').includes(String(message.id)));
+        }
+
+        function scheduleCodexDetailRefresh(message) {
+            if (!message || !codexDetailIsOpen(message)) return;
+            if (!message.id || (!message.detailLoaded && !isCodexSubagentItem(message))) return;
+            codexDetailRefreshIds.add(String(message.id));
+            clearTimeout(codexDetailRefreshTimer);
+            codexDetailRefreshTimer = setTimeout(() => {
+                const ids = Array.from(codexDetailRefreshIds);
+                codexDetailRefreshIds.clear();
+                if (ids.length) void requestCodexDetails({ ids });
+            }, 300);
         }
 
         function applyCodexState(state = {}) {
@@ -418,7 +475,18 @@
             if (!pending.length) return false;
             const request = pending[codexApprovalJumpIndex % pending.length];
             codexApprovalJumpIndex = (codexApprovalJumpIndex + 1) % pending.length;
-            return focusCodexApproval(String(request.id || ''));
+            void loadAndFocusCodexApproval(request);
+            return true;
+        }
+
+        async function loadAndFocusCodexApproval(request) {
+            const permissionId = String(request?.id || '');
+            const message = codexMessages.find(item => String(item.providerId || item.id || '') === permissionId);
+            if (message && codexMessageNeedsDetail(message)) {
+                if (isCodexSubagentItem(message)) await requestCodexDetails({ threadId: String(message.threadId) });
+                else await requestCodexDetails({ ids: [String(message.id)] });
+            }
+            requestAnimationFrame(() => focusCodexApproval(permissionId));
         }
 
         function focusCodexApproval(permissionId, retry = true) {
@@ -482,13 +550,32 @@
 
         function applyCodexEvent(event) {
             if (!event) return;
-            if (event.type === 'message' && event.message) codexMessages.push(event.message);
-            else if (event.type === 'message-updated' && event.message) { const i = codexMessages.findIndex(item => item.id === event.message.id); if (i >= 0) codexMessages[i] = event.message; else codexMessages.push(event.message); }
+            if (event.type === 'message' && event.message) {
+                codexMessages.push(event.message);
+                scheduleCodexDetailRefresh(event.message);
+            }
+            else if (event.type === 'message-updated' && event.message) {
+                const i = codexMessages.findIndex(item => item.id === event.message.id);
+                if (i >= 0) {
+                    const existing = codexMessages[i];
+                    codexMessages[i] = existing.detailLoaded
+                        ? { ...existing, ...event.message, detailLoaded: true }
+                        : event.message;
+                    scheduleCodexDetailRefresh(codexMessages[i]);
+                } else codexMessages.push(event.message);
+            }
             else if (event.type === 'history-reset') {
                 codexMessages = event.messages || [];
-                codexHistoryUserScrolled = false;
-                codexHistoryPrependAnchor = null;
-                applyCodexHistoryPageMeta(event.historyPage);
+                codexDetailRevisions.clear();
+                clearTimeout(codexDetailRefreshTimer);
+                codexDetailRefreshTimer = null;
+                codexDetailRefreshIds.clear();
+                for (const pending of codexDetailRequests.values()) {
+                    clearTimeout(pending.timer);
+                    pending.resolve(false);
+                }
+                codexDetailRequests.clear();
+                document.getElementById('codex-chat-container')?.replaceChildren();
             }
             else if (event.type === 'permission-request' && event.request) { codexPendingPermissions = [...codexPendingPermissions.filter(item => item.id !== event.request.id), event.request]; }
             else if (event.type === 'permission-updated' && event.request) codexPendingPermissions = codexPendingPermissions.map(item => item.id === event.request.id ? event.request : item);

package/lib/web/core.js

@@ -52,11 +52,11 @@
         let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;
-        let codexHistoryBeforeId = null;
-        let codexHistoryHasMore = false;
-        let codexHistoryLoading = false;
-        let codexHistoryUserScrolled = false;
-        let codexHistoryPrependAnchor = null;
+        let codexDetailRequestSeq = 0;
+        let codexDetailRequests = new Map();
+        let codexDetailRevisions = new Map();
+        let codexDetailRefreshTimer = null;
+        let codexDetailRefreshIds = new Set();
         const modifiers = { ctrl: false };
 
         function log(msg) {
@@ -237,6 +237,7 @@
                             </div>
                         </div>
                         <div class="session-actions">
+                            ${renderServerChanSessionAction(s)}
                             <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
                             <button class="icon-btn btn-delete" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
                         </div>

package/lib/web/index.html

@@ -19,14 +19,21 @@
         <div id="lobby">
             <div class="header">
                 <h1><img class="header-logo" src="logo.svg" alt="">Glad</h1>
-                <div style="display:flex; gap:6px;">
-                    <button class="btn-new" onclick="showToolModal()" title="New session"><span>+</span><span>Session</span></button>
-                    <button class="btn-new" onclick="showScheduleModal()" title="New scheduler"><span>+</span><span>Sched</span></button>
+                <div class="header-actions">
+                    <button class="header-action-btn" onclick="showToolModal()" title="New AI session"><span>+</span><span>Session</span></button>
+                    <button class="header-action-btn" onclick="showScheduleModal()" title="New scheduled task"><span>+</span><span>Task</span></button>
+                    <button id="app-settings-button" class="header-action-btn icon-only" type="button"
+                        onclick="openSettings()" title="Settings" aria-label="Settings">
+                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="3"></circle>
+                            <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.1A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.1A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.1A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.1.37.31.7.6 1 .3.25.67.39 1.1.4h.1v4h-.1a1.7 1.7 0 0 0-1.7.6z"></path>
+                        </svg>
+                    </button>
                 </div>
             </div>
             <div class="lobby-tabs">
-                <button id="lobby-tab-sessions" class="lobby-tab active" onclick="switchLobbyTab('sessions')">Sessions</button>
-                <button id="lobby-tab-schedules" class="lobby-tab" onclick="switchLobbyTab('schedules')">Schedules</button>
+                <button id="lobby-tab-sessions" class="lobby-tab active" onclick="switchLobbyTab('sessions')" title="AI sessions">Sessions</button>
+                <button id="lobby-tab-schedules" class="lobby-tab" onclick="switchLobbyTab('schedules')" title="Scheduled tasks">Tasks</button>
             </div>
             <div id="sessions-list">
                 <p style="color:#888; text-align:center; margin-top:50px;">Loading sessions...</p>
@@ -252,11 +259,57 @@
         </div>
     </div>
 
+    <!-- App Settings Modal -->
+    <div id="settings-modal-overlay" onclick="closeSettings(event)">
+        <div id="settings-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title" onclick="event.stopPropagation()">
+            <div class="settings-modal-header">
+                <div>
+                    <h2 id="settings-modal-title">Settings</h2>
+                    <p>Manage Glad preferences and integrations.</p>
+                </div>
+                <button class="icon-btn settings-close" type="button" onclick="closeSettings()" aria-label="Close">×</button>
+            </div>
+            <section class="settings-section" aria-labelledby="notifications-settings-title">
+                <div class="settings-section-label" id="notifications-settings-title">Notifications</div>
+                <div class="settings-provider-header">
+                    <div>
+                        <h3>ServerChan</h3>
+                        <p>Save the integration here, then enable notifications per chat using its bell.</p>
+                    </div>
+                </div>
+                <div class="form-field">
+                    <label for="serverchan-client-type">Delivery</label>
+                    <select id="serverchan-client-type">
+                        <option value="wechat">WeChat</option>
+                        <option value="pushdeer">PushDeer</option>
+                    </select>
+                    <div class="serverchan-help">This choice adjusts message formatting. Delivery is managed by ServerChan.</div>
+                </div>
+                <div class="form-field">
+                    <label for="serverchan-send-key">SendKey</label>
+                    <input id="serverchan-send-key" type="password" autocomplete="off" placeholder="SCT...">
+                    <div id="serverchan-key-hint" class="serverchan-help"></div>
+                </div>
+                <div id="serverchan-settings-status" class="serverchan-settings-status" aria-live="polite"></div>
+                <div class="serverchan-modal-actions">
+                    <button id="serverchan-remove-btn" class="small-btn danger" type="button" onclick="removeServerChanSettings()">Remove</button>
+                    <span class="serverchan-action-spacer"></span>
+                    <button id="serverchan-save-btn" class="small-btn primary" type="button" onclick="saveServerChanSettings()">Save</button>
+                    <button id="serverchan-test-btn" class="small-btn" type="button" onclick="testServerChanSettings()">Send Test</button>
+                </div>
+            </section>
+        </div>
+    </div>
+    <div id="app-toast" role="status" aria-live="polite"></div>
+
     <!-- Schedule Modal -->
     <div id="schedule-modal-overlay" onclick="closeScheduleModal(event)" style="position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 10001; display: none; align-items: center; justify-content: center; padding: 16px;">
         <div id="schedule-modal" onclick="event.stopPropagation()">
             <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px;">
-                <h2 id="schedule-modal-title" style="margin:0; font-size:20px;">Schedule</h2>
+                <div>
+                    <h2 id="schedule-modal-title" style="margin:0; font-size:20px;">Scheduled Task</h2>
+                    <p class="schedule-modal-subtitle">Runs automatically at the selected time.</p>
+                </div>
                 <button class="icon-btn" onclick="closeScheduleModal()" style="color: var(--text-dim); font-size: 24px;">×</button>
             </div>
             <div class="form-field">
@@ -304,6 +357,7 @@
     <script defer src="vendor/xterm-addon-fit.js"></script>
     <script src="gitgraph.js"></script>
     <script src="core.js"></script>
+    <script src="notifications.js"></script>
     <script src="claude.js"></script>
     <script src="schedules.js"></script>
     <script src="shell.js"></script>