dsh-remote-plugin 0.6.13 → 0.6.15

package/public/desktop/desktop.js

@@ -13,14 +13,16 @@ const LS = {
 }
 const CLIENT_ID = (() => {
   try {
-    let id = sessionStorage.getItem('dshRemoteClientId')
+    const key = 'dshRemoteClientIdV2'
+    let id = localStorage.getItem(key)
     if (!id) {
       id = (globalThis.crypto?.randomUUID?.() || `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`)
-      sessionStorage.setItem('dshRemoteClientId', id)
+      localStorage.setItem(key, id)
     }
     return id
   } catch { return '' }
 })()
+function clientIdHeaders() { return CLIENT_ID ? { 'x-dsh-remote-client-id': CLIENT_ID } : {} }
 const CAP = window.Capacitor || null
 
 /* ---------------- 皮肤 ---------------- */
@@ -67,10 +69,16 @@ const state = {
   sessionSort: LS.get('sessionSort', 'time') === 'workspace' ? 'workspace' : 'time',
   byId: new Map(),
   current: null,
+  sessionRecovery: { status: 'idle', error: '' },
+  pendingProjections: new Map(),
+  lastStreamResyncAt: 0,
   hostInfo: null,
   history: emptyDesktopHistory(),
   approvals: [],
   questions: [],
+  queues: {},
+  queueSteering: {},
+  sessionTurnTimes: {},
   questionModal: null,
   streamsOk: { mux: false, host: false },
   errCount: 0,
@@ -84,7 +92,8 @@ const state = {
   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'
+  view: 'sessions',
+  subagentExpandedSession: ''
 }
 const streams = {}
 let pollTimer = null
@@ -545,7 +554,7 @@ async function getWsTicket() {
     if (activeGatewayCapability('wsTicket') === false) throw new Error('ws ticket unsupported')
     const res = await fetch(apiUrl('/api/ws-ticket'), {
       method: 'POST',
-      headers: { authorization: 'Bearer ' + token, 'x-dsh-remote-client': 'web' }
+      headers: { authorization: 'Bearer ' + token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() }
     })
     if (!res.ok) throw new Error('ws ticket HTTP ' + res.status)
     const data = await res.json()
@@ -558,7 +567,7 @@ async function getWsTicket() {
 async function rpc(method, payload = {}, timeoutMs = 45000) {
   const opts = {
     method: 'POST',
-    headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' },
+    headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() },
     body: JSON.stringify({ type: 'client-request', rpcId: uuid(), method, payload })
   }
   if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function') {
@@ -575,7 +584,7 @@ async function rpc(method, payload = {}, timeoutMs = 45000) {
 async function respond(rpcId, value) {
   const opts = {
     method: 'POST',
-    headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' },
+    headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() },
     body: JSON.stringify({ type: 'client-response', rpcId, result: { ok: true, value } })
   }
   if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function') {
@@ -1011,6 +1020,7 @@ function openStream(kind, handler, refreshOnOpen, isRestore, ticket = null) {
     updateConn()
     if (kind === 'mux') { state.approvals = []; state.questions = []; renderNotifStack() }
     if (refreshOnOpen) refreshSessions()
+    if (allStreamsOpen()) resyncAfterStreamOpen()
   }
   ws.onmessage = (msg) => {
     if (!streamIsCurrent(kind, ws, generation)) return
@@ -1094,7 +1104,7 @@ async function pollKind(kind) {
   let res
   try {
     const signal = typeof AbortSignal?.timeout === 'function' ? AbortSignal.timeout(5000) : undefined
-    const headers = { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' }
+    const headers = { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() }
     res = signal ? await fetch(apiUrl(`/api/events.poll?kind=${kind}&since=${since}`), { signal, headers }) : await fetch(apiUrl(`/api/events.poll?kind=${kind}&since=${since}`), { headers })
   } catch { return }
   if (res.status === 401) { toast(t('ds.toastAuth'), 'err'); return }
@@ -1107,6 +1117,7 @@ async function pollKind(kind) {
     state.pollSeq[kind] = 0
     if (kind === 'mux') renderNotifStack()
     refreshSessions()
+    if (state.current) void resyncCurrentSession()
   }
   for (const item of data.events) {
     if (item.seq > (state.pollSeq[kind] || 0)) {
@@ -1164,6 +1175,7 @@ function onMuxFrame(full) {
     return
   }
   if (f.type === 'question/resolved') { state.questions = state.questions.filter(q => q.rpcId !== f.questionRpcId); renderNotifStack(); return }
+  if (f.type === 'session/queue') { state.queues[f.sessionId] = f.items || []; renderQueue(); return }
   if (f.type === 'session/projection') { applyProjection(f.sessionId, f.key, f.value, f.seq); return }
   if (f.type === 'stream/error') toast(f.error?.message || 'stream error', 'err')
 }
@@ -1173,23 +1185,70 @@ 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(); renderOverviewDesktop() }
+    if (s) { s.running = f.running; if (state.current === f.sessionId) { renderSessions(); renderQueue(); updateComposerStatus() } renderOverviewDesktop() }
+  }
+}
+function hydrateSessionProjections(sessionId, projections) {
+  const s = state.byId.get(sessionId)
+  if (!s || !projections || typeof projections !== 'object') return
+  const incomingSeq = Number(projections.asOfSeq) || 0
+  const current = s.projections || { asOfSeq: 0, values: {} }
+  const currentSeq = Number(current.asOfSeq) || 0
+  if (incomingSeq < currentSeq) return
+  s.projections = {
+    asOfSeq: Math.max(currentSeq, incomingSeq),
+    values: { ...(current.values || {}), ...(projections.values || {}) }
+  }
+}
+function applyPendingProjections() {
+  for (const [sessionId, projections] of state.pendingProjections) {
+    if (!state.byId.has(sessionId)) continue
+    hydrateSessionProjections(sessionId, projections)
+    state.pendingProjections.delete(sessionId)
   }
 }
 function applyProjection(sessionId, key, value, seq) {
   const s = state.byId.get(sessionId)
-  if (s) {
-    s.projections = s.projections || { asOfSeq: 0, values: {} }
-    s.projections.values = s.projections.values || {}
-    s.projections.values[key] = value
-    s.projections.asOfSeq = Math.max(s.projections.asOfSeq || 0, seq || 0)
+  if (!s) {
+    const pending = state.pendingProjections.get(sessionId) || { asOfSeq: 0, values: {} }
+    pending.values[key] = value
+    pending.asOfSeq = Math.max(pending.asOfSeq || 0, seq || 0)
+    state.pendingProjections.set(sessionId, pending)
+    return
   }
+  const currentSeq = Number(s.projections?.asOfSeq) || 0
+  if (seq && seq < currentSeq) return
+  s.projections = s.projections || { asOfSeq: 0, values: {} }
+  s.projections.values = s.projections.values || {}
+  s.projections.values[key] = value
+  s.projections.asOfSeq = Math.max(currentSeq, seq || 0)
   if (state.current === sessionId) {
     renderSessions()
     if (['goal', 'todos'].includes(key)) renderSessionCards()
   }
   if (['title', 'goal', 'todos', 'plan', 'sessionListMetadata'].includes(key)) refreshSessions()
 }
+function setSessionRecovery(status, error = '') {
+  state.sessionRecovery = { status, error: String(error || '') }
+  updateSessionActions()
+}
+function recoveryLabel() {
+  const status = state.sessionRecovery.status
+  if (status === 'loading' || status === 'resuming') return t('ds.sessionRecovering')
+  if (status === 'error') return t('ds.sessionRecoveryFailed')
+  return ''
+}
+function resyncCurrentSession() {
+  if (!state.current) return Promise.resolve()
+  return loadHistory().then(() => {
+    if (state.current) { renderSessionCards(); updateComposerStatus(); updateSessionActions() }
+  })
+}
+function resyncAfterStreamOpen() {
+  if (!state.current || Date.now() - state.lastStreamResyncAt < 1200) return
+  state.lastStreamResyncAt = Date.now()
+  void refreshSessions().then(() => resyncCurrentSession())
+}
 function proj(s, key, d) { return s?.projections?.values?.[key] ?? d }
 function titleOf(s) { return proj(s, 'title') || (s?.sessionId ? short(s.sessionId) : t('ds.sessions')) }
 function isTopLevelSession(session) {
@@ -1206,6 +1265,15 @@ function goalOf(s) {
   return p.goal && typeof p.goal === 'object' ? p.goal : p
 }
 function onSessionEvent(sessionId, event) {
+  if (event?.type === 'turn/start' || event?.type === 'turn/end') {
+    noteSessionTurnTime(sessionId, event)
+    renderSessions()
+  }
+  const session = state.byId.get(sessionId)
+  if (event?.type === 'agent/status' && session) {
+    session.running = !!event.data?.running
+    if (state.current === sessionId) { renderQueue(); updateComposerStatus() }
+  }
   if (state.current === sessionId && event) {
     const h = state.history
     const reasoningChanged = applyReasoningStreamEvent(event)
@@ -1214,7 +1282,7 @@ function onSessionEvent(sessionId, event) {
       return
     }
     const seq = event.seq
-    if (seq != null && !h.seqs.has(seq) && shouldShowEvent(event.type)) {
+    if (seq != null && !h.seqs.has(seq) && shouldShowEvent(event.type, event)) {
       h.seqs.add(seq)
       h.visible.push({ seq, event })
       h.visible.sort((a, b) => a.seq - b.seq)
@@ -1230,6 +1298,7 @@ async function refreshSessions() {
   if (!v) { renderSessions(); renderOverviewDesktop(); return }
   state.sessions = v.items || []
   state.byId = new Map(state.sessions.map(s => [s.sessionId, s]))
+  applyPendingProjections()
   renderSessions()
   scheduleWorkbenchRefresh()
   renderOverviewDesktop()
@@ -1239,6 +1308,23 @@ function sessionWorkspaceLabel(s) {
   const cwd = sessionCwd(s)
   return cwd || t('ds.workspaceUnknown')
 }
+function sessionSortTime(s) {
+  return Math.max(Number(state.sessionTurnTimes[s?.sessionId]) || 0, Number(s?.updatedAt) || 0, Number(s?.createdAt) || 0)
+}
+function sessionWorkspaceOrderKey(s) {
+  return 'path:' + (sessionWorkspaceLabel(s) || 'workspace-unknown')
+}
+function commitWorkspaceGroupOrder(order) {
+  saveWorkbenchOrder(value => { value.workspaceIds = order.map(String) })
+  renderSessions()
+  toast(t('ds.wbOrderSaved'), 'ok')
+}
+function noteSessionTurnTime(sessionId, eventOrTime) {
+  const raw = typeof eventOrTime === 'object' ? eventOrTime?.time : eventOrTime
+  const time = Number(raw) > 0 ? Number(raw) : Date.now()
+  if (!sessionId || !Number.isFinite(time)) return
+  state.sessionTurnTimes[sessionId] = Math.max(Number(state.sessionTurnTimes[sessionId]) || 0, time)
+}
 function workspaceDisplayName(label) {
   const value = String(label || '').trim()
   if (!value || value === t('ds.workspaceUnknown')) return value || t('ds.workspaceUnknown')
@@ -1253,10 +1339,10 @@ function sortedSessions() {
       const aw = sessionCwd(a) || '\uffff'
       const bw = sessionCwd(b) || '\uffff'
       const byWorkspace = aw.localeCompare(bw, undefined, { numeric: true, sensitivity: 'base' })
-      return byWorkspace || ((b.updatedAt || 0) - (a.updatedAt || 0))
+      return byWorkspace || (sessionSortTime(b) - sessionSortTime(a))
     })
   }
-  return items.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
+  return items.sort((a, b) => sessionSortTime(b) - sessionSortTime(a))
 }
 function renderSessions() {
   const allItems = sortedSessions()
@@ -1272,30 +1358,54 @@ function renderSessions() {
   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 renderSession = s => {
       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)}">
+      return `<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>`)
+        <span class="ds-session-meta"><span class="ds-session-dot ${s.running ? 'running' : ''}"></span>${fmtTime(sessionSortTime(s))}</span>
+      </button>`
+  }
+  const renderItems = (items) => {
+    if (state.sessionSort !== 'workspace') return items.map(renderSession).join('')
+    const groups = []
+    const byKey = new Map()
+    for (const session of items) {
+      const key = sessionWorkspaceOrderKey(session)
+      let group = byKey.get(key)
+      if (!group) {
+        group = { key, label: workspaceDisplayName(sessionWorkspaceLabel(session)), path: sessionWorkspaceLabel(session), items: [] }
+        byKey.set(key, group)
+        groups.push(group)
+      }
+      group.items.push(session)
     }
-    return rows.join('')
+    const { value } = workbenchOrderScopeValue()
+    return orderedItems(groups, value.workspaceIds, group => group.key).map(group => `<div class="ds-session-workspace-group" data-workspace-group="${esc(group.key)}" data-motion-key="${esc(group.key)}">
+      <div class="ds-session-group" data-reorder-handle title="${esc(group.path)}"><span class="ds-session-group-drag-handle" aria-hidden="true">⠿</span><span class="ds-session-group-icon" aria-hidden="true">⌂</span><span class="ds-session-group-name">${esc(group.label)}</span></div>
+      ${orderedWorkspaceSessions(group.key, group.items).map(renderSession).join('')}
+    </div>`).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
+  window.DshMotion?.list($('session-list'), '.ds-session-item')
+  window.DshMotion?.list($('mobile-session-list'), '.ds-session-item')
+  for (const list of [$('session-list'), $('mobile-session-list')].filter(Boolean)) {
+    window.DshMotion?.bindLongPressReorder(list, '.ds-session-workspace-group', {
+      handleSelector: '.ds-session-group',
+      onCommit: ({ order }) => commitWorkspaceGroupOrder(order)
+    })
+    window.DshMotion?.bindLongPressReorder(list, '.ds-session-item', {
+      groupSelector: '.ds-session-workspace-group',
+      handleSelector: '.ds-session-item',
+      onCommit: ({ item, order }) => commitWorkspaceSessionOrder(item.closest('[data-workspace-group]')?.dataset.workspaceGroup, order)
+    })
+  }
   $('session-list').classList.toggle('workspace-sorted', state.sessionSort === 'workspace')
   $('mobile-session-list').classList.toggle('workspace-sorted', state.sessionSort === 'workspace')
   const sort = $('session-sort')
@@ -1310,46 +1420,60 @@ function renderSessions() {
 
 async function openSession(id) {
   state.current = id
+  setSessionRecovery('loading')
   state.history = emptyDesktopHistory()
   state.models = { loaded: false, loading: false, groups: [], current: null, failures: [] }
   showView('view-chat')
   $('ds-title').textContent = titleOf(state.byId.get(id)) || t('ds.sessions')
+  updateSessionActions()
   $('history').innerHTML = `<div class="ds-empty">${t('ds.historyLoading')}</div>`
   renderSessions()
   renderSessionCards()
+  renderQueue()
+  updateComposerStatus()
   await loadHistory()
 }
 function closeSession() {
   state.current = null
+  setSessionRecovery('idle')
   state.history = emptyDesktopHistory()
   const cards = $('session-cards')
   if (cards) cards.innerHTML = ''
+  renderQueue()
+  updateComposerStatus()
+  updateSessionActions()
   showView('view-sessions')
 }
 async function loadHistory() {
   const id = state.current
   if (!id || state.history.loading) return
   state.history.loading = true
+  setSessionRecovery('loading')
   let v
   try { v = await rpc('session.history', { sessionId: id, maxMessages: 60 }) }
   catch (e) {
     state.history.loading = false
     if (e.message === 'AUTH') return
+    setSessionRecovery('error', e.message)
     $('history').innerHTML = `<div class="ds-empty">${e.message}</div>`
     return
   }
+  hydrateSessionProjections(id, v.projections)
   for (const entry of v.events || []) {
     const ev = entry?.event
     const seq = ev?.seq
+    if (ev?.type === 'turn/start' || ev?.type === 'turn/end') noteSessionTurnTime(id, ev)
     applyReasoningStreamEvent(ev)
     if (seq == null || state.history.seqs.has(seq)) continue
-    if (!shouldShowEvent(ev.type)) continue
+    if (!shouldShowEvent(ev.type, ev)) continue
     state.history.seqs.add(seq)
     state.history.visible.push({ seq, event: ev })
   }
   state.history.visible.sort((a, b) => a.seq - b.seq)
   state.history.hasMore = !!v.hasMore
   state.history.loading = false
+  setSessionRecovery('ready')
+  updateSessionActions()
   renderHistory()
 }
 
@@ -1360,7 +1484,25 @@ const INTERESTING_EVENTS = new Set([
   'todo/updated', 'plan/updated', 'question/asked', 'question/resolved',
   'approval/asked', 'approval/resolved', 'session/title', 'title'
 ])
-function shouldShowEvent(type) { return INTERESTING_EVENTS.has(type) }
+function messageSource(data) {
+  const source = data?.source ?? data?.message?.source
+  return source && typeof source === 'object' ? source : null
+}
+function isHumanUserMessage(event) {
+  if (event?.type !== 'user/message') return false
+  const source = messageSource(event.data || {})
+  // Older DSH events may not carry source metadata; keep those visible for compatibility.
+  return !source || source.kind === 'user'
+}
+function shouldShowEvent(type, event) {
+  if (!INTERESTING_EVENTS.has(type)) return false
+  if (type === 'user/message' && !isHumanUserMessage(event)) {
+    const data = event?.data || {}
+    const blocks = data.message?.content || data.content || []
+    return systemReminderText(blocks).length > 0
+  }
+  return true
+}
 function reasoningStreamKey(data, index) { return `${data?.turn ?? '?'}:${data?.step ?? '?'}:${index ?? '?'}` }
 function applyReasoningStreamEvent(event) {
   const h = state.history
@@ -1430,7 +1572,7 @@ function eventHtml(entry) {
   const ev = entry.event || {}
   const data = ev.data || {}
   const type = ev.type || 'event'
-  if (!shouldShowEvent(type)) return ''
+  if (!shouldShowEvent(type, ev)) return ''
   if (type === 'user/message' || type === 'assistant/message') {
     const msg = data.message || {}
     const role = data.role || msg.role || (type.startsWith('user') ? 'user' : 'assistant')
@@ -1440,6 +1582,7 @@ function eventHtml(entry) {
       const shown = sysText.length > 400 ? sysText.slice(0, 400) + '…' : sysText
       return `<details class="event ds-tool ds-event-detail"><summary>${esc(t('ds.eventSystemReminder'))}</summary><pre>${esc(shown)}</pre></details>`
     }
+    if (type === 'user/message' && !isHumanUserMessage(ev)) return ''
     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>`
   }
@@ -1500,13 +1643,24 @@ async function renderSessionCards() {
   const sub = await safeRpc('subagent.list', { parentSessionId: sessionId }, '')
   if (renderGeneration !== sessionCardsRenderGeneration || state.current !== sessionId) return
   if (sub?.entries?.length) {
+    const expanded = state.subagentExpandedSession === sessionId
+    const toggleLabel = expanded ? t('subagent.collapse') : t('subagent.expand')
     const rows = sub.entries.map(e => {
       if (e.kind === 'diagnostic') return `<div class="ds-card-row"><span class="ds-card-k">${t('subagent.diagnostic')}</span><span class="ds-card-v">${esc(e.reason)}</span></div>`
       const label = e.label || short(e.id)
       const running = e.activity === 'running'
       return `<div class="ds-card-row"><span class="ds-card-k">${running ? '▶ ' : ''}${esc(label)}</span><span class="ds-card-v">${esc(e.mode)} ${running ? t('subagent.running') : ''}${e.mode === 'continuable' && running ? ` <button class="ds-mini-btn" data-sub-interrupt="${esc(e.id)}">${t('subagent.interrupt')}</button>` : ''}</span></div>`
     }).join('')
-    box.insertAdjacentHTML('beforeend', `<div class="ds-card"><div class="ds-card-title">${t('subagent.title')}</div>${rows}</div>`)
+    const subagentClosedIcon = 'M7 10l5 5 5-5'
+    const subagentOpenIcon = 'M7 14l5-5 5 5'
+    const subagentIcon = expanded ? subagentOpenIcon : subagentClosedIcon
+    box.insertAdjacentHTML('beforeend', `<div class="ds-card ds-subagent-card"><button type="button" class="ds-subagent-toggle" data-subagent-toggle aria-expanded="${expanded}" aria-label="${esc(toggleLabel)}" title="${esc(toggleLabel)}"><span class="ds-card-title">${esc(t('subagent.count', { n: sub.entries.length }))}</span><span class="ds-subagent-toggle-icon" aria-hidden="true"><morph-icon data-morph-state="${expanded ? 'open' : 'closed'}" data-morph-closed="${subagentClosedIcon}" data-morph-open="${subagentOpenIcon}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${subagentIcon}"/></svg></morph-icon></span></button><div class="ds-subagent-list${expanded ? '' : ' hidden'}">${rows}</div></div>`)
+    box.querySelector('[data-subagent-toggle]')?.addEventListener('click', () => {
+      const icon = box.querySelector('[data-subagent-toggle] morph-icon')
+      if (icon) icon.setAttribute('data-morph-state', expanded ? 'closed' : 'open')
+      state.subagentExpandedSession = expanded ? '' : sessionId
+      setTimeout(() => renderSessionCards(), 240)
+    })
     box.querySelectorAll('[data-sub-interrupt]').forEach(btn =>
       btn.addEventListener('click', () => interruptSubagent(btn.dataset.subInterrupt)))
   }
@@ -1569,7 +1723,7 @@ async function runSlashCommand(text) {
       : undefined
     const res = await fetch(apiUrl('/remote/api/command'), {
       method: 'POST',
-      headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' },
+      headers: { 'content-type': 'application/json', authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() },
       body: JSON.stringify({ sessionId: state.current, line: clean }),
       ...(signal ? { signal } : {})
     })
@@ -1590,12 +1744,112 @@ async function sendMessage() {
   if (!text || !state.current) return
   if (await runSlashCommand(text)) { input.value = ''; return }
   input.value = ''
+  setSessionRecovery('resuming')
   const v = await safeRpc('session.prompt', {
     sessionId: state.current,
     mode: 'queue',
     content: [{ type: 'text', text }]
   }, '')
-  if (v) toast(t('ds.toastSent'), 'ok')
+  if (v) { setSessionRecovery('ready'); noteSessionTurnTime(state.current, Date.now()); renderSessions(); toast(t('ds.toastSent'), 'ok') }
+  else setSessionRecovery('error')
+}
+
+async function cancelSession() {
+  if (!state.current) return
+  if (!confirm(t('ds.sessionStopConfirm'))) return
+  const v = await safeRpc('session.cancel', { sessionId: state.current }, t('ds.sessionStopFailed'))
+  if (v?.accepted) { setSessionRecovery('ready'); toast(t('ds.sessionStopRequested'), 'ok') }
+}
+
+let renamePendingSessionId = null
+function renameSession(sessionId = state.current) {
+  const session = state.byId.get(sessionId)
+  if (!session) return
+  renamePendingSessionId = sessionId
+  $('rename-session-input').value = titleOf(session)
+  $('modal-rename').classList.remove('hidden')
+  setTimeout(() => { $('rename-session-input').focus(); $('rename-session-input').select() }, 40)
+}
+function closeRenameSession() {
+  renamePendingSessionId = null
+  $('modal-rename').classList.add('hidden')
+}
+async function confirmRenameSession() {
+  const sessionId = renamePendingSessionId
+  if (!sessionId) return
+  const title = $('rename-session-input').value.trim()
+  if (!title) return toast(t('ds.sessionRenameEmpty'), 'err')
+  const button = $('rename-confirm')
+  button.disabled = true
+  setSessionRecovery('resuming')
+  try {
+    const value = await safeRpc('session.rename', { sessionId, title }, t('ds.sessionRenameFailed'))
+    if (value == null) { setSessionRecovery('error'); return }
+    if (value.title) applyProjection(sessionId, 'title', value.title, value.seq)
+    closeRenameSession()
+    setSessionRecovery('ready')
+    toast(t('ds.sessionRenamed'), 'ok')
+    await refreshSessions()
+  } finally {
+    button.disabled = false
+  }
+}
+
+async function archiveCurrentSession() {
+  const sessionId = state.current
+  if (!sessionId || !confirm(t('ds.sessionArchiveConfirm'))) return
+  const value = await safeRpc('workspace.archiveSession', { sessionId }, t('ds.toastOpFailed'))
+  if (!value) return
+  if (Array.isArray(value.archivedSessionIds)) state.archivedIds = value.archivedSessionIds
+  toast(t('ds.sessionArchived'), 'ok')
+  closeSession()
+  await refreshSessions()
+}
+
+function updateComposerStatus() {
+  const status = $('composer-status')
+  if (!status) return
+  status.classList.toggle('hidden', !state.byId.get(state.current)?.running)
+  updateSessionActions()
+}
+function queuePreview(item) {
+  const blocks = item?.message?.content || item?.content || []
+  const text = Array.isArray(blocks)
+    ? blocks.filter(block => block?.type === 'text').map(block => String(block.text || '')).join(' ').trim()
+    : ''
+  return text || (Array.isArray(blocks) && blocks.some(block => block?.type === 'image') ? t('queue.image') : '…')
+}
+async function steerQueueItem(itemId) {
+  const sessionId = state.current
+  const key = `${sessionId}:${itemId}`
+  const s = state.byId.get(sessionId)
+  if (!sessionId || !s?.running || state.queueSteering[key]) return
+  state.queueSteering[key] = true
+  renderQueue()
+  try {
+    const v = await safeRpc('session.updateQueue', { sessionId, itemId, action: { kind: 'steer' } }, t('queue.steerFailed', { msg: '' }).replace(/：$/, '').replace(/: $/, ''))
+    if (v?.accepted) toast(t('queue.steerSubmitted'), 'ok')
+  } finally {
+    delete state.queueSteering[key]
+    renderQueue()
+  }
+}
+function renderQueue() {
+  const box = $('queue-dock')
+  if (!box) return
+  const sessionId = state.current
+  const s = state.byId.get(sessionId)
+  const items = (state.queues[sessionId] || []).filter(item => item?.placement === 'queued')
+  box.classList.toggle('hidden', !items.length)
+  box.innerHTML = items.length ? `<div class="ds-queue-dock-head"><span>⌁</span><span>${esc(t('queue.title'))} · ${items.length}</span></div><div class="ds-queue-dock-list">${items.map(item => {
+    const key = `${sessionId}:${item.id}`
+    const busy = !!state.queueSteering[key]
+    return `<div class="ds-queue-dock-item"><span class="ds-queue-dock-preview" title="${esc(queuePreview(item))}">${esc(queuePreview(item))}</span><button type="button" class="ds-mini-btn ds-queue-dock-action" data-queue-steer="${esc(item.id)}" title="${esc(s?.running ? t('queue.steer') : t('queue.steerUnavailable'))}" ${s?.running && !busy ? '' : 'disabled'}>${busy ? '…' : esc(t('queue.steer'))}</button></div>`
+  }).join('')}</div>` : ''
+  box.querySelectorAll('[data-queue-steer]').forEach(button => {
+    button.addEventListener('click', () => steerQueueItem(button.dataset.queueSteer))
+  })
+  updateComposerStatus()
 }
 
 /* ---------------- 审批/提问通知卡片栈 ---------------- */
@@ -1709,7 +1963,7 @@ function fsApiUrl(sub, params = {}) {
   return u.href
 }
 function fsHeaders() {
-  return { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' }
+  return { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() }
 }
 function fsParent(p) {
   if (!p) return null
@@ -1837,7 +2091,7 @@ function wbFsParent(p) {
   return raw.slice(0, index)
 }
 async function wbGateway(method, pathname, body) {
-  const options = { method, headers: { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web' } }
+  const options = { method, headers: { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() } }
   if (body !== undefined) {
     options.headers['content-type'] = 'application/json'
     options.body = JSON.stringify(body)
@@ -1848,6 +2102,64 @@ async function wbGateway(method, pathname, body) {
   if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status))
   return data
 }
+const WORKBENCH_ORDER_CACHE_KEY = 'workbenchOrderV1'
+function workbenchOrderScope() { return String(state.server || location.origin || 'default') }
+function workbenchOrderStore() {
+  let value = null
+  try { value = JSON.parse(LS.get(WORKBENCH_ORDER_CACHE_KEY, '{}')) } catch {}
+  if (!value || typeof value !== 'object') value = {}
+  if (!value.scopes || typeof value.scopes !== 'object') value.scopes = {}
+  return value
+}
+function workbenchOrderScopeValue() {
+  const store = workbenchOrderStore()
+  const key = workbenchOrderScope()
+  if (!store.scopes[key] || typeof store.scopes[key] !== 'object') store.scopes[key] = {}
+  return { store, value: store.scopes[key] }
+}
+function orderedItems(items, ids, getId) {
+  const source = Array.isArray(items) ? items : []
+  const byId = new Map(source.map(item => [String(getId(item)), item]))
+  const result = []
+  const used = new Set()
+  for (const id of Array.isArray(ids) ? ids : []) {
+    const key = String(id)
+    const item = byId.get(key)
+    if (item && !used.has(key)) { result.push(item); used.add(key) }
+  }
+  for (const item of source) {
+    const key = String(getId(item))
+    if (!used.has(key)) { result.push(item); used.add(key) }
+  }
+  return result
+}
+function orderedWorkspaceItems(items) {
+  const { value } = workbenchOrderScopeValue()
+  return orderedItems(items, value.workspaceIds, item => item.workspaceId)
+}
+function orderedWorkspaceSessions(workspaceId, items) {
+  const { value } = workbenchOrderScopeValue()
+  return orderedItems(items, value.sessionIds?.[String(workspaceId)], item => item.sessionId)
+}
+function saveWorkbenchOrder(mutator) {
+  const { store, value } = workbenchOrderScopeValue()
+  mutator(value)
+  LS.set(WORKBENCH_ORDER_CACHE_KEY, JSON.stringify(store))
+}
+function commitWorkspaceOrder(order) {
+  saveWorkbenchOrder(value => { value.workspaceIds = order.map(String) })
+  renderWorkbench()
+  toast(t('ds.wbOrderSaved'), 'ok')
+}
+function commitWorkspaceSessionOrder(workspaceId, order) {
+  if (!workspaceId) return
+  saveWorkbenchOrder(value => {
+    value.sessionIds ||= {}
+    value.sessionIds[String(workspaceId)] = order.map(String)
+  })
+  renderWorkbench()
+  toast(t('ds.wbOrderSaved'), 'ok')
+}
 async function refreshWorkbench({ silent = false } = {}) {
   if (!state.token) { renderWorkbench(); return }
   let wb = null
@@ -1895,9 +2207,9 @@ async function refreshWorkbench({ silent = false } = {}) {
       }
     }
   } catch {}
-  state.wb.projects = items
+  state.wb.projects = orderedWorkspaceItems(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 }))
+    .sort((a, b) => String(a.title || wbBaseName(a.path)).localeCompare(String(b.title || wbBaseName(b.path)), 'zh-CN', { numeric: true })))
   renderWorkbench()
   renderSessions()
 }
@@ -1921,27 +2233,41 @@ function renderWorkbench() {
   const panel = $('wb-panel')
   panel.classList.toggle('hidden', !state.wb.expanded)
   if (!state.wb.expanded) return
-  const projects = state.wb.projects || []
+  const projects = orderedWorkspaceItems(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(isTopLevelSession).filter(s => !archivedSet.has(s.sessionId)).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
+    const sessions = orderedWorkspaceSessions(id, (w.sessionIds || []).map(sid => state.byId.get(sid)).filter(isTopLevelSession).filter(s => !archivedSet.has(s.sessionId)).sort((a, b) => sessionSortTime(b) - sessionSortTime(a)))
     const open = state.wb.open === id
-    return `<div class="ds-wb-project ${open ? 'open' : ''}">
+    return `<div class="ds-wb-project ${open ? 'open' : ''}" data-wb-project="${esc(id)}" data-motion-key="${esc(id)}">
       <button type="button" class="ds-wb-project-head" data-wb-head="${esc(id)}">
+        <span class="ds-wb-drag-handle" data-reorder-handle aria-hidden="true">⠿</span>
         <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>`}
+        ${sessions.length ? sessions.map(s => `<button type="button" class="ds-wb-session ${state.current === s.sessionId ? 'current' : ''}" data-wb-session="${esc(s.sessionId)}" data-motion-key="${esc(s.sessionId)}"><span class="ds-wb-session-drag-handle" data-reorder-handle aria-hidden="true">⠿</span><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
+  if (window.DshMotion?.relayout) {
+    window.DshMotion.relayout(panel, '.ds-wb-project', () => { panel.innerHTML = html })
+  } else panel.innerHTML = html
+  window.DshMotion?.list(panel, '.ds-wb-session')
+  window.DshMotion?.bindLongPressReorder(panel, '.ds-wb-project', {
+    handleSelector: '.ds-wb-project-head',
+    excludeSelector: '[data-wb-new]',
+    onCommit: ({ order }) => commitWorkspaceOrder(order)
+  })
+  window.DshMotion?.bindLongPressReorder(panel, '.ds-wb-session', {
+    groupSelector: '.ds-wb-project',
+    handleSelector: '.ds-wb-session',
+    onCommit: ({ item, order }) => commitWorkspaceSessionOrder(item.closest('[data-wb-project]')?.dataset.wbProject, order)
+  })
   panel.querySelectorAll('[data-wb-head]').forEach(button => button.addEventListener('click', () => {
     state.wb.open = state.wb.open === button.dataset.wbHead ? null : button.dataset.wbHead
     renderWorkbench()
@@ -2052,7 +2378,7 @@ async function loadStats() {
     return
   }
   try {
-    const res = await fetch(apiUrl('/stats/summary?days=7'), { headers: { authorization: 'Bearer ' + state.token } })
+    const res = await fetch(apiUrl('/stats/summary?days=7'), { headers: { authorization: 'Bearer ' + state.token, 'x-dsh-remote-client': 'web', ...clientIdHeaders() } })
     if (!res.ok) throw new Error('HTTP ' + res.status)
     const json = await res.json()
     renderStats(json.days || [])
@@ -2150,7 +2476,7 @@ function renderOverviewDesktop() {
 
   const topSessions = topLevelSessions()
   const running = topSessions.filter(s => s.running).length
-  const sessions = topSessions.sort((a, b) => Number(b.running) - Number(a.running) || (new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0))).slice(0, 6)
+  const sessions = topSessions.sort((a, b) => Number(b.running) - Number(a.running) || (sessionSortTime(b) - sessionSortTime(a))).slice(0, 6)
   const primary = $('ds-overview-primary-action')
   if (primary) {
     let action = 'new'
@@ -2180,7 +2506,7 @@ function renderOverviewDesktop() {
   $('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>
+    <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(sessionSortTime(s)))}</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)))
 }
@@ -2189,12 +2515,28 @@ function showView(id) {
   state.view = 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))
+  window.DshMotion?.view($(id))
   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()
+  updateSessionActions()
+}
+
+function updateSessionActions() {
+  const active = state.view === 'view-chat' && !!state.current
+  $('btn-rename-session')?.classList.toggle('hidden', !active)
+  $('btn-archive-session')?.classList.toggle('hidden', !active || state.archivedIds.includes(state.current))
+  $('ds-session-status')?.classList.toggle('hidden', !active || !recoveryLabel())
+  if (active) {
+    const s = state.byId.get(state.current)
+    $('ds-title').textContent = s ? titleOf(s) : t('ds.sessions')
+    $('ds-session-status').textContent = recoveryLabel()
+  }
+  const running = !!state.byId.get(state.current)?.running || (state.queues[state.current] || []).some(i => i.placement !== 'context')
+  $('btn-cancel')?.classList.toggle('hidden', !active || !running)
 }
 
 const SETTINGS_GROUPS = ['general', 'servers', 'theme', 'about']
@@ -2328,6 +2670,13 @@ function bindUi() {
   $('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)
+  $('btn-cancel').addEventListener('click', cancelSession)
+  $('btn-rename-session').addEventListener('click', () => renameSession())
+  $('btn-archive-session').addEventListener('click', archiveCurrentSession)
+  $('rename-cancel').addEventListener('click', closeRenameSession)
+  $('rename-confirm').addEventListener('click', confirmRenameSession)
+  $('rename-session-input').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.isComposing) confirmRenameSession() })
+  $('modal-rename').addEventListener('click', e => { if (e.target === $('modal-rename')) closeRenameSession() })
   $('composer').addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendMessage() }
   })