dsh-remote-plugin 0.6.6 → 0.6.8

package/public/desktop/desktop.js

@@ -52,6 +52,7 @@ 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: [],
@@ -62,6 +63,8 @@ const state = {
   pollSeq: { mux: 0, host: 0 },
   fs: { path: null, initial: null, loaded: false },
   models: { loaded: false, loading: false, groups: [], current: null, failures: [] },
+  wb: { bound: false, path: '', title: '', expanded: false, projects: null, open: null, apiMissing: false },
+  archivedIds: [],
   view: 'sessions'
 }
 const streams = {}
@@ -1053,7 +1056,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) {
@@ -1098,10 +1101,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) {
@@ -1128,31 +1133,53 @@ function sortedSessions() {
   return items.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
 }
 function renderSessions() {
-  const items = sortedSessions()
-  let lastWorkspace = null
-  const rows = []
-  for (const s of items) {
-    const workspace = sessionWorkspaceLabel(s)
-    const workspaceName = workspaceDisplayName(workspace)
-    if (state.sessionSort === 'workspace' && workspace !== lastWorkspace) {
-      rows.push(`<div class="ds-session-group" title="${esc(workspace)}"><span class="ds-session-group-icon" aria-hidden="true">⌂</span><span class="ds-session-group-name">${esc(workspaceName)}</span></div>`)
-      lastWorkspace = workspace
+  const allItems = sortedSessions()
+  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 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'
+  const renderItems = (items) => {
+    let lastWorkspace = null
+    const rows = []
+    for (const s of items) {
+      const workspace = sessionWorkspaceLabel(s)
+      const workspaceName = workspaceDisplayName(workspace)
+      if (state.sessionSort === 'workspace' && workspace !== lastWorkspace) {
+        rows.push(`<div class="ds-session-group" title="${esc(workspace)}"><span class="ds-session-group-icon" aria-hidden="true">⌂</span><span class="ds-session-group-name">${esc(workspaceName)}</span></div>`)
+        lastWorkspace = workspace
+      }
+      const title = titleOf(s)
+      rows.push(`<button class="ds-session-item ${state.current === s.sessionId ? 'current' : ''}" data-id="${esc(s.sessionId)}">
+        <span class="ds-session-title">${esc(title)}</span>
+        <span class="ds-session-workspace" title="${esc(workspace)}">⌂ ${esc(workspaceName)}</span>
+        <span class="ds-session-meta"><span class="ds-session-dot ${s.running ? 'running' : ''}"></span>${fmtTime(s.updatedAt)}</span>
+      </button>`)
     }
-    const title = titleOf(s)
-    rows.push(`<button class="ds-session-item ${state.current === s.sessionId ? 'current' : ''}" data-id="${esc(s.sessionId)}">
-      <span class="ds-session-title">${esc(title)}</span>
-      <span class="ds-session-workspace" title="${esc(workspace)}">⌂ ${esc(workspaceName)}</span>
-      <span class="ds-session-meta"><span class="ds-session-dot ${s.running ? 'running' : ''}"></span>${fmtTime(s.updatedAt)}</span>
-    </button>`)
-  }
-  const html = rows.join('') || `<div class="ds-empty">${t('ds.sessionsEmpty')}</div>`
+    return rows.join('')
+  }
+  const divider = archived.length ? `<button class="ds-archived-toggle" type="button" data-archived-toggle>${esc(showArchived ? t('wb.archivedShown') : t('wb.archivedHidden'))}</button>` : ''
+  const hiddenByWorkbench = allItems.length - visible.length
+  const html = renderItems(main) + divider + (showArchived ? renderItems(archived) : '') || `<div class="ds-empty">${esc(hiddenByWorkbench ? t('wb.flatHidden', { n: hiddenByWorkbench }) : t('ds.sessionsEmpty'))}</div>`
   $('session-list').innerHTML = html
   $('mobile-session-list').innerHTML = html
   $('session-list').classList.toggle('workspace-sorted', state.sessionSort === 'workspace')
   $('mobile-session-list').classList.toggle('workspace-sorted', state.sessionSort === 'workspace')
   const sort = $('session-sort')
   if (sort) sort.value = state.sessionSort
+  document.querySelectorAll('[data-archived-toggle]').forEach(b => b.addEventListener('click', () => {
+    LS.set('dsShowArchivedV1', LS.get('dsShowArchivedV1', '0') === '1' ? '0' : '1')
+    renderSessions()
+  }))
   document.querySelectorAll('[data-id]').forEach(b => b.addEventListener('click', () => openSession(b.dataset.id)))
+  renderWorkbench()
 }
 
 async function openSession(id) {
@@ -1236,7 +1263,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>`
@@ -1436,6 +1463,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)
@@ -1573,7 +1601,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>`
@@ -1586,12 +1614,247 @@ 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))
   }
 }
 
