dsh-monkeyai-sessions 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-monkeyai-sessions",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "在 DeepSeek Harness 中读取和继续 MonkeyAI 会话：查看完整对话历史、下发新指令，无缝接续之前在 MonkeyAI 客户端上的工作",
   "type": "module",
   "license": "MIT",

package/src/client/index.js

@@ -28,12 +28,19 @@ const t = {
 }
 
 const style = {
-  page: { display: 'grid', gap: 12, maxWidth: 1080, margin: '0 auto', padding: '16px 18px 24px', color: t.text, height: '100%', minHeight: 0, overflowY: 'auto', boxSizing: 'border-box', alignContent: 'start', fontSize: 13, lineHeight: 1.5 },
+  page: { display: 'grid', gap: 14, maxWidth: 1320, margin: '0 auto', padding: '18px 20px 24px', color: t.text, background: '#f7f8fb', height: '100%', minHeight: 0, overflowY: 'auto', boxSizing: 'border-box', alignContent: 'start', fontSize: 13, lineHeight: 1.5 },
   header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingBottom: 2 },
-  title: { margin: 0, fontSize: 15, fontWeight: 650, letterSpacing: '-0.01em', color: t.text },
+  title: { margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: '-0.025em', color: '#182230' },
+  eyebrow: { margin: 0, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', color: t.text3, textTransform: 'uppercase' },
   subtitle: { margin: 0, fontSize: 12, color: t.text3 },
   sectionTitle: { margin: 0, fontSize: 12, fontWeight: 650, color: t.text2, textTransform: 'uppercase', letterSpacing: '0.04em' },
-  card: { display: 'grid', gap: 10, padding: 14, border: `1px solid ${t.border}`, borderRadius: t.radiusLg, background: t.surface },
+  card: { display: 'grid', gap: 10, padding: 14, border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: '0 2px 8px rgba(16,24,40,0.035)' },
+  toolbarCard: { display: 'grid', gap: 10, padding: '13px 15px', border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: '0 2px 8px rgba(16,24,40,0.035)' },
+  workspace: { display: 'grid', gridTemplateColumns: 'minmax(248px, 292px) minmax(0, 1fr)', gap: 12, minWidth: 0, alignItems: 'stretch' },
+  sessionSidebar: { display: 'grid', gridTemplateRows: 'auto minmax(0, 1fr) auto', gap: 10, minWidth: 0, padding: 12, border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: '0 2px 8px rgba(16,24,40,0.035)' },
+  sessionList: { display: 'grid', gridTemplateColumns: '1fr', alignContent: 'start', gap: 6, minHeight: 0, overflowY: 'auto', padding: '1px 3px 2px 1px' },
+  thread: { display: 'grid', gridTemplateRows: 'auto minmax(0, 1fr) auto', gap: 10, minWidth: 0, height: 'min(70vh, 720px)', minHeight: 440, overflow: 'hidden', padding: 12 },
+  emptyThread: { display: 'grid', placeContent: 'center', justifyItems: 'center', gap: 9, minWidth: 0, minHeight: 'min(70vh, 720px)', padding: 28, border: `1px dashed ${t.border2}`, borderRadius: 12, background: 'linear-gradient(145deg, #ffffff 0%, #f8faff 100%)', textAlign: 'center' },
   row: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
   label: { display: 'grid', gap: 4, flex: 1, minWidth: 180, fontSize: 12, fontWeight: 600, color: t.text2 },
   input: { width: '100%', boxSizing: 'border-box', padding: '7px 10px', borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: 'none', fontSize: 13, transition: 'border-color .15s, box-shadow .15s' },
@@ -52,13 +59,13 @@ const style = {
   sessionTitle: { fontSize: 13, fontWeight: 650, lineHeight: 1.35, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
   sessionMeta: { fontSize: 11.5, color: t.text3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
   chip: { display: 'inline-flex', alignItems: 'center', gap: 5, padding: '2px 8px', borderRadius: 999, border: `1px solid ${t.border}`, background: t.surfaceAlt, fontSize: 11.5 },
-  events: { display: 'flex', flexDirection: 'column', gap: 8, height: '56vh', minHeight: 200, overflowY: 'auto', padding: '4px 6px 4px 2px' },
+  events: { display: 'flex', flexDirection: 'column', gap: 10, height: 'auto', minHeight: 0, overflowY: 'auto', padding: '6px 8px 8px 4px', overscrollBehavior: 'contain' },
   event: { padding: '8px 11px', borderRadius: t.radius, background: t.surfaceAlt, border: `1px solid ${t.border}`, overflowWrap: 'anywhere', color: t.text },
   bubbleWrap: { display: 'flex', gap: 8, alignItems: 'flex-start', width: '100%' },
   bubbleWrapUser: { display: 'flex', gap: 8, alignItems: 'flex-start', justifyContent: 'flex-end', width: '100%' },
   avatar: { width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: '#ffffff', flexShrink: 0, marginTop: 2 },
-  bubble: { maxWidth: '88%', minWidth: 0, flex: '0 1 auto', width: 'fit-content', borderRadius: t.radiusLg, padding: '8px 13px', background: t.surfaceAlt, border: `1px solid ${t.border}`, lineHeight: 1.55, fontSize: 13 },
-  bubbleUser: { maxWidth: '88%', minWidth: 0, flex: '0 1 auto', width: 'fit-content', borderRadius: t.radiusLg, padding: '8px 13px', background: t.accent, color: '#ffffff', lineHeight: 1.55, fontSize: 13 },
+  bubble: { maxWidth: '88%', minWidth: 0, flex: '0 1 auto', width: 'fit-content', borderRadius: 12, padding: '9px 13px', background: t.surface, border: `1px solid ${t.border}`, boxShadow: '0 1px 2px rgba(16,24,40,0.04)', lineHeight: 1.6, fontSize: 13 },
+  bubbleUser: { maxWidth: '88%', minWidth: 0, flex: '0 1 auto', width: 'fit-content', borderRadius: 12, padding: '9px 13px', background: '#315fe8', color: '#ffffff', boxShadow: '0 2px 5px rgba(49,95,232,0.18)', lineHeight: 1.6, fontSize: 13 },
   thought: { maxWidth: '88%', borderRadius: t.radiusLg, padding: '7px 11px', background: '#faf7fd', border: `1px solid #e8ddf5`, lineHeight: 1.5, fontSize: 12.5, color: '#5b4a72' },
   thoughtSummary: { cursor: 'pointer', color: '#6b4fa0', fontWeight: 650, fontSize: 10.5, letterSpacing: '0.05em', textTransform: 'uppercase', userSelect: 'none' },
   approval: { padding: '11px 13px', borderRadius: t.radiusLg, border: `1px solid #f0d98c`, background: '#fffbeb', display: 'grid', gap: 8 },
@@ -82,6 +89,36 @@ const PANEL_CSS = `
 .mai-panel [data-events]::-webkit-scrollbar-thumb:hover { background: #b8c2cf; }
 .mai-panel .mai-card-hover { transition: border-color .15s, background .15s; }
 .mai-panel .mai-card-hover:not(:disabled):hover { border-color: #b9cdf3 !important; background: #f7faff !important; }
+.mai-panel .mai-toolbar { position: relative; overflow: hidden; }
+.mai-panel .mai-toolbar::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #3568e8 0%, #8baaf4 46%, #e7edfc 100%); }
+.mai-panel .mai-workspace { display: grid; grid-template-columns: minmax(248px, 292px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: stretch; }
+.mai-panel .mai-session-sidebar { min-height: min(70vh, 720px); }
+.mai-panel .mai-session-list { scrollbar-gutter: stable; }
+.mai-panel .mai-session-card { position: relative; }
+.mai-panel .mai-session-card[aria-current='true']::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #3568e8; }
+.mai-panel .mai-thread { height: min(70vh, 720px); min-height: 440px; }
+.mai-panel .mai-thread-events { height: auto !important; min-height: 0 !important; }
+.mai-panel .mai-empty-thread { min-height: min(70vh, 720px); }
+.mai-panel .mai-empty-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: #edf2ff; color: #315fe8; box-shadow: inset 0 0 0 1px #dce6ff; }
+.mai-panel .mai-session-meta { overflow-wrap: anywhere; }
+@media (max-width: 900px) {
+  .mai-panel .mai-workspace { grid-template-columns: minmax(0, 1fr); }
+  .mai-panel .mai-session-sidebar { min-height: 0; grid-template-rows: auto minmax(0, auto) auto; }
+  .mai-panel .mai-session-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: 235px; }
+  .mai-panel .mai-thread { height: 68vh; min-height: 390px; }
+  .mai-panel .mai-empty-thread { min-height: 330px; }
+}
+@media (max-width: 560px) {
+  .mai-panel .mai-page-title { font-size: 16px !important; }
+  .mai-panel .mai-toolbar-controls { align-items: stretch; }
+  .mai-panel .mai-toolbar-controls select { flex-basis: 100% !important; }
+  .mai-panel .mai-session-list { grid-template-columns: 1fr !important; max-height: 210px; }
+  .mai-panel .mai-thread { height: 68vh; min-height: 360px; padding: 10px; }
+  .mai-panel .mai-thread-header { gap: 6px !important; }
+  .mai-panel .mai-thread-header strong { min-width: 100px; }
+  .mai-panel .mai-thread-header select { flex-basis: 100% !important; }
+  .mai-panel .mai-events { gap: 7px; }
+}
 @keyframes mai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 .mai-panel .mai-pulse { animation: mai-pulse 1.2s ease-in-out infinite; }
 .mai-panel .mai-md > div:first-child > :first-child { margin-top: 0; }
@@ -94,6 +131,20 @@ function errorText(error) {
   return typeof error?.message === 'string' ? error.message : typeof error === 'string' ? error : '远程操作失败'
 }
 
+function withTimeout(promise, timeoutMs, label) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`${label}超时，请重试`)), timeoutMs)
+    Promise.resolve(promise).then(
+      value => { clearTimeout(timer); resolve(value) },
+      error => { clearTimeout(timer); reject(error) },
+    )
+  })
+}
+
+function isRemoteStreamCarrierError(error) {
+  return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error))
+}
+
 // Lightweight inline markdown: fenced code blocks, `code`, **bold**,
 // headings and bullet lists. Everything else renders as plain text so
 // remote content can never inject markup.
@@ -299,6 +350,7 @@ function RemoteSessionPage({ api }) {
   const authWindowRef = useRef(null)
   const eventsRef = useRef(null)
   const prevScrollHeightRef = useRef(null)
+  const streamGenerationRef = useRef(0)
   const title = useMemo(() => {
     const runtime = runtimeSessions.find(item => item.id === sessionId)
     const summary = summarySessions.find(item => item.id === sessionId)
@@ -320,6 +372,7 @@ function RemoteSessionPage({ api }) {
     })
     return () => {
       active = false
+      streamGenerationRef.current += 1
       streamRef.current?.dispose()
       streamRef.current = null
     }
@@ -489,6 +542,7 @@ function RemoteSessionPage({ api }) {
     setError('')
     setLoading(true)
     try {
+      streamGenerationRef.current += 1
       const result = await unwrap(api.listDevices({ accountId, page: 1 }))
       setDevices(result.items)
       const first = result.items.length > 0 ? result.items[0].machineId : ''
@@ -513,25 +567,33 @@ function RemoteSessionPage({ api }) {
     setError('')
     setLoading(true)
     setSessionId('')
+    streamGenerationRef.current += 1
     streamRef.current?.dispose()
     streamRef.current = null
     setFrames([])
     setPendingRequests([])
-    const results = await Promise.allSettled([
-      unwrap(api.listSessions({ accountId, machineId: mid, page: 1, pageSize: 50 })),
-      unwrap(api.listRuntimeSessions({ accountId, machineId: mid })),
-    ])
-    const errors = []
-    if (results[0].status === 'fulfilled') setSummarySessions(results[0].value.items)
-    else errors.push(`会话摘要索引：${errorText(results[0].reason)}`)
-    if (results[1].status === 'fulfilled') setRuntimeSessions(results[1].value.sessions)
-    else errors.push(`ACP 会话列表：${errorText(results[1].reason)}`)
-    setStatus(errors.length === 0 ? '会话已刷新' : '部分会话来源不可用')
-    setError(errors.join('\n'))
-    setLoading(false)
+    try {
+      const results = await Promise.allSettled([
+        withTimeout(Promise.resolve().then(() => unwrap(api.listSessions({ accountId, machineId: mid, page: 1, pageSize: 50 }))), 50_000, '会话摘要读取'),
+        withTimeout(Promise.resolve().then(() => unwrap(api.listRuntimeSessions({ accountId, machineId: mid }))), 50_000, 'ACP 会话列表读取'),
+      ])
+      const errors = []
+      if (results[0].status === 'fulfilled') setSummarySessions(results[0].value.items)
+      else errors.push(`会话摘要索引：${errorText(results[0].reason)}`)
+      if (results[1].status === 'fulfilled') setRuntimeSessions(results[1].value.sessions)
+      else errors.push(`ACP 会话列表：${errorText(results[1].reason)}`)
+      setStatus(errors.length === 0 ? '会话已刷新' : '部分会话来源不可用')
+      setError(errors.join('\n'))
+    } catch (reason) {
+      setStatus('会话刷新失败')
+      setError(errorText(reason))
+    } finally {
+      setLoading(false)
+    }
   }
 
   async function openSession(session) {
+    const generation = ++streamGenerationRef.current
     streamRef.current?.dispose()
     streamRef.current = null
     historyLoadedRef.current = false
@@ -548,90 +610,113 @@ function RemoteSessionPage({ api }) {
     setVisibleCount(RECENT_LIMIT)
     setHistoryLoading(true)
     setStatus('正在连接远程会话')
-    let stream
-    try {
-      stream = api.followSession({ accountId, machineId, sessionId: session.id, cwd: session.cwd })
-      streamRef.current = stream
-      setStatus('远程会话已连接')
-      for await (const frame of stream) {
-        setFrames(current => [...current, frame])
-        if (frame.type === 'ready' && !historyLoadedRef.current) setStatus('正在回放会话历史')
-        if (frame.type === 'reconnecting') setStatus(frame.message || '正在重连远程 runtime')
-        if (frame.type === 'history_loaded') {
-          historyLoadedRef.current = true
-          setStatus('历史已加载')
-          setHistoryLoading(false)
-          setSessionStatus(current => current || 'idle')
-          if (frame.model) setCurrentModel(frame.model)
-        }
-        if (frame.type === 'history_incomplete') {
-          setStatus('历史不完整：' + (frame.message || '回放被中断'))
-          setHistoryLoading(false)
-        }
-        if (frame.type === 'model_switched') {
-          if (frame.data?.model) setCurrentModel(frame.data.model)
-          setSwitchingModel(false)
-          setStatus('模型已切换')
+    let retries = 0
+    while (streamGenerationRef.current === generation) {
+      let stream
+      try {
+        stream = api.followSession({ accountId, machineId, sessionId: session.id, cwd: session.cwd })
+        if (streamGenerationRef.current !== generation) {
+          stream.dispose()
+          return
         }
-        if (frame.type === 'model_switch_failed') {
-          setSwitchingModel(false)
-          setError(frame.message || '模型切换被拒绝')
-          setStatus('模型切换失败')
-        }
-        if (frame.type === 'session_missing') {
-          setError(frame.message || '该会话在所选设备上已不存在。')
-          setStatus('设备上找不到该会话')
-          setHistoryLoading(false)
-        }
-        if (frame.type === 'request') {
-          setPendingRequests(current => [...current.filter(item => item.requestId !== frame.requestId), frame])
-        }
-        if (frame.type === 'notification' && frame.method === '_monkeyai/session/state') {
-          const status = frame.data?.state?.status
-          if (typeof status === 'string' && SESSION_STATUS_LABEL[status]) {
-            setSessionStatus(status)
-            setTurnActive(status === 'running')
-            if (status !== 'running') setStopping(false)
+        streamRef.current = stream
+        setStatus(retries > 0 ? '远程会话已重新连接' : '远程会话已连接')
+        for await (const frame of stream) {
+          setFrames(current => [...current, frame])
+          if (frame.type === 'ready' && !historyLoadedRef.current) setStatus('正在回放会话历史')
+          if (frame.type === 'reconnecting') setStatus(frame.message || '正在重连远程 runtime')
+          if (frame.type === 'history_loaded') {
+            historyLoadedRef.current = true
+            setStatus('历史已加载')
+            setHistoryLoading(false)
+            setSessionStatus(current => current || 'idle')
+            if (frame.model) setCurrentModel(frame.model)
           }
-        }
-        if (frame.type === 'delivery') {
-          const accepted = Boolean(frame.data?.accepted)
-          setLastDelivery({ accepted, code: frame.data?.code, frame: frame.type })
-          setTurnActive(false)
-          setStopping(false)
-          if (accepted) {
-            const cancelled = frame.data?.result?.stopReason === 'cancelled'
-            setStatus(cancelled ? '回合已停止' : '回合已完成')
-          } else {
-            setPrompt(current => current === '' ? (lastDraftRef.current || '') : current)
-            setStatus('MonkeyAI 未接受该指令，草稿已保留')
-            if (frame.message) setError(frame.message)
+          if (frame.type === 'history_incomplete') {
+            setStatus('历史不完整：' + (frame.message || '回放被中断'))
+            setHistoryLoading(false)
+          }
+          if (frame.type === 'model_switched') {
+            if (frame.data?.model) setCurrentModel(frame.data.model)
+            setSwitchingModel(false)
+            setStatus('模型已切换')
+          }
+          if (frame.type === 'model_switch_failed') {
+            setSwitchingModel(false)
+            setError(frame.message || '模型切换失败')
+            setStatus('模型切换失败')
+          }
+          if (frame.type === 'session_missing') {
+            setError(frame.message || '该会话在所选设备上已不存在。')
+            setStatus('设备上找不到该会话')
+            setHistoryLoading(false)
+          }
+          if (frame.type === 'request') {
+            setPendingRequests(current => [...current.filter(item => item.requestId !== frame.requestId), frame])
+          }
+          if (frame.type === 'notification' && frame.method === '_monkeyai/session/state') {
+            const status = frame.data?.state?.status
+            if (typeof status === 'string' && SESSION_STATUS_LABEL[status]) {
+              setSessionStatus(status)
+              setTurnActive(status === 'running')
+              if (status !== 'running') setStopping(false)
+            }
+          }
+          if (frame.type === 'delivery') {
+            const accepted = Boolean(frame.data?.accepted)
+            setLastDelivery({ accepted, code: frame.data?.code, frame: frame.type })
+            setTurnActive(false)
+            setStopping(false)
+            if (accepted) {
+              const cancelled = frame.data?.result?.stopReason === 'cancelled'
+              setStatus(cancelled ? '回合已停止' : '回合已完成')
+            } else {
+              setPrompt(current => current === '' ? (lastDraftRef.current || '') : current)
+              setStatus('MonkeyAI 未接受该指令，草稿已保留')
+              if (frame.message) setError(frame.message)
+            }
+          }
+          if (frame.type === 'cancel_sent') {
+            setStopping(false)
+            setStatus('已请求停止，等待 runtime 取消')
           }
+          if (frame.type === 'response_sent') {
+            setPendingRequests(current => current.filter(item => item.requestId !== frame.requestId))
+          }
+          if (frame.type === 'response_error') {
+            setError(`远程回复被拒绝：${frame.code || '未知'}`)
+          }
+          if (frame.type === 'error') setError(frame.message || frame.code || '远程会话错误')
         }
-        if (frame.type === 'cancel_sent') {
+        if (streamGenerationRef.current !== generation || streamRef.current !== stream) return
+        streamRef.current = null
+        setStatus('远程会话已断开')
+        setHistoryLoading(false)
+        setTurnActive(false)
+        setStopping(false)
+        return
+      } catch (reason) {
+        if (streamGenerationRef.current !== generation || (stream && streamRef.current !== stream)) return
+        if (isRemoteStreamCarrierError(reason)) {
+          retries += 1
+          try { stream?.dispose() } catch {}
+          streamRef.current = null
+          setError('')
+          setTurnActive(false)
           setStopping(false)
-          setStatus('已请求停止，等待 runtime 取消')
-        }
-        if (frame.type === 'response_sent') {
-          setPendingRequests(current => current.filter(item => item.requestId !== frame.requestId))
-        }
-        if (frame.type === 'response_error') {
-          setError(`远程回复被拒绝：${frame.code || '未知'}`)
+          setStatus('远程连接中断，正在重连')
+          const delay = Math.min(1000 * (2 ** Math.min(retries - 1, 5)), 30_000)
+          await new Promise(resolve => setTimeout(resolve, delay))
+          continue
         }
-        if (frame.type === 'error') setError(frame.message || frame.code || '远程会话错误')
+        streamRef.current = null
+        setStatus('远程会话不可用')
+        setError(errorText(reason))
+        setHistoryLoading(false)
+        setTurnActive(false)
+        setStopping(false)
+        return
       }
-      if (streamRef.current !== stream) return
-      setStatus('远程会话已断开')
-      setHistoryLoading(false)
-      setTurnActive(false)
-      setStopping(false)
-    } catch (reason) {
-      if (stream && streamRef.current !== stream) return
-      setStatus('远程会话不可用')
-      setError(errorText(reason))
-      setHistoryLoading(false)
-      setTurnActive(false)
-      setStopping(false)
     }
   }
 
@@ -853,9 +938,11 @@ function RemoteSessionPage({ api }) {
   return h('main', { style: style.page, className: 'mai-panel' },
     h('style', { dangerouslySetInnerHTML: { __html: PANEL_CSS } }),
     h('header', { style: style.header },
-      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
-        h(MonkeyIcon, { size: 22 }),
-        h('h1', { style: style.title }, 'MonkeyAI 会话')),
+      h('div', { style: { display: 'grid', gap: 1 } },
+        h('p', { style: style.eyebrow }, '远程工作区'),
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+          h(MonkeyIcon, { size: 22 }),
+          h('h1', { style: style.title, className: 'mai-page-title' }, 'MonkeyAI 会话'))),
       h(StatusBadge, { status, live: isLive })),
     error ? h('div', { role: 'alert', style: style.error },
       h('span', { style: { flex: 1 } }, error),
@@ -939,11 +1026,13 @@ function RemoteSessionPage({ api }) {
             h('p', { style: { margin: 0, fontSize: 12, color: t.text3 } }, '浏览器授权需要回调能访问到本机 Host。手机上请改用上方账号登录。'))),
         accounts.length > 0 ? h('p', { style: { margin: 0, fontSize: 12, color: t.text3 } }, '已连接的账号会出现在设备列表上方的账号选择器中。') : null))
       : null,
-    currentAccount ? h('section', { style: style.card },
-      h('div', { style: style.row },
-        h('h2', { style: { ...style.sectionTitle, flex: 1 } }, '远程会话'),
-        h('span', { style: { fontSize: 11, color: t.text3 } }, currentAccount.scopes.filter(s => s !== 'device:connect').join(' · '))),
-      h('div', { style: style.row },
+    currentAccount ? h('section', { style: style.toolbarCard, className: 'mai-toolbar' },
+      h('div', { style: style.row, className: 'mai-toolbar-heading' },
+        h('div', { style: { display: 'grid', gap: 1, flex: 1, minWidth: 0 } },
+          h('h2', { style: style.sectionTitle }, '远程会话'),
+          h('p', { style: style.subtitle }, '选择设备，继续处理 MonkeyAI 会话')),
+        h('span', { style: style.chip }, currentAccount.scopes.filter(s => s !== 'device:connect').join(' · '))),
+      h('div', { style: style.row, className: 'mai-toolbar-controls' },
         h('select', { style: { ...style.input, flex: '1 1 200px' }, value: accountId, onChange: event => setAccountId(event.target.value), 'aria-label': '已授权账号' },
           accounts.map(account => h('option', { key: account.accountId, value: account.accountId }, account.serverOrigin))),
         h('button', { type: 'button', style: { ...style.button, flex: '0 0 auto', padding: '6px 10px', fontWeight: 700 }, disabled: loading || addingServer, onClick: () => { setAddingServer(true); setServerAddress(''); setAuthorizationRequestId(''); setAuthorizationUrl(''); setAuthorizationMode(''); setCallbackUrl(''); setStatus('请输入 MonkeyAI 服务器地址') }, title: '授权另一个 MonkeyAI 服务器' }, '+ 添加服务器'),
@@ -1005,30 +1094,41 @@ function RemoteSessionPage({ api }) {
               type: 'button', style: style.primaryButton, flex: '0 0 auto',
               disabled: loading || !machineId || !newSessionCwd.trim() || newSessionBusy,
               onClick: createRemoteSession,
-            }, newSessionBusy ? '创建中…' : '创建')))),
-      sessionOptions.length > 0
-        ? h('div', { style: style.sessions }, sessionOptions.map(session => {
-            const flag = session.stale ? '已过期' : session.deviceStatus && session.deviceStatus !== 'online' ? (session.deviceStatus === 'offline' ? '离线' : session.deviceStatus) : ''
-            return h('button', {
-              style: { ...style.session, ...(session.id === sessionId ? style.selected : {}) },
-              className: 'mai-card-hover',
-              key: session.id,
-              type: 'button',
-              disabled: !session.cwd,
-              onClick: () => openSession(session),
-              title: session.cwd ? `打开 ${session.cwd}` : 'ACP 会话列表未提供工作目录',
-            },
-              h('span', { style: style.sessionTitle }, session.title || session.id),
-              h('span', { style: style.sessionMeta }, session.cwd || '加载历史需要 runtime 提供工作目录'),
-              flag !== '' ? h('span', { style: { fontSize: 10.5, fontWeight: 650, color: session.stale ? t.text3 : '#8a6d1d', textTransform: 'uppercase', letterSpacing: '0.04em' } }, flag) : null)
-          }))
-        : h('p', { style: style.subtitle }, machineId ? '该设备暂无会话。可在上方新建，或点击刷新。' : '请选择设备以列出其会话。'))
+            }, newSessionBusy ? '创建中…' : '创建')))))
       : null,
-    sessionId ? h('section', { style: style.card },
-      h('div', { style: style.row },
+    currentAccount ? h('div', { className: 'mai-workspace' },
+      h('aside', { style: style.sessionSidebar, className: 'mai-session-sidebar' },
+        h('div', { style: { ...style.row, justifyContent: 'space-between' } },
+          h('h2', { style: style.sectionTitle }, '会话列表'),
+          h('span', { style: style.chip }, String(sessionOptions.length))),
+        sessionOptions.length > 0
+          ? h('div', { style: style.sessions, className: 'mai-session-list' }, sessionOptions.map(session => {
+              const flag = session.stale ? '已过期' : session.deviceStatus && session.deviceStatus !== 'online' ? (session.deviceStatus === 'offline' ? '离线' : session.deviceStatus) : ''
+              return h('button', {
+                style: { ...style.session, ...(session.id === sessionId ? style.selected : {}) },
+                className: 'mai-card-hover mai-session-card',
+                'aria-current': session.id === sessionId ? 'true' : undefined,
+                key: session.id,
+                type: 'button',
+                disabled: !session.cwd,
+                onClick: () => openSession(session),
+                title: session.cwd ? `打开 ${session.cwd}` : 'ACP 会话列表未提供工作目录',
+              },
+                h('span', { style: style.sessionTitle }, session.title || session.id),
+                h('span', { style: style.sessionMeta, className: 'mai-session-meta' }, session.cwd || '加载历史需要 runtime 提供工作目录'),
+                flag !== '' ? h('span', { style: { fontSize: 10.5, fontWeight: 650, color: session.stale ? t.text3 : '#8a6d1d', textTransform: 'uppercase', letterSpacing: '0.04em' } }, flag) : null)
+            }))
+          : h('div', { style: { display: 'grid', justifyItems: 'center', gap: 7, padding: '22px 12px', textAlign: 'center' } },
+              h('span', { style: { ...style.avatar, width: 34, height: 34, background: t.surfaceAlt, color: t.text3, fontSize: 17 } }, '·'),
+              h('span', { style: { fontSize: 12, fontWeight: 600, color: t.text2 } }, machineId ? '这里还没有会话' : '请选择远程设备'),
+              h('span', { style: { fontSize: 11, color: t.text3 } }, machineId ? '刷新会话或创建一个新会话' : '会话列表会显示在这里')),
+        h('div', { style: { borderTop: `1px solid ${t.border}`, paddingTop: 8 } },
+          h('p', { style: { margin: 0, fontSize: 10.5, color: t.text3 } }, machineId ? '会话来自所选设备的 runtime' : '连接设备后查看会话'))),
+      sessionId ? h('section', { style: { ...style.card, ...style.thread }, className: 'mai-thread' },
+      h('div', { style: style.row, className: 'mai-thread-header' },
         h('button', {
           type: 'button', style: { ...style.button, flexShrink: 0 }, title: '关闭会话并返回列表',
-          onClick: () => { streamRef.current?.dispose(); streamRef.current = null; setSessionId(''); setTurnActive(false); setStopping(false); setSessionStatus(''); setStatus('远程会话已关闭') },
+          onClick: () => { streamGenerationRef.current += 1; streamRef.current?.dispose(); streamRef.current = null; setSessionId(''); setTurnActive(false); setStopping(false); setSessionStatus(''); setStatus('远程会话已关闭') },
         }, '←'),
         h('strong', { style: { flex: 1, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, title }, title),
         sessionStatus ? h('span', {
@@ -1038,7 +1138,7 @@ function RemoteSessionPage({ api }) {
             borderColor: sessionStatus === 'running' ? t.accent : sessionStatus === 'error' ? t.dangerBorder : t.border,
             color: sessionStatus === 'running' ? t.accent : sessionStatus === 'error' ? t.danger : t.text2,
           },
-          title: '会话状态（含远端客户端发起的回合）',
+          title: '会话状态',
           'aria-label': `会话状态：${SESSION_STATUS_LABEL[sessionStatus]}`,
         },
           sessionStatus === 'running' ? h('span', { className: 'mai-pulse', style: { ...style.dot, background: t.accent } }) : null,
@@ -1057,7 +1157,7 @@ function RemoteSessionPage({ api }) {
             ? h('option', { value: currentModel }, currentModel.slice(0, 24))
             : null,
           models.map(m => h('option', { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1000)}k)`)))),
