claude-simple 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",

package/public/api.js

@@ -22,6 +22,8 @@ function isHubOnlyPath(path) {
   const p = path.split('?')[0];
   return p === '/api/hub'
     || p === '/api/machines'
+    || p === '/api/notifications'
+    || p === '/api/notifications/read'
     || p === '/api/ai/notes'
     || p.startsWith('/api/ai/notes/')
     || p.startsWith('/api/auth/');

package/public/chat.js

@@ -2,9 +2,10 @@
 import { watch, delegate, esc, $ } from './lib.js';
 import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEffort, currentPermission,
          currentAgent, setAgent, AGENT_LABELS, getDefaultModel, getModelsForAgent, getEffortsForModel,
-         addCustomModel, chatDensity, wsStatus } from './state.js';
+         addCustomModel, setCurrentModel, chatDensity, wsStatus } from './state.js';
 import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
+import { pushNotification } from './notifications.js';
 
 function assistantLabel() {
   return AGENT_LABELS[currentAgent.peek()] || 'Assistant';
@@ -327,12 +328,20 @@ function handleWsMessage(msg) {
     return;
   }
   if (msg.type === 'session-created') {
+    const selectedModel = currentModel.peek();
     ctx.sessionId = msg.sessionId;
-    if (msg.agent) setAgent(msg.agent);
+    if (msg.agent && msg.agent !== currentAgent.peek()) setAgent(msg.agent);
+    // The first turn selected a model before a session id existed. Bind that
+    // choice as soon as the edge creates the session.
+    setCurrentModel(selectedModel, msg.agent || currentAgent.peek(), msg.sessionId);
     // Notify shell to refresh session list — use custom event to avoid circular import
     document.dispatchEvent(new CustomEvent('sessions-changed'));
     return;
   }
+  if (msg.type === 'notification' && msg.notification) {
+    pushNotification(msg.notification);
+    return;
+  }
   if (msg.type === 'result') {
     finalizeThoughtStream();
     finalizeAssistantStream();
@@ -579,8 +588,7 @@ function handleSlashCommand(text) {
       if (a !== currentAgent.peek()) {
         ctx.sessionId = null;
         setAgent(a);
-        currentModel.value = getDefaultModel(a);
-        localStorage.setItem('model', currentModel.peek());
+        setCurrentModel(getDefaultModel(a));
         document.dispatchEvent(new CustomEvent('agent-changed'));
         appendSystemMsg(`Agent → ${AGENT_LABELS[a]} · model ${currentModel.peek()} · new session`);
       } else {
@@ -600,8 +608,7 @@ function handleSlashCommand(text) {
       // Persist free-form ids so they stay in the model dropdown
       const known = getModelsForAgent(agent).some(m => m.value === resolved);
       if (!known) addCustomModel(agent, resolved);
-      currentModel.value = resolved;
-      localStorage.setItem('model', resolved);
+      setCurrentModel(resolved);
       appendSystemMsg(`Model set to ${resolved}${known ? '' : ' (saved as custom ★)'}`);
       document.dispatchEvent(new CustomEvent('agent-changed'));
       return true;
@@ -766,6 +773,27 @@ export function sendMessage() {
 
   // While a turn is running, queue the next message (common Grok complaint).
   if (isProcessing.peek()) {
+    // Grok owns its queue on the edge through a long-lived ACP process. Send
+    // immediately so a page reload cannot discard this follow-up in the tab.
+    if (currentAgent.peek() === 'grok' && ctx.sessionId) {
+      const agent = 'grok';
+      const ok = sendWs({
+        type: 'command', cmd: 'turn.start', agent, command: text, sessionId: ctx.sessionId,
+        options: {
+          agent, cwd: currentProject.peek().path, sessionId: ctx.sessionId,
+          configDir: ctx.configDir, model: currentModel.peek(),
+          ...(currentEffort.peek() && { effort: currentEffort.peek() }),
+          ...(currentPermission.peek() && { permissionMode: currentPermission.peek() }),
+          ...(currentPermission.peek() === 'bypassPermissions' && { allowDangerouslySkipPermissions: true }),
+        },
+      });
+      input.value = '';
+      autoResize(input);
+      updateInputMode('');
+      clearPendingAttachments();
+      appendSystemMsg(ok ? '已加入 Grok 服务端队列，刷新页面不会丢失' : '连接未就绪，消息将在重连后发送');
+      return;
+    }
     pendingUserTexts.push({ key: draftKey(), text });
     input.value = '';
     autoResize(input);
@@ -806,6 +834,9 @@ export function sendMessage() {
     const effort     = currentEffort.peek();
     const permission = currentPermission.peek();
     const agent      = currentAgent.peek() || 'claude';
+    // Existing sessions retain their own picker value. New sessions are bound
+    // on the session-created event above.
+    if (ctx.sessionId) setCurrentModel(currentModel.peek(), agent, ctx.sessionId);
     const ok = sendWs({
       type: 'command',
       cmd: 'turn.start',

package/public/notifications.js

@@ -0,0 +1,215 @@
+import { $, delegate, esc } from './lib.js';
+import { api } from './api.js';
+import { coerceTs } from './shell/util.js';
+
+let notifications = [];
+let unreadCount = 0;
+let openSession = null;
+
+function fmtTime(ts) {
+  const ms = coerceTs(ts);
+  if (ms == null) return '';
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString();
+}
+
+function updateBadge() {
+  const badge = $('notifications-badge');
+  if (!badge) return;
+  if (!unreadCount) {
+    badge.classList.add('hidden');
+    badge.textContent = '0';
+    return;
+  }
+  badge.classList.remove('hidden');
+  badge.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
+}
+
+function positionNotificationsMenu() {
+  const menu = $('notifications-menu');
+  const btn = $('btn-notifications');
+  const topbar = $('topbar');
+  if (!menu || !btn || !topbar) return;
+  const btnRect = btn.getBoundingClientRect();
+  const topbarRect = topbar.getBoundingClientRect();
+  const width = Math.min(416, window.innerWidth - 16);
+  const left = Math.max(8, Math.min(window.innerWidth - width - 8, btnRect.right - width));
+  menu.style.top = `${Math.round(topbarRect.bottom + 8)}px`;
+  menu.style.left = `${Math.round(left)}px`;
+  menu.style.width = `${Math.round(width)}px`;
+}
+
+function renderNotifications() {
+  const listEl = $('notifications-menu-list');
+  const emptyEl = $('notifications-menu-empty');
+  if (!listEl || !emptyEl) return;
+  if (!notifications.length) {
+    listEl.innerHTML = '';
+    emptyEl.classList.remove('hidden');
+    updateBadge();
+    return;
+  }
+  emptyEl.classList.add('hidden');
+  listEl.innerHTML = notifications.map((item) => `
+    <button type="button"
+      class="w-full text-left rounded-lg border px-3 py-2 transition-colors hover:bg-base-200/70 ${item.unread ? 'border-primary/35 bg-primary/5' : 'border-base-300 bg-base-100'}"
+      data-notification-id="${esc(item.id)}"
+      data-notification-session="${esc(item.sessionId || '')}"
+      data-notification-agent="${esc(item.agent || 'claude')}"
+      data-notification-cwd="${esc(item.cwd || '')}"
+      data-notification-machine="${esc(item.machineId || '')}">
+      <div class="flex items-start gap-2">
+        <span class="text-sm leading-5">🔔</span>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-semibold truncate">${esc(item.title || 'Session done')}</span>
+            ${item.unread ? '<span class="inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0"></span>' : ''}
+          </div>
+          ${item.body ? `<div class="text-[11px] text-base-content/55 mt-0.5 line-clamp-2">${esc(item.body)}</div>` : ''}
+          <div class="flex items-center gap-2 mt-1 text-[10px] text-base-content/35">
+            ${item.projectName ? `<span class="font-mono truncate">${esc(item.projectName)}</span>` : ''}
+            ${item.machineId ? `<span class="px-1 py-0.5 rounded bg-base-300 text-base-content/55 font-mono">${esc(item.machineId)}</span>` : ''}
+            <span>${esc(fmtTime(item.createdAt))}</span>
+          </div>
+        </div>
+      </div>
+    </button>`).join('');
+  updateBadge();
+}
+
+export function closeNotificationsMenu() {
+  $('notifications-menu')?.classList.add('hidden');
+  $('notifications-backdrop')?.classList.add('hidden');
+  $('btn-notifications')?.setAttribute('aria-expanded', 'false');
+}
+
+export function openNotificationsMenu() {
+  positionNotificationsMenu();
+  $('notifications-menu')?.classList.remove('hidden');
+  $('notifications-backdrop')?.classList.remove('hidden');
+  $('btn-notifications')?.setAttribute('aria-expanded', 'true');
+}
+
+export function toggleNotificationsMenu() {
+  const menu = $('notifications-menu');
+  if (!menu) return;
+  if (menu.classList.contains('hidden')) openNotificationsMenu();
+  else closeNotificationsMenu();
+}
+
+function mergeNotifications(rows) {
+  const map = new Map();
+  for (const item of rows || []) {
+    if (!item?.id) continue;
+    map.set(String(item.id), item);
+  }
+  notifications = [...map.values()].sort((a, b) => (coerceTs(b.createdAt) || 0) - (coerceTs(a.createdAt) || 0));
+  unreadCount = notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+  renderNotifications();
+}
+
+export async function refreshNotifications() {
+  try {
+    const data = await api('GET', '/api/notifications?limit=80');
+    notifications = Array.isArray(data?.notifications) ? data.notifications : [];
+    unreadCount = Number(data?.unreadCount) || notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+    renderNotifications();
+  } catch {
+    notifications = [];
+    unreadCount = 0;
+    renderNotifications();
+  }
+}
+
+async function markNotificationsRead(ids = null) {
+  const data = await api('POST', '/api/notifications/read', ids?.length ? { ids } : {});
+  notifications = Array.isArray(data?.notifications) ? data.notifications : notifications.map(item => (
+    !ids || ids.includes(item.id) ? { ...item, unread: false } : item
+  ));
+  unreadCount = Number(data?.unreadCount) || notifications.reduce((sum, item) => sum + (item.unread ? 1 : 0), 0);
+  renderNotifications();
+}
+
+function maybeShowBrowserNotification(item) {
+  if (typeof Notification === 'undefined') return;
+  if (document.visibilityState === 'visible') return;
+  if (Notification.permission !== 'granted') return;
+  try {
+    const n = new Notification(item.title || 'Session done', {
+      body: item.body || item.projectName || item.sessionId || '',
+      tag: item.id,
+    });
+    n.onclick = () => {
+      window.focus();
+      n.close();
+    };
+  } catch {
+    // ignore
+  }
+}
+
+export function pushNotification(item) {
+  if (!item?.id) return;
+  const existing = notifications.find(row => row.id === item.id);
+  if (existing) {
+    mergeNotifications([item, ...notifications.filter(row => row.id !== item.id)]);
+    return;
+  }
+  mergeNotifications([item, ...notifications]);
+  maybeShowBrowserNotification(item);
+}
+
+export function initNotifications(opts = {}) {
+  openSession = typeof opts.openSession === 'function' ? opts.openSession : null;
+  renderNotifications();
+  refreshNotifications();
+
+  if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
+    document.addEventListener('click', () => {
+      try { Notification.requestPermission().catch(() => {}); } catch {}
+    }, { once: true });
+  }
+
+  delegate.on('click', '#notifications-backdrop', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeNotificationsMenu();
+  });
+
+  delegate.on('click', '#btn-notifications-read-all', async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await markNotificationsRead();
+  });
+
+  delegate.on('click', '[data-notification-id]', async (_, el) => {
+    const id = el.dataset.notificationId;
+    if (!id) return;
+    await markNotificationsRead([id]);
+    closeNotificationsMenu();
+    if (!openSession || !el.dataset.notificationSession) return;
+    openSession(
+      el.dataset.notificationSession,
+      el.dataset.notificationCwd || null,
+      null,
+      el.dataset.notificationAgent || 'claude',
+      el.dataset.notificationMachine || null,
+    );
+  });
+
+  document.addEventListener('click', (e) => {
+    const menu = $('notifications-menu');
+    const btn = $('btn-notifications');
+    const target = e.target;
+    if (!menu || menu.classList.contains('hidden')) return;
+    if (menu.contains(target) || btn?.contains(target)) return;
+    closeNotificationsMenu();
+  });
+
+  window.addEventListener('resize', () => {
+    if ($('notifications-menu') && !$('notifications-menu').classList.contains('hidden')) {
+      positionNotificationsMenu();
+    }
+  });
+}

package/public/shell/dashboard.js

@@ -176,7 +176,7 @@ export function updateDashboard(sessions) {
   }).join('');
 
   showSelectedDaySessions(sessions);
-  updateRecentSessionsList(sessions);
+  updateRecentSessionsList();
 }
 
 export function showSelectedDaySessions(sessions) {
@@ -226,42 +226,62 @@ export function showSelectedDaySessions(sessions) {
 
 /** How many sessions in the topbar “最近” quick-jump menu. */
 export const RECENT_MENU_LIMIT = 15;
-const RECENT_DISMISSED_KEY = 'recentSessionsDismissed';
+const RECENT_SESSIONS_KEY = 'recentSessionsV1';
 
-function recentDismissKey(s) {
+function recentSessionKey(s) {
   return `${s.machineId || ''}:${s.agent || 'claude'}:${s.sessionId}`;
 }
 
-function dismissedRecentKeys() {
+/**
+ * The quick-jump list is deliberately opt-in: it starts empty and is populated
+ * only after a session is opened.  Unlike sessionsData, this survives machine
+ * switches and contains sessions from every edge machine.
+ */
+export function getRecentSessions() {
   try {
-    const saved = JSON.parse(localStorage.getItem(RECENT_DISMISSED_KEY) || '[]');
-    return new Set(Array.isArray(saved) ? saved : []);
-  } catch { return new Set(); }
+    const saved = JSON.parse(localStorage.getItem(RECENT_SESSIONS_KEY) || '[]');
+    return Array.isArray(saved)
+      ? saved.filter(s => s && s.sessionId)
+      : [];
+  } catch { return []; }
+}
+
+function saveRecentSessions(sessions) {
+  try { localStorage.setItem(RECENT_SESSIONS_KEY, JSON.stringify(sessions)); } catch { /* quota/private mode */ }
+}
+
+/** Add an explicitly opened session to the cross-machine quick-jump list. */
+export function addRecentSession(session) {
+  if (!session?.sessionId) return;
+  const key = recentSessionKey(session);
+  const entry = { ...session, lastOpenedAt: Date.now() };
+  const recent = getRecentSessions().filter(s => recentSessionKey(s) !== key);
+  recent.unshift(entry);
+  saveRecentSessions(recent.slice(0, RECENT_MENU_LIMIT));
+  updateRecentSessionsList();
+  renderRecentSessionsMenu();
 }
 
 /** Remove an item from this device's quick-jump list; the actual session remains intact. */
 export function dismissRecentSession(session) {
   if (!session?.sessionId) return;
-  const keys = dismissedRecentKeys();
-  keys.add(recentDismissKey(session));
-  // Keep storage bounded even after many one-off sessions.
-  localStorage.setItem(RECENT_DISMISSED_KEY, JSON.stringify([...keys].slice(-200)));
-  renderRecentSessionsMenu(getDashboardSessions());
+  const key = recentSessionKey(session);
+  saveRecentSessions(getRecentSessions().filter(s => recentSessionKey(s) !== key));
+  updateRecentSessionsList();
+  renderRecentSessionsMenu();
 }
 
-function sortRecentSessions(sessions, limit) {
-  const dismissed = dismissedRecentKeys();
-  return [...asSessionArray(sessions)]
-    .filter(s => s && s.sessionId && !dismissed.has(recentDismissKey(s)))
-    .sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0))
+function sortRecentSessions(limit) {
+  return getRecentSessions()
+    .sort((a, b) => (coerceTs(b.lastOpenedAt) || 0) - (coerceTs(a.lastOpenedAt) || 0))
     .slice(0, limit);
 }
 
-export function updateRecentSessionsList(sessions) {
+export function updateRecentSessionsList() {
   const container = $('recent-sessions-list');
   if (!container) return;
 
-  const recent = sortRecentSessions(sessions, 6);
+  const recent = sortRecentSessions(6);
 
   if (!recent.length) {
     container.innerHTML = `<div class="col-span-full text-center text-xs text-base-content/40 py-4">No recent sessions</div>`;
@@ -338,31 +358,31 @@ export function positionRecentMenu() {
   menu.style.maxHeight = `${Math.min(maxH, Math.round(window.innerHeight * 0.7))}px`;
 }
 
-export function openRecentMenu(sessions) {
+export function openRecentMenu() {
   const menu = $('recent-menu');
   if (!menu) return;
-  renderRecentSessionsMenu(sessions ?? getDashboardSessions());
+  renderRecentSessionsMenu();
   menu.classList.remove('hidden');
   menu.classList.add('recent-menu-open');
   positionRecentMenu();
   $('recent-menu-backdrop')?.classList.remove('hidden');
 }
 
-export function toggleRecentMenu(sessions) {
+export function toggleRecentMenu() {
   const menu = $('recent-menu');
   if (!menu) return;
-  if (menu.classList.contains('hidden')) openRecentMenu(sessions);
+  if (menu.classList.contains('hidden')) openRecentMenu();
   else closeRecentMenu();
 }
 
-/** Topbar quick-jump: last N sessions by updatedAt. */
-export function renderRecentSessionsMenu(sessions) {
+/** Topbar quick-jump: the last N sessions explicitly opened by this user. */
+export function renderRecentSessionsMenu() {
   const listEl = $('recent-menu-list');
   const emptyEl = $('recent-menu-empty');
   const countEl = $('recent-menu-count');
   if (!listEl) return;
 
-  const recent = sortRecentSessions(sessions ?? getDashboardSessions(), RECENT_MENU_LIMIT);
+  const recent = sortRecentSessions(RECENT_MENU_LIMIT);
   if (countEl) countEl.textContent = recent.length ? `${recent.length}` : '';
 
   if (!recent.length) {

package/public/shell/layout.js

@@ -2,7 +2,7 @@
 import { batch, esc, $ } from '../lib.js';
 import {
   workspacesData, sessionFilter, filesPath, viewingFile, currentProject,
-  filesRoot, gitRoot, currentModel, currentAgent, setAgent,
+  filesRoot, gitRoot, currentModel, currentAgent, setAgent, setCurrentModel,
   hubMode, machinesList, selectedMachineId, setSelectedMachine,
   getDefaultModel, AGENT_LABELS, ctx,
 } from '../state.js';
@@ -204,8 +204,7 @@ export async function startNewSession() {
     ctx.configDir = configDir || null;
     ctx.agent = agent;
     setAgent(agent);
-    currentModel.value = getDefaultModel(agent) || currentModel.peek();
-    localStorage.setItem('model', currentModel.peek());
+    setCurrentModel(getDefaultModel(agent) || currentModel.peek());
     refreshModelSelect();
     batch(() => {
       currentProject.value = { id: name, name, path: result.path, machineId: selectedMachineId.peek() || ctx.machineId };

package/public/shell/session-list.js

@@ -8,7 +8,7 @@ import {
   sessionMetaMap, LOW_TURN_THRESHOLD, metaKey, sessionDisplayTitle,
   hubMode, selectedMachineId, agentsMeta, currentEffort,
   getModelsForAgent, getDefaultModel, getEffortsForModel,
-  addCustomModel, removeCustomModel, getCustomModels, ctx,
+  addCustomModel, removeCustomModel, getCustomModels, setCurrentModel, ctx,
 } from '../state.js';
 import { api, NOT_MODIFIED } from '../api.js';
 import { getCachedSessions, setCachedSessions, getCachedWorkspaces, setCachedWorkspaces } from '../cache.js';
@@ -158,15 +158,8 @@ export async function loadAgentsMeta() {
   try {
     const data = await api('GET', '/api/agents');
     agentsMeta.value = data;
-    // Align current model with discovered list for active agent
-    const agent = currentAgent.peek() || 'claude';
-    const models = getModelsForAgent(agent);
-    const cur = currentModel.peek();
-    if (cur && !models.some(m => m.value === cur)) {
-      const def = getDefaultModel(agent);
-      currentModel.value = def;
-      localStorage.setItem('model', def);
-    }
+    // Do not replace a user's saved model merely because discovery has not
+    // listed it yet. refreshModelSelect renders it as a custom entry instead.
     refreshModelSelect();
     return data;
   } catch (e) {
@@ -210,8 +203,7 @@ export function refreshModelSelect() {
   ).join('');
   if (!models.some(m => m.value === cur)) {
     const def = getDefaultModel(agent) || models[0]?.value;
-    currentModel.value = def;
-    localStorage.setItem('model', def);
+    setCurrentModel(def);
     sel.value = def;
     cur = def;
   } else {
@@ -241,8 +233,7 @@ export function promptCustomModel({ editCurrent = false } = {}) {
     removeCustomModel(agent, initial);
   }
   addCustomModel(agent, id);
-  currentModel.value = id;
-  localStorage.setItem('model', id);
+  setCurrentModel(id);
   refreshModelSelect();
 }
 

package/public/shell/session-nav.js

@@ -15,7 +15,7 @@ import {
 import { setHash, syncHash } from '../router.js';
 import { refreshModelSelect } from './session-list.js';
 import { renderSessionNotesBar } from './notes.js';
-import { updateDashboard, getDashboardSessions } from './dashboard.js';
+import { addRecentSession, updateDashboard, getDashboardSessions } from './dashboard.js';
 
 /** Show which edge machine Files/Git/Shell paths belong to. */
 function syncMachinePathHints(machineId) {
@@ -137,6 +137,10 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     setSelectedMachine(resolvedMachine);
     try { ctx.ws?.close(); } catch {}
     ctx.ws = null;
+    // A recent entry can belong to another edge.  Route the session request
+    // immediately, then refresh the surrounding machine UI in the background.
+    import('./hub.js').then(({ syncTopbarMachine }) => syncTopbarMachine()).catch(() => {});
+    import('./session-list.js').then(({ loadAllSessions }) => loadAllSessions()).catch(() => {});
   }
 
   ctx.sessionId = sid;
@@ -179,6 +183,19 @@ export async function resumeSession(sid, cwd, configDir, agent, machineId, opts
     machineId: resolvedMachine,
     tab: targetTab,
   });
+  // Recent is a deliberate browsing history, not an automatic list of every
+  // session on the currently selected machine.  Keep the target machine in
+  // the entry so a later click can route back to the right edge.
+  addRecentSession({
+    sessionId: sid,
+    cwd: edgeCwd || resolvedCwd,
+    configDir: resolvedConfig,
+    agent: resolvedAgent,
+    machineId: resolvedMachine,
+    display: fromList?.display || fromLast?.display || '',
+    projectName: fromList?.projectName || fromLast?.projectName || '',
+    updatedAt: fromList?.updatedAt || fromLast?.updatedAt || null,
+  });
 
   const label = AGENT_LABELS[resolvedAgent] || resolvedAgent;
   const cacheKey = `${resolvedMachine || ''}:${resolvedAgent}:${sid}`;

package/public/shell/templates.js

@@ -69,6 +69,13 @@ export const AppShell = (opts = {}) => {
           <span class="text-[10px] opacity-50">▾</span>
         </button>
       </div>
+      <div id="notifications-wrap" class="relative flex-shrink-0">
+        <button type="button" id="btn-notifications" class="btn btn-ghost btn-xs border border-base-300 gap-1 min-h-8 px-2"
+                title="通知" aria-haspopup="dialog" aria-expanded="false">
+          <span>🔔</span>
+          <span id="notifications-badge" class="hidden inline-flex min-w-5 h-5 px-1 items-center justify-center rounded-full bg-error text-error-content text-[10px] font-bold">0</span>
+        </button>
+      </div>
       <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate min-w-0">Select a session</span>
       <span id="conn-dot" class="w-2 h-2 rounded-full bg-base-content/30 flex-shrink-0" title="连接状态"></span>
       <div class="flex gap-2 topbar-actions">
@@ -93,6 +100,17 @@ export const AppShell = (opts = {}) => {
       <div id="recent-menu-list" class="flex flex-col gap-0.5"></div>
       <p id="recent-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无最近会话</p>
     </div>
+    <div id="notifications-backdrop" class="hidden fixed inset-0 z-[55] bg-black/40" aria-hidden="true"></div>
+    <div id="notifications-menu" class="hidden fixed z-[60] w-[min(26rem,calc(100vw-1rem))] max-h-[min(30rem,75vh)] overflow-y-auto
+         rounded-lg border border-base-300 bg-base-100 shadow-xl p-2"
+         role="dialog" aria-label="通知中心">
+      <div class="flex items-center justify-between px-1 pb-1.5 mb-1 border-b border-base-300 sticky top-0 bg-base-100 z-[1]">
+        <span class="text-[10px] uppercase tracking-wide text-base-content/45 font-semibold">通知</span>
+        <button type="button" id="btn-notifications-read-all" class="btn btn-ghost btn-xs px-1 text-[10px]">全部已读</button>
+      </div>
+      <div id="notifications-menu-list" class="flex flex-col gap-1"></div>
+      <p id="notifications-menu-empty" class="text-xs text-base-content/40 px-1 py-2 hidden">暂无通知</p>
+    </div>
     <!-- Hub: only when no remembered machine (or last one offline) -->
     <div id="machine-picker" class="hidden fixed inset-0 z-[60] bg-base-100 flex items-center justify-center p-4">
       <div class="w-full max-w-md">