+/* ---------------- 工作台绑定 / 项目会话 ---------------- */
+function wbPathKey(p) {
+  let value = String(p || '').replace(/\\/g, '/').replace(/\/+/g, '/')
+  if (value.length > 1) value = value.replace(/\/+$/, '')
+  const windows = /^[A-Za-z]:\//.test(value) || /Windows/i.test(navigator.platform || navigator.userAgent || '')
+  return windows ? value.toLowerCase() : value
+}
+function wbBaseName(p) {
+  const value = String(p || '').replace(/[\\/]+$/, '')
+  return value.split(/[\\/]/).pop() || value
+}
+function wbStrictInside(pathValue, rootValue) {
+  const pathKey = wbPathKey(pathValue)
+  const rootKey = wbPathKey(rootValue)
+  if (!pathKey || !rootKey || pathKey === rootKey) return false
+  return pathKey.startsWith(rootKey.endsWith('/') ? rootKey : rootKey + '/')
+}
+function wbJoin(root, name) {
+  const raw = String(root || '')
+  const separator = raw.includes('\\') ? '\\' : '/'
+  return raw.replace(/[\\/]+$/, '') + separator + String(name || '')
+}
+function wbFsParent(p) {
+  if (!p) return null
+  const raw = String(p)
+  const separator = raw.includes('\\') ? '\\' : '/'
+  const index = raw.lastIndexOf(separator)
+  if (index <= 0 || /^[A-Za-z]:$/.test(raw.slice(0, index))) return null
+  return raw.slice(0, index)
+}
+async function wbGateway(method, pathname, body) {
+  const options = { method, headers: { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' } }
+  if (body !== undefined) {
+    options.headers['content-type'] = 'application/json'
+    options.body = JSON.stringify(body)
+  }
+  const res = await fetch(apiUrl(pathname), options)
+  if (res.status === 401) throw new Error('AUTH')
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status))
+  return data
+}
+async function refreshWorkbench({ silent = false } = {}) {
+  if (!state.token) { renderWorkbench(); return }
+  let wb = null
+  try {
+    wb = await wbGateway('GET', '/workbench')
+    state.wb.apiMissing = false
+  } catch (e) {
+    if (e.message === 'AUTH') { toast(t('ds.toastAuth'), 'err'); return }
+    if (!silent) toast(t('wb.loadFailed', { msg: e.message }), 'err')
+    if (!state.wb.bound && /404/.test(e.message)) state.wb.apiMissing = true
+  }
+  const wl = await safeRpc('workspace.list', {}, '')
+  state.archivedIds = wl && Array.isArray(wl.archivedSessionIds) ? wl.archivedSessionIds : []
+  if (!wb) { renderWorkbench(); renderSessions(); return }
+  if (!wb.bound) {
+    state.wb = { bound: false, path: '', title: '', expanded: false, projects: null, open: null, apiMissing: false }
+    renderWorkbench()
+    renderSessions()
+    return
+  }
+  state.wb.bound = true
+  state.wb.path = wb.path || ''
+  state.wb.title = wb.title || ''
+  if (!wl) { state.wb.projects = []; renderWorkbench(); renderSessions(); return }
+  const items = Array.isArray(wl.items) ? wl.items.slice() : []
+  try {
+    const listRes = await fetch(fsApiUrl('/list', { path: state.wb.path }), { headers: fsHeaders() })
+    if (listRes.ok) {
+      const listData = await listRes.json().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 {}
+  state.wb.projects = items
+    .filter(w => wbStrictInside(w.path, state.wb.path))
+    .sort((a, b) => String(a.title || wbBaseName(a.path)).localeCompare(String(b.title || wbBaseName(b.path)), 'zh-CN', { numeric: true }))
+  renderWorkbench()
+  renderSessions()
+}
+function renderWorkbench() {
+  const box = $('workbench-box')
+  if (!box) return
+  const unbound = $('wb-unbound')
+  const bound = $('wb-bound')
+  const hint = $('wb-api-hint')
+  if (!state.wb.bound) {
+    unbound.classList.remove('hidden')
+    bound.classList.add('hidden')
+    hint?.classList.toggle('hidden', !state.wb.apiMissing)
+    return
+  }
+  unbound.classList.add('hidden')
+  bound.classList.remove('hidden')
+  $('wb-head-text').textContent = t('wb.bound', { title: state.wb.title || wbBaseName(state.wb.path) })
+  $('wb-head').setAttribute('aria-expanded', state.wb.expanded ? 'true' : 'false')
+  $('wb-caret').textContent = state.wb.expanded ? '▾' : '▸'
+  const panel = $('wb-panel')
+  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).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)}">
+        <span class="ds-wb-caret" aria-hidden="true">${open ? '▾' : '▸'}</span>
+        <span class="ds-wb-project-title" title="${esc(w.path)}">${esc(w.title || wbBaseName(w.path) || short(id))}</span>
+        <span class="ds-wb-project-count">${sessions.length}</span>
+      </button>
+      <div class="ds-wb-project-body ${open ? '' : 'hidden'}">
+        <button type="button" class="ds-mini-btn ds-wb-new-session" data-wb-new="${esc(id)}">+ ${esc(t('wb.newSession'))}</button>
+        ${sessions.length ? sessions.map(s => `<button type="button" class="ds-wb-session ${state.current === s.sessionId ? 'current' : ''}" data-wb-session="${esc(s.sessionId)}"><span class="ds-wb-session-dot ${s.running ? 'running' : ''}"></span><span class="ds-wb-session-title">${esc(titleOf(s))}</span></button>`).join('') : `<div class="ds-wb-session-empty">${esc(t('wb.noSessions'))}</div>`}
+      </div>
+    </div>`
+  }).join('') : `<div class="ds-wb-empty">${esc(t('wb.noProjects'))}</div>`
+  html += `<button type="button" class="ds-mini-btn ds-wb-unbind-panel" data-wb-unbind-panel>${esc(t('wb.unbind'))}</button>`
+  panel.innerHTML = html
+  panel.querySelectorAll('[data-wb-head]').forEach(button => button.addEventListener('click', () => {
+    state.wb.open = state.wb.open === button.dataset.wbHead ? null : button.dataset.wbHead
+    renderWorkbench()
+  }))
+  panel.querySelectorAll('[data-wb-new]').forEach(button => button.addEventListener('click', async () => {
+    const value = await safeRpc('session.create', { workspaceId: button.dataset.wbNew }, '')
+    if (value?.sessionId) { await refreshSessions(); openSession(value.sessionId) }
+  }))
+  panel.querySelectorAll('[data-wb-session]').forEach(button => button.addEventListener('click', () => openSession(button.dataset.wbSession)))
+  panel.querySelectorAll('[data-wb-unbind-panel]').forEach(button => button.addEventListener('click', unbindWorkbench))
+}
+const wbFs = { path: null, initial: null }
+function openWorkbenchModal() {
+  $('modal-workbench').classList.remove('hidden')
+  wbFs.path = null
+  wbFs.initial = null
+  wbFsLoad(null)
+  setTimeout(() => $('wb-path-input').focus(), 50)
+}
+function closeWorkbenchModal() { $('modal-workbench').classList.add('hidden') }
+async function wbFsLoad(dir) {
+  const box = $('wb-fs-list')
+  const target = dir ?? wbFs.path ?? ''
+  box.innerHTML = `<div class="ds-empty">${esc(t('ds.loading'))}</div>`
+  $('wb-fs-path').textContent = target ? '…' + target.slice(-40) : '~'
+  try {
+    const res = await fetch(fsApiUrl('/list', target ? { path: target } : {}), { headers: fsHeaders() })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok || !Array.isArray(data.entries)) throw new Error(data.error || ('HTTP ' + res.status))
+    wbFs.path = data.path
+    if (!wbFs.initial) wbFs.initial = data.path
+    $('wb-fs-path').textContent = data.path
+    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 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)))
+  } catch (e) {
+    $('wb-fs-path').textContent = target || '~'
+    box.innerHTML = `<div class="ds-empty">${esc(e.message || t('ds.toastConnFailed'))}</div>`
+  }
+}
+function wbFsUp() {
+  if (wbFs.path && wbFs.initial && wbFs.path !== wbFs.initial) {
+    const parent = wbFsParent(wbFs.path)
+    if (parent) wbFsLoad(parent)
+  }
+}
+async function bindWorkbench(rawPath) {
+  const value = String(rawPath || '').trim()
+  if (!value) return toast(t('wb.pathEmpty'), 'err')
+  try {
+    const wb = await wbGateway('POST', '/workbench/bind', { path: value })
+    state.wb = { bound: true, path: wb.path || value, title: wb.title || '', expanded: true, projects: null, open: null, apiMissing: false }
+    const paths = [state.wb.path]
+    try {
+      const res = await fetch(fsApiUrl('/list', { path: state.wb.path }), { headers: fsHeaders() })
+      const data = await res.json().catch(() => ({}))
+      for (const e of data.entries || []) if (e.type === 'dir') paths.push(wbJoin(state.wb.path, e.name))
+    } catch {}
+    for (const projectPath of paths) {
+      try { await rpc('workspace.create', { path: projectPath }) } catch {}
+    }
+    closeWorkbenchModal()
+    await refreshWorkbench({ silent: true })
+    await refreshSessions()
+    toast(t('wb.boundOk', { path: state.wb.path }), 'ok')
+  } catch (e) {
+    if (e.message === 'AUTH') return toast(t('ds.toastAuth'), 'err')
+    toast(t('wb.bindFailed', { msg: e.message }), 'err')
+  }
+}
+async function unbindWorkbench() {
+  if (!confirm(t('wb.unbindConfirm'))) return
+  try {
+    await wbGateway('POST', '/workbench/unbind')
+    state.wb = { bound: false, path: '', title: '', expanded: false, projects: null, open: null, apiMissing: false }
+    renderWorkbench()
+    renderSessions()
+    toast(t('wb.unboundOk'), 'ok')
+  } catch (e) {
+    if (e.message === 'AUTH') return toast(t('ds.toastAuth'), 'err')
+    toast(t('wb.unbindFailed', { msg: e.message }), 'err')
+  }
+}
+let wbRefreshTimer = null
+function scheduleWorkbenchRefresh() {
+  clearTimeout(wbRefreshTimer)
+  wbRefreshTimer = setTimeout(() => refreshWorkbench({ silent: true }), 400)
+}
+
 /* ---------------- 统计 ---------------- */
 function bucketTokens(b) { return (b.input || 0) + (b.cacheRead || 0) + (b.cacheWrite || 0) + (b.output || 0) }
 let statsDrawerOpened = false
@@ -1656,13 +1919,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()
 }
@@ -1748,10 +2096,53 @@ 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')
+      renderSessions()
+      return
+    }
     const item = e.target.closest('[data-id]')
     if (item) openSession(item.dataset.id)
   })
+  $('btn-wb-bind').addEventListener('click', openWorkbenchModal)
+  $('btn-wb-bind-manual').addEventListener('click', () => bindWorkbench($('wb-path-input').value))
+  $('wb-path-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); bindWorkbench($('wb-path-input').value) }
+  })
+  $('wb-fs-up').addEventListener('click', wbFsUp)
+  $('wb-fs-home').addEventListener('click', () => wbFsLoad(wbFs.initial || null))
+  $('btn-wb-modal-close').addEventListener('click', closeWorkbenchModal)
+  $('modal-workbench').addEventListener('click', e => { if (e.target === $('modal-workbench')) closeWorkbenchModal() })
+  $('wb-head').addEventListener('click', () => {
+    state.wb.expanded = !state.wb.expanded
+    if (state.wb.expanded && !state.wb.projects) refreshWorkbench({ silent: false })
+    else renderWorkbench()
+  })
+  $('btn-wb-path').addEventListener('click', () => { if (state.wb.path) toast(t('wb.boundPath', { path: state.wb.path }), 'ok') })
+  $('btn-wb-unbind').addEventListener('click', unbindWorkbench)
   $('btn-send').addEventListener('click', sendMessage)
   $('composer').addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendMessage() }
@@ -1864,7 +2255,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)
@@ -1876,7 +2267,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) {
@@ -1885,13 +2276,18 @@ async function start() {
   }
   $('token-desc').textContent = state.token ? '● ' + state.token.slice(0, 12) + '…' : t('ds.toastAuth')
   bindUi()
+  renderWorkbench()
   updateConn()
   checkNotesOnStart()
   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()

package/public/desktop/i18n.js

@@ -10,6 +10,38 @@
     if (saved === 'zh' || saved === 'en') return saved
     return (navigator.language || 'zh').toLowerCase().startsWith('zh') ? 'zh' : 'en'
   }
+  const BUILTIN = {
+    zh: {
+      'wb.unbound': 'DSH Remote（未绑定）', 'wb.bind': '绑定工作台', 'wb.bound': 'DSH Remote（绑定 {title}）',
+      'wb.viewPath': '已绑定 workspace', 'wb.unbind': '解绑', 'wb.unbindConfirm': '确定解绑当前工作台？解绑后这些会话将回到扁平会话列表。',
+      'wb.modalTitle': '绑定工作台', 'wb.modalDesc': '选择工作台根目录，其下每个子文件夹会自动成为项目工作区。',
+      'wb.up': '上级', 'wb.home': '根目录', 'wb.selectDir': '选择此目录', 'wb.pathPlaceholder': '或手动输入绝对路径…',
+      'wb.pathEmpty': '请输入要绑定的路径', 'wb.empty': '此目录没有子文件夹', 'wb.boundOk': '工作台已绑定：{path}',
+      'wb.bindFailed': '绑定失败：{msg}', 'wb.unboundOk': '已解绑工作台', 'wb.unbindFailed': '解绑失败：{msg}',
+      'wb.boundPath': '绑定路径：{path}', 'wb.projects': '项目', 'wb.noProjects': '暂无项目（根目录下新建文件夹后会自动出现）',
+      'wb.newSession': '新会话', 'wb.noSessions': '暂无会话', 'wb.flatHidden': '工作台会话已收起（{n} 个在工作台面板）',
+      'wb.apiMissing': '工作台接口不可用（需更新网关）', 'wb.loadFailed': '工作台加载失败：{msg}',
+      'wb.archivedHidden': '------隐藏已归档会话------', 'wb.archivedShown': '------显示已归档会话------'
+    },
+    en: {
+      'wb.unbound': 'DSH Remote (unbound)', 'wb.bind': 'Bind workbench', 'wb.bound': 'DSH Remote (bound {title})',
+      'wb.viewPath': 'Bound workspace', 'wb.unbind': 'Unbind', 'wb.unbindConfirm': 'Unbind the current workbench? These sessions will return to the flat list.',
+      'wb.modalTitle': 'Bind workbench', 'wb.modalDesc': 'Choose the workbench root; each subfolder becomes a project workspace automatically.',
+      'wb.up': 'Up', 'wb.home': 'Root', 'wb.selectDir': 'Select this folder', 'wb.pathPlaceholder': 'Or type an absolute path…',
+      'wb.pathEmpty': 'Enter a path to bind', 'wb.empty': 'No subfolders in this folder', 'wb.boundOk': 'Workbench bound: {path}',
+      'wb.bindFailed': 'Bind failed: {msg}', 'wb.unboundOk': 'Workbench unbound', 'wb.unbindFailed': 'Unbind failed: {msg}',
+      'wb.boundPath': 'Bound path: {path}', 'wb.projects': 'Projects', 'wb.noProjects': 'No projects yet',
+      'wb.newSession': 'New session', 'wb.noSessions': 'No sessions', 'wb.flatHidden': 'Workbench sessions folded ({n} in the workbench panel)',
+      'wb.apiMissing': 'Workbench API unavailable (update gateway)', 'wb.loadFailed': 'Workbench load failed: {msg}',
+      'wb.archivedHidden': '------ Hide archived ------', 'wb.archivedShown': '------ Show archived ------'
+    }
+  }
+  function mergeDicts(strings) {
+    return {
+      zh: Object.assign({}, BUILTIN.zh, strings?.zh || {}),
+      en: Object.assign({}, BUILTIN.en, strings?.en || {})
+    }
+  }
   let dict = null
   let lang = detect()
 
@@ -46,7 +78,7 @@
   }
 
   window.I18N = {
-    init(strings) { dict = strings || dict; return apply(document) },
+    init(strings) { dict = mergeDicts(strings || dict || {}); return apply(document) },
     t, setLang, apply,
     get lang() { return lang }
   }