dsh-remote-plugin 0.6.7 → 0.6.9

package/public/desktop/desktop.js

@@ -11,6 +11,16 @@ const LS = {
   set(k, v) { try { localStorage.setItem(k, v) } catch {} },
   del(k) { try { localStorage.removeItem(k) } catch {} }
 }
+const CLIENT_ID = (() => {
+  try {
+    let id = sessionStorage.getItem('dshRemoteClientId')
+    if (!id) {
+      id = (globalThis.crypto?.randomUUID?.() || `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`)
+      sessionStorage.setItem('dshRemoteClientId', id)
+    }
+    return id
+  } catch { return '' }
+})()
 const CAP = window.Capacitor || null
 
 /* ---------------- 皮肤 ---------------- */
@@ -40,6 +50,7 @@ themeApply()
 /* ---------------- 状态 ---------------- */
 const state = {
   token: LS.get('token', ''),
+  wsTicket: { token: '', server: '', value: '', expiresAt: 0 },
   server: '',
   servers: [],
   groups: ['默认'],
@@ -52,12 +63,17 @@ const state = {
   sessionSort: LS.get('sessionSort', 'time') === 'workspace' ? 'workspace' : 'time',
   byId: new Map(),
   current: null,
+  hostInfo: null,
   history: { seqs: new Set(), visible: [], hasMore: false, loading: false, minSeq: Infinity },
   approvals: [],
   questions: [],
   questionModal: null,
   streamsOk: { mux: false, host: false },
   errCount: 0,
+  streamInfo: {
+    mux: { status: 'idle', lastOpenAt: 0, lastCloseAt: 0, lastCloseCode: 0, lastCloseReason: '' },
+    host: { status: 'idle', lastOpenAt: 0, lastCloseAt: 0, lastCloseCode: 0, lastCloseReason: '' },
+  },
   streamMode: 'ws', // 'ws' | 'poll'
   pollSeq: { mux: 0, host: 0 },
   fs: { path: null, initial: null, loaded: false },
@@ -498,6 +514,27 @@ function hideTip() { const tip = $('ds-tip'); if (tip) tip.classList.add('hidden
 
 /* ---------------- API ---------------- */
 function apiUrl(path) { return (state.server || '') + path }
+let wsTicketPromise = null
+async function getWsTicket() {
+  const now = Date.now()
+  if (state.wsTicket.token === state.token && state.wsTicket.server === state.server &&
+      state.wsTicket.value && state.wsTicket.expiresAt > now + 15000) return state.wsTicket.value
+  if (wsTicketPromise) return wsTicketPromise
+  const token = state.token
+  const server = state.server
+  wsTicketPromise = (async () => {
+    const res = await fetch(apiUrl('/api/ws-ticket'), {
+      method: 'POST',
+      headers: { authorization: 'Bearer ' + token, 'x-dsh-remote-client': 'web' }
+    })
+    if (!res.ok) throw new Error('ws ticket HTTP ' + res.status)
+    const data = await res.json()
+    if (!data?.ticket || !Number(data.expiresAt)) throw new Error('invalid ws ticket')
+    state.wsTicket = { token, server, value: data.ticket, expiresAt: Number(data.expiresAt) }
+    return data.ticket
+  })()
+  try { return await wsTicketPromise } finally { wsTicketPromise = null }
+}
 async function rpc(method, payload = {}, timeoutMs = 45000) {
   const opts = {
     method: 'POST',
@@ -817,12 +854,47 @@ function deleteGroup(name) {
 }
 
 /* ---------------- 事件流 (WebSocket + 轮询降级) ---------------- */
+const streamMeta = {
+  mux: { generation: 0, attempt: 0, failures: 0, retryTimer: null },
+  host: { generation: 0, attempt: 0, failures: 0, retryTimer: null },
+}
+
 function clearStreamTimers(ws) {
   if (!ws) return
-  clearInterval(ws._hbTimer)
-  clearInterval(ws._staleTimer)
-  ws._hbTimer = null
-  ws._staleTimer = null
+  if (ws._retryTimer) clearTimeout(ws._retryTimer)
+  ws._retryTimer = null
+}
+
+function streamIsCurrent(kind, ws, generation) {
+  return streams[kind] === ws && streamMeta[kind].generation === generation
+}
+
+function aggregateStreamFailures() {
+  state.errCount = Math.max(streamMeta.mux.failures, streamMeta.host.failures)
+}
+
+function markStreamInfo(kind, patch) {
+  state.streamInfo[kind] = { ...state.streamInfo[kind], ...patch }
+}
+
+function allStreamsOpen() {
+  return streams.mux?.readyState === WebSocket.OPEN && streams.host?.readyState === WebSocket.OPEN
+}
+
+function clearStreamRetry(kind) {
+  const meta = streamMeta[kind]
+  if (meta.retryTimer) clearTimeout(meta.retryTimer)
+  meta.retryTimer = null
+}
+
+function closeStream(kind) {
+  const meta = streamMeta[kind]
+  clearStreamRetry(kind)
+  meta.generation++
+  const ws = streams[kind]
+  streams[kind] = null
+  state.streamsOk[kind] = false
+  try { ws?.close() } catch {}
 }
 
 function clearConnTick() {
@@ -854,78 +926,97 @@ function clearReconnect() {
 
 function openStreams() {
   if (!state.token) return
-  if (state.streamMode === 'poll') stopPolling()
-  state.streamMode = 'ws'
-  clearReconnect()
+  if (state.streamMode !== 'poll') state.streamMode = 'ws'
   openStream('mux', onMuxFrame, true)
   openStream('host', onHostFrame, false)
 }
-function openStream(kind, handler, refreshOnOpen, isRestore) {
+function openStream(kind, handler, refreshOnOpen, isRestore, ticket = null) {
   if (!state.token) return
+  if (ticket === null) {
+    const token = state.token
+    void getWsTicket().then((value) => {
+      if (state.token === token) openStream(kind, handler, refreshOnOpen, isRestore, value)
+    }).catch(() => {
+      // 兼容旧网关/插件副本: ticket 接口不可用时临时回退旧 token 握手。
+      if (state.token === token) openStream(kind, handler, refreshOnOpen, isRestore, '')
+    })
+    return
+  }
   let base
   if (state.server) base = state.server.replace(/^http/, 'ws')
   else { const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'; base = `${proto}//${location.host}` }
-  const ws = new WebSocket(`${base}/api/events.${kind}?token=${encodeURIComponent(state.token)}&client=web`)
-  try { streams[kind]?.close() } catch {}
+  const auth = ticket ? `ticket=${encodeURIComponent(ticket)}` : `token=${encodeURIComponent(state.token)}`
+  const clientId = CLIENT_ID ? `&clientId=${encodeURIComponent(CLIENT_ID)}` : ''
+  const streamUrl = `${base}/api/events.${kind}?${auth}&client=web${clientId}`
+  const current = streams[kind]
+  if (current?._streamUrl === streamUrl &&
+      (current.readyState === WebSocket.OPEN || current.readyState === WebSocket.CONNECTING)) return
+  if (current && current._streamUrl !== streamUrl) {
+    streamMeta[kind].attempt = 0
+    streamMeta[kind].failures = 0
+    aggregateStreamFailures()
+  }
+  closeStream(kind)
+  const meta = streamMeta[kind]
+  const generation = meta.generation
+  const ws = new WebSocket(streamUrl)
   streams[kind] = ws
-  ws._attempt = 0
-  ws._lastMsgAt = 0
+  ws._streamUrl = streamUrl
+  ws._generation = generation
   ws._isRestore = !!isRestore
   ws.onopen = () => {
+    if (!streamIsCurrent(kind, ws, generation)) return
     state.streamsOk[kind] = true
-    state.errCount = 0
-    ws._attempt = 0
-    ws._lastMsgAt = Date.now()
+    markStreamInfo(kind, { status: 'open', lastOpenAt: Date.now(), lastCloseCode: 0, lastCloseReason: '' })
+    meta.attempt = 0
+    meta.failures = 0
+    aggregateStreamFailures()
     clearStreamTimers(ws)
-    // 应用层心跳: 25s 发纯文本 ping, 防 NAT/WiFi 切换后的 WS 半开假活
-    ws._hbTimer = setInterval(() => {
-      try { if (ws.readyState === WebSocket.OPEN) ws.send('ping') } catch {}
-    }, 25000)
-    // 60s 没有任何消息(含 pong/业务帧)就主动断开, 触发指数退避重连
-    ws._staleTimer = setInterval(() => {
-      if (ws.readyState === WebSocket.OPEN && Date.now() - (ws._lastMsgAt || 0) > 60000) {
-        try { ws.close() } catch {}
-      }
-    }, 10000)
-    if (state.streamMode === 'poll') { stopPolling(); state.streamMode = 'ws' }
-    if (streams.mux?.readyState === WebSocket.OPEN && streams.host?.readyState === WebSocket.OPEN) clearReconnect()
+    // DSH mux/host 是只下行 WebSocket, 浏览器不能发送应用层 ping。
+    // 网关负责 RFC6455 Ping/Pong, 前端只监听业务帧和 close 事件。
+    if (state.streamMode === 'poll' && allStreamsOpen()) {
+      stopPolling()
+      state.streamMode = 'ws'
+    }
+    if (allStreamsOpen()) clearReconnect()
     updateConn()
     if (kind === 'mux') { state.approvals = []; state.questions = []; renderNotifStack() }
     if (refreshOnOpen) refreshSessions()
   }
   ws.onmessage = (msg) => {
-    ws._lastMsgAt = Date.now()
+    if (!streamIsCurrent(kind, ws, generation)) return
     state.streamsOk[kind] = true
-    state.errCount = 0
     updateConn()
     try { handler(JSON.parse(msg.data)) } catch {}
   }
   ws.onclose = () => {
     clearStreamTimers(ws)
+    if (!streamIsCurrent(kind, ws, generation)) return
+    streams[kind] = null
     state.streamsOk[kind] = false
-    state.errCount++
+    markStreamInfo(kind, {
+      status: 'closed',
+      lastCloseAt: Date.now(),
+      lastCloseCode: Number(ws.code) || 0,
+      lastCloseReason: String(ws.reason || ''),
+    })
+    meta.failures++
+    aggregateStreamFailures()
     updateConn()
     if (!navigator.onLine) { clearReconnect(); return }
-    if (state.streamMode === 'poll') {
-      // 降级轮询期间: 恢复尝试失败也用退避, 避免 30s 固定间隔内空转
-      if (ws._isRestore && streams[kind] === ws) {
-        const attempt = ws._attempt || 0
-        ws._attempt = attempt + 1
-        const baseDelay = Math.min(1200 * Math.pow(2, attempt), 30000)
-        const delay = Math.round(baseDelay * (0.8 + Math.random() * 0.4))
-        setTimeout(() => openStream(kind, handler, refreshOnOpen, true), delay)
-      }
-      return
-    }
-    if (state.errCount >= 3) { enterPollMode(); return }
-    if (state.servers.length && state.errCount % 5 === 0) setTimeout(() => selectFastestServer({ silent: true }), 300)
-    // 指数退避 + 20% 抖动: min(1200 * 2^attempt, 30000)
-    const attempt = ws._attempt || 0
-    ws._attempt = attempt + 1
-    const baseDelay = Math.min(1200 * Math.pow(2, attempt), 30000)
+    // 任一通道连续失败 3 次就降级轮询；另一个通道不会清零它的失败计数。
+    if (state.streamMode !== 'poll' && meta.failures >= 3) { enterPollMode(); return }
+    if (state.servers.length && meta.failures % 5 === 0) setTimeout(() => selectFastestServer({ silent: true }), 300)
+    // VPN/跨地域链路使用更宽松的指数退避: 1.5s 起步, 最大 60s, 带 20% 抖动。
+    const attempt = meta.attempt++
+    const baseDelay = Math.min(1500 * Math.pow(2, attempt), 60000)
     const delay = Math.round(baseDelay * (0.8 + Math.random() * 0.4))
     setReconnect(delay)
-    if (streams[kind] === ws) setTimeout(() => openStream(kind, handler, refreshOnOpen), delay)
+    clearStreamRetry(kind)
+    meta.retryTimer = setTimeout(() => {
+      meta.retryTimer = null
+      if (state.token && navigator.onLine) openStream(kind, handler, refreshOnOpen, state.streamMode === 'poll')
+    }, delay)
   }
   ws.onerror = () => { try { ws.close() } catch {} }
 }
@@ -936,10 +1027,8 @@ function enterPollMode() {
   state.streamMode = 'poll'
   state.pollSeq = { mux: 0, host: 0 }
   state.streamsOk = { mux: false, host: false }
-  try { streams.mux?.close() } catch {}
-  try { streams.host?.close() } catch {}
-  streams.mux = null
-  streams.host = null
+  closeStream('mux')
+  closeStream('host')
   refreshSessions()
   startPolling()
   updateConn()
@@ -1002,15 +1091,15 @@ async function pollKind(kind) {
 function tryRestoreWs() {
   if (state.streamMode !== 'poll' || !state.token) return
   // 轮询继续跑，等 WS 真正 onopen 后再切回，避免重连窗口丢事件
-  openStream('mux', onMuxFrame, true, true)
-  openStream('host', onHostFrame, false, true)
+  if (!streams.mux && !streamMeta.mux.retryTimer) openStream('mux', onMuxFrame, true, true)
+  if (!streams.host && !streamMeta.host.retryTimer) openStream('host', onHostFrame, false, true)
 }
 
 /* 网络感知: 离线立刻关 WS + 显示离线, 在线立即重连 */
 window.addEventListener('offline', () => {
   clearReconnect()
-  try { streams.mux?.close() } catch {}
-  try { streams.host?.close() } catch {}
+  closeStream('mux')
+  closeStream('host')
   if (state.streamMode === 'poll') stopPolling()
   updateConn()
 })
@@ -1055,7 +1144,7 @@ function onHostFrame(full) {
   if (['host/session-added', 'host/session-removed', 'host/workspace-changed', 'host/workspace-removed', 'host/workspace-order-changed', 'host/archived-sessions-changed'].includes(f.type)) refreshSessions()
   if (f.type === 'host/session-status') {
     const s = state.byId.get(f.sessionId)
-    if (s) { s.running = f.running; if (state.current === f.sessionId) renderSessions() }
+    if (s) { s.running = f.running; if (state.current === f.sessionId) renderSessions(); renderOverviewDesktop() }
   }
 }
 function applyProjection(sessionId, key, value, seq) {
@@ -1100,11 +1189,12 @@ function onSessionEvent(sessionId, event) {
 /* ---------------- 会话 ---------------- */
 async function refreshSessions() {
   const v = await safeRpc('session.list', {}, '')
-  if (!v) { renderSessions(); return }
+  if (!v) { renderSessions(); renderOverviewDesktop(); return }
   state.sessions = v.items || []
   state.byId = new Map(state.sessions.map(s => [s.sessionId, s]))
   renderSessions()
   scheduleWorkbenchRefresh()
+  renderOverviewDesktop()
 }
 function sessionCwd(s) { return typeof s?.cwd === 'string' ? s.cwd.trim() : '' }
 function sessionWorkspaceLabel(s) {
@@ -1135,8 +1225,12 @@ function renderSessions() {
   const wbIds = new Set()
   if (state.wb.bound && state.wb.projects) for (const w of state.wb.projects) for (const id of (w.sessionIds || [])) wbIds.add(id)
   const root = state.wb.bound ? state.wb.path : ''
-  const visible = allItems.filter(s => !(state.wb.bound && (wbIds.has(s.sessionId) || wbStrictInside(s.cwd, root))))
   const archivedSet = new Set(state.archivedIds || [])
+  const visible = allItems.filter(s => {
+    if (!state.wb.bound) return true
+    if (archivedSet.has(s.sessionId)) return true
+    return !(wbIds.has(s.sessionId) || wbStrictInside(s.cwd, root))
+  })
   const archived = visible.filter(s => archivedSet.has(s.sessionId))
   const main = visible.filter(s => !archivedSet.has(s.sessionId))
   const showArchived = LS.get('dsShowArchivedV1', '0') === '1'
@@ -1257,7 +1351,7 @@ function eventHtml(entry) {
     const sysText = type === 'user/message' ? systemReminderText(blocks) : ''
     if (sysText) {
       const shown = sysText.length > 400 ? sysText.slice(0, 400) + '…' : sysText
-      return `<details class="event ds-tool"><summary>${esc(t('ds.eventSystemReminder'))}</summary><pre>${esc(shown)}</pre></details>`
+      return `<details class="event ds-tool ds-event-detail"><summary>${esc(t('ds.eventSystemReminder'))}</summary><pre>${esc(shown)}</pre></details>`
     }
     const text = blocks.map(blockHtml).join('')
     return `<div class="ds-msg ${esc(role)}"><div class="role">${esc(role === 'user' ? t('ds.role.me') : t('ds.role.dsh'))}</div>${text || '<span style="opacity:.6">…</span>'}</div>`
@@ -1457,6 +1551,7 @@ function renderNotifStack() {
   stack.querySelectorAll('.ds-notif-card').forEach(card => card.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') toast(t('ds.ignored'), 'ok')
   }))
+  renderOverviewDesktop()
 }
 async function approveApproval(id, allow) {
   const a = state.approvals.find(x => x.approvalId === id)
@@ -1594,7 +1689,7 @@ async function loadFs(dir, silent) {
     $('fs-path').textContent = data.path
     $('fs-list').innerHTML = (data.entries || []).map(e => `
       <div class="ds-fs-row" data-fs-path="${esc(e.path)}" data-fs-dir="${e.type === 'dir' ? '1' : '0'}">
-        <span>${e.type === 'dir' ? '📁' : '📄'}</span>
+        <span class="ds-fs-type">${desktopFsIconSvg(e.type === 'dir')}</span>
         <span class="ds-fs-name">${esc(e.name)}</span>
         <span class="ds-fs-size">${e.type === 'dir' ? '' : fmtSize(e.size)}</span>
       </div>`).join('') || `<div class="ds-empty">${t('ds.fsEmpty')}</div>`
@@ -1607,6 +1702,12 @@ async function loadFs(dir, silent) {
     $('fs-list').innerHTML = `<div class="ds-empty">${esc(e.message || t('ds.toastConnFailed'))}</div>`
   }
 }
+
+function desktopFsIconSvg(isDir) {
+  return isDir
+    ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 6.5h6l2 2H20a1 1 0 0 1 1 1v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5a1 1 0 0 1 .5-1Z"/></svg>'
+    : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3.5h8l4 4V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1Z"/><path d="M14 3.5v4h4M8 13h8M8 16h6"/></svg>'
+}
 function fsUp() {
   if (state.fs.path && state.fs.initial && state.fs.path !== state.fs.initial) {
     loadFs(fsParent(state.fs.path))
@@ -1684,15 +1785,21 @@ async function refreshWorkbench({ silent = false } = {}) {
     const listRes = await fetch(fsApiUrl('/list', { path: state.wb.path }), { headers: fsHeaders() })
     if (listRes.ok) {
       const listData = await listRes.json().catch(() => ({}))
-      const have = new Set(items.map(w => wbPathKey(w.path)))
-      for (const entry of listData.entries || []) {
-        if (entry.type !== 'dir') continue
-        const projectPath = wbJoin(state.wb.path, entry.name)
-        if (have.has(wbPathKey(projectPath))) continue
-        try {
-          const created = await rpc('workspace.create', { path: projectPath })
-          if (created?.workspace) { items.push(created.workspace); have.add(wbPathKey(projectPath)) }
-        } catch {}
+      if (Array.isArray(listData.entries)) {
+        const diskDirs = new Set(listData.entries.filter(e => e.type === 'dir').map(e => wbPathKey(wbJoin(state.wb.path, e.name))))
+        for (let i = items.length - 1; i >= 0; i--) {
+          if (!diskDirs.has(wbPathKey(items[i].path))) items.splice(i, 1)
+        }
+        const have = new Set(items.map(w => wbPathKey(w.path)))
+        for (const entry of listData.entries) {
+          if (entry.type !== 'dir') continue
+          const projectPath = wbJoin(state.wb.path, entry.name)
+          if (have.has(wbPathKey(projectPath))) continue
+          try {
+            const created = await rpc('workspace.create', { path: projectPath })
+            if (created?.workspace) { items.push(created.workspace); have.add(wbPathKey(projectPath)) }
+          } catch {}
+        }
       }
     }
   } catch {}
@@ -1723,10 +1830,11 @@ function renderWorkbench() {
   panel.classList.toggle('hidden', !state.wb.expanded)
   if (!state.wb.expanded) return
   const projects = state.wb.projects || []
+  const archivedSet = new Set(state.archivedIds || [])
   let html = `<div class="ds-wb-panel-title">${esc(t('wb.projects'))}</div>`
   html += projects.length ? projects.map(w => {
     const id = String(w.workspaceId || '')
-    const sessions = (w.sessionIds || []).map(sid => state.byId.get(sid)).filter(Boolean).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
+    const sessions = (w.sessionIds || []).map(sid => state.byId.get(sid)).filter(Boolean).filter(s => !archivedSet.has(s.sessionId)).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
     const open = state.wb.open === id
     return `<div class="ds-wb-project ${open ? 'open' : ''}">
       <button type="button" class="ds-wb-project-head" data-wb-head="${esc(id)}">
@@ -1777,7 +1885,7 @@ async function wbFsLoad(dir) {
     const dirs = (data.entries || []).filter(e => e.type === 'dir')
     box.innerHTML = dirs.length ? dirs.map(e => {
       const p = wbJoin(data.path, e.name)
-      return `<div class="ds-wb-fs-row" data-wb-dir="${esc(p)}"><span>📁</span><span class="ds-wb-fs-name">${esc(e.name)}</span><button type="button" class="ds-btn ds-wb-select" data-wb-select="${esc(p)}">${esc(t('wb.selectDir'))}</button></div>`
+      return `<div class="ds-wb-fs-row" data-wb-dir="${esc(p)}"><span class="ds-fs-type">${desktopFsIconSvg(true)}</span><span class="ds-wb-fs-name">${esc(e.name)}</span><button type="button" class="ds-btn ds-wb-select" data-wb-select="${esc(p)}">${esc(t('wb.selectDir'))}</button></div>`
     }).join('') : `<div class="ds-empty">${esc(t('wb.empty'))}</div>`
     box.querySelectorAll('[data-wb-dir]').forEach(row => row.addEventListener('click', e => { if (!e.target.closest('[data-wb-select]')) wbFsLoad(row.dataset.wbDir) }))
     box.querySelectorAll('[data-wb-select]').forEach(button => button.addEventListener('click', () => bindWorkbench(button.dataset.wbSelect)))
@@ -1899,13 +2007,98 @@ function renderStats(days) {
 }
 
 /* ---------------- 视图与连接状态 ---------------- */
+function renderOverviewDesktop() {
+  const ring = $('ds-overview-pulse-ring')
+  if (!ring) return
+  const checks = {
+    gateway: !!state.token && !!state.server,
+    dsh: !!state.hostInfo,
+    mux: !!state.streamsOk?.mux,
+    host: !!state.streamsOk?.host
+  }
+  const online = Object.values(checks).filter(Boolean).length
+  const status = online === 4 ? 'Nominal' : online > 0 ? 'Degraded' : 'Offline'
+  const pulseCard = document.querySelector('.ds-overview-pulse-card')
+  if (pulseCard) {
+    pulseCard.classList.remove('status-nominal', 'status-degraded', 'status-offline')
+    pulseCard.classList.add('status-' + status.toLowerCase())
+  }
+  ring.style.setProperty('--pulse-pct', `${online / 4 * 100}%`)
+  $('ds-overview-health').textContent = online === 4 ? t('ds.live') : online ? `${online}/4` : t('ds.offlineCore')
+  $('ds-overview-health-caption').textContent = online === 4 ? t('ds.allLinked') : online ? t('ds.components', { n: online }) : t('ds.offlineShort')
+  $('ds-overview-status').textContent = t(`ds.system${status}`)
+  $('ds-overview-status-desc').textContent = t('ds.components', { n: online })
+  for (const [name, ok] of Object.entries(checks)) {
+    const item = document.querySelector(`[data-ds-overview-link="${name}"]`)
+    if (!item) continue
+    item.classList.toggle('ok', ok)
+    item.classList.toggle('off', !ok)
+    const value = item.querySelector('b')
+    if (value) value.textContent = ok ? t('ds.online') : t('ds.offlineShort')
+  }
+
+  const pending = [
+    ...state.approvals.map(a => ({ kind: 'approval', item: a })),
+    ...state.questions.map(q => ({ kind: 'question', item: q }))
+  ]
+  $('ds-overview-attention-count').textContent = pending.length ? t('ds.pendingCount', { n: pending.length }) : '—'
+  $('ds-overview-attention-list').innerHTML = pending.length ? pending.slice(0, 4).map(({ kind, item }) => {
+    const title = titleOf(state.byId.get(item.sessionId))
+    if (kind === 'approval') return `<div class="ds-overview-attention-item" data-ds-overview-approval="${esc(item.approvalId)}">
+      <span class="ds-overview-mark">⌁</span><span class="ds-overview-copy"><span class="ds-overview-item-title">${esc(item.toolName || t('ds.toolDefault'))}</span><span class="ds-overview-item-desc">${esc(item.reason || t('ds.approvalReason', { reason: '' }))} · ${esc(title)}</span></span>
+      <span class="ds-overview-actions"><button class="ds-btn allow" data-ds-overview-approve="1">${t('ds.allow')}</button><button class="ds-btn reject" data-ds-overview-approve="0">${t('ds.reject')}</button></span>
+    </div>`
+    return `<button type="button" class="ds-overview-attention-item question" data-ds-overview-question="${esc(item.rpcId)}">
+      <span class="ds-overview-mark">?</span><span class="ds-overview-copy"><span class="ds-overview-item-title">${esc(item.questions?.[0]?.question || t('ds.questionNotify'))}</span><span class="ds-overview-item-desc">${esc(title)}</span></span><span class="ds-overview-arrow">›</span>
+    </button>`
+  }).join('') : `<div class="ds-overview-empty">${t('ds.nothingPending')}</div>`
+  $('ds-overview-attention-list').querySelectorAll('[data-ds-overview-approve]').forEach(btn => btn.addEventListener('click', () => approveApproval(btn.closest('[data-ds-overview-approval]')?.dataset.dsOverviewApproval || '', btn.dataset.dsOverviewApprove === '1')))
+  $('ds-overview-attention-list').querySelectorAll('[data-ds-overview-question]').forEach(btn => btn.addEventListener('click', () => openQuestionModal(state.questions.find(q => q.rpcId === btn.dataset.dsOverviewQuestion))))
+
+  const running = state.sessions.filter(s => s.running).length
+  const sessions = [...state.sessions].sort((a, b) => Number(b.running) - Number(a.running) || (new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0))).slice(0, 6)
+  const primary = $('ds-overview-primary-action')
+  if (primary) {
+    let action = 'new'
+    let label = t('ds.action.newSession')
+    let sessionId = ''
+    if (!state.token) {
+      action = 'settings'
+      label = t('ds.action.connect')
+    } else if (online > 0 && online < 4) {
+      action = 'refresh'
+      label = t('ds.action.refresh')
+    } else if (pending.length) {
+      action = 'attention'
+      label = t('ds.action.attention')
+    } else if (sessions.length) {
+      action = 'session'
+      sessionId = sessions[0].sessionId
+      label = t('ds.action.openSession')
+    }
+    primary.textContent = label
+    primary.dataset.dsOverviewAction = action
+    primary.dataset.dsOverviewSession = sessionId
+  }
+  $('ds-overview-dsh-version').textContent = state.hostInfo?.version || '—'
+  $('ds-overview-gateway-version').textContent = checks.gateway ? t('ds.online') : t('ds.offlineShort')
+  $('ds-overview-active-sessions').textContent = String(running)
+  $('ds-overview-connection-mode').textContent = state.token ? t(state.streamMode === 'poll' ? 'ds.poll' : 'ds.liveWs') : '—'
+  $('ds-overview-active-count').textContent = running ? t('ds.activeCount', { n: running }) : ''
+  $('ds-overview-session-list').innerHTML = sessions.length ? sessions.map(s => `<button type="button" class="ds-overview-session-item ${s.running ? 'running' : ''}" data-ds-overview-session="${esc(s.sessionId)}">
+    <span class="ds-overview-mark">${s.running ? '●' : '○'}</span><span class="ds-overview-copy"><span class="ds-overview-item-title">${esc(titleOf(s))}</span><span class="ds-overview-item-desc">${s.running ? esc(t('ds.running')) + ' · ' : ''}${esc(fmtTime(s.updatedAt))}</span></span><span class="ds-overview-arrow">›</span>
+  </button>`).join('') : `<div class="ds-overview-empty">${t('ds.noSessions')}</div>`
+  $('ds-overview-session-list').querySelectorAll('[data-ds-overview-session]').forEach(btn => btn.addEventListener('click', () => openSession(btn.dataset.dsOverviewSession)))
+}
+
 function showView(id) {
   state.view = id
-  for (const v of ['view-sessions', 'view-chat', 'view-files', 'view-settings']) $(v).classList.toggle('hidden', v !== id)
+  for (const v of ['view-overview', 'view-sessions', 'view-chat', 'view-files', 'view-settings']) $(v).classList.toggle('hidden', v !== id)
   document.querySelectorAll('.ds-nav-item').forEach(b => b.classList.toggle('active', b.dataset.view === id))
-  const titles = { 'view-sessions': 'ds.sessions', 'view-chat': 'ds.sessions', 'view-files': 'ds.files', 'view-settings': 'ds.settings' }
+  const titles = { 'view-overview': 'ds.overview', 'view-sessions': 'ds.sessions', 'view-chat': 'ds.sessions', 'view-files': 'ds.files', 'view-settings': 'ds.settings' }
   if (id === 'view-chat') { const s = state.byId.get(state.current); $('ds-title').textContent = s ? titleOf(s) : t('ds.sessions') }
   else $('ds-title').textContent = t(titles[id])
+  if (id === 'view-overview') renderOverviewDesktop()
   if (id === 'view-files' && !state.fs.loaded) loadFs(null, true)
   if (id === 'view-settings') showSettingsHome()
 }
@@ -1991,6 +2184,28 @@ function bindUi() {
     list.style.display = list.style.display === 'none' ? 'flex' : 'none'
   })
   document.querySelectorAll('.ds-nav-item').forEach(b => b.addEventListener('click', () => showView(b.dataset.view)))
+  $('ds-overview-refresh').addEventListener('click', async () => {
+    toast(t('ds.loading'))
+    if (state.token) {
+      await refreshSessions()
+      const host = await safeRpc('host.describe', {}, '')
+      if (host) state.hostInfo = host
+    }
+    renderOverviewDesktop()
+  })
+  $('ds-overview-primary-action').addEventListener('click', () => {
+    const button = $('ds-overview-primary-action')
+    const action = button.dataset.dsOverviewAction
+    if (action === 'session' && button.dataset.dsOverviewSession) return openSession(button.dataset.dsOverviewSession)
+    if (action === 'new') return $('btn-new-session').click()
+    if (action === 'settings') return showView('view-settings')
+    if (action === 'refresh') return $('ds-overview-refresh').click()
+    const first = document.querySelector('.ds-overview-attention-item')
+    if (first) {
+      first.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      if (first.matches('button')) first.focus({ preventScroll: true })
+    }
+  })
   $('session-list').addEventListener('click', (e) => {
     if (e.target.closest('[data-archived-toggle]')) {
       LS.set('dsShowArchivedV1', LS.get('dsShowArchivedV1', '0') === '1' ? '0' : '1')
@@ -2128,7 +2343,7 @@ function bindUi() {
   $('btn-lang').addEventListener('click', () => {
     I18N.setLang(I18N.lang === 'zh' ? 'en' : 'zh')
     $('btn-lang').textContent = I18N.lang === 'zh' ? 'EN' : '中文'
-    renderServers(); renderSessions(); updateConn(); themeApply()
+    renderServers(); renderSessions(); renderNotifStack(); renderOverviewDesktop(); updateConn(); themeApply()
   })
   $('fs-up').addEventListener('click', fsUp)
   $('fs-new-workspace').addEventListener('click', openWorkspaceModal)
@@ -2140,7 +2355,7 @@ function bindUi() {
 async function start() {
   loadServers()
   renderServers()
-  showView('view-sessions')
+  showView('view-overview')
   const urlToken = new URLSearchParams(location.search).get('token')
   if (urlToken) { state.token = urlToken; LS.set('token', urlToken); history.replaceState(null, '', location.pathname) }
   if (!state.token) {
@@ -2155,9 +2370,12 @@ async function start() {
   if (state.token) {
     if (state.servers.length) await selectFastestServer({ silent: true, reconnect: false })
     openStreams()
-    refreshSessions()
+    await refreshSessions()
+    const host = await safeRpc('host.describe', {}, '')
+    if (host) state.hostInfo = host
     refreshWorkbench({ silent: true })
   }
+  renderOverviewDesktop()
 }
 
 start()