-      h('div', { style: style.events, 'aria-live': 'polite', 'data-events': '', ref: eventsRef,
+      h('div', { style: style.events, className: 'mai-thread-events mai-events', 'aria-live': 'polite', 'data-events': '', ref: eventsRef,
           onScroll: event => {
             const el = event.currentTarget
             if (el.scrollTop < 60 && visibleCount < displayEntries.length) {
@@ -1160,8 +1260,13 @@ function RemoteSessionPage({ api }) {
                 h('path', { d: 'M8 12.5V3.5M8 3.5L4 7.5M8 3.5L12 7.5', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' })))),
       lastDelivery || turnActive ? h('div', { style: { fontSize: 11.5, color: turnActive ? t.accent : lastDelivery?.accepted ? t.success : lastDelivery?.frame === 'pending' ? t.text3 : t.danger, textAlign: 'right', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6 } },
         turnActive ? h('span', { className: 'mai-pulse', style: { ...style.dot, background: t.accent } }) : null,
-        turnActive ? (stopping ? '正在停止当前回合…' : sessionStatus === 'running' ? 'MonkeyAI 正在处理（远端客户端发起）…' : 'MonkeyAI 正在处理…') : lastDelivery?.accepted ? '回合已结束' : lastDelivery?.frame === 'pending' ? '等待投递' : '投递被拒绝') : null)
-      : null)
+        turnActive ? (stopping ? '正在停止当前回合…' : 'MonkeyAI 正在处理…') : lastDelivery?.accepted ? '回合已结束' : lastDelivery?.frame === 'pending' ? '等待投递' : '投递被拒绝') : null)
+      : h('section', { style: style.emptyThread, className: 'mai-empty-thread' },
+          h('div', { className: 'mai-empty-mark' }, h(MonkeyIcon, { size: 26 })),
+          h('p', { style: style.eyebrow }, '远程会话'),
+          h('h2', { style: { margin: 0, fontSize: 18, fontWeight: 650, color: '#182230' } }, '选择一个会话'),
+          h('p', { style: { ...style.subtitle, maxWidth: 300 } }, sessionOptions.length > 0 ? '从左侧选择会话，在此继续对话。' : machineId ? '当前设备还没有会话。可在上方新建或刷新。' : '先选择一个远程设备。'))
+    ) : null)
 }
 
 function MonkeyIcon({ size = 18 }) {