dsh-remote 0.8.3 → 0.8.5

package/lib/client.js

@@ -87,6 +87,7 @@ window.__ModuleLoader__.load({
     }
 
     let WORKSPACES = null // ctx.get('workspaces'), set in apply()
+    let SESSIONS = null // ctx.get('sessions'), set in apply()
 
     // ── Settings → 远程工作区 (machine registry + forwards + audit) ──────────
     function RemoteWorkspacePage() {
@@ -562,15 +563,21 @@ window.__ModuleLoader__.load({
             ? res.items.map((it) => ({ name: it.name, dir: it.type === 'dir' }))
             : parseLs(res && res.text)
           const base = String(dir).replace(/[\\/]+$/, '') === '' ? '/' : String(dir).replace(/[\\/]+$/, '')
-          const kids = list.filter((it) => it.dir).slice(0, 40).map((it) => (base === '/' ? '/' + it.name : base + sep + it.name))
+          // Show every entry (dirs + files), matching loadSuggestions — the
+          // previous dir-only filter made the next-level list look truncated.
+          const kids = list.slice(0, 40).map((it) => (base === '/' ? sep + it.name : base + sep + it.name))
           setSuggest(kids)
           setSuggestOpen(!!kids.length)
         }).catch(() => { setSuggest([]); setSuggestOpen(false) })
       }
 
       const selectSuggestion = (s) => {
-        setPath(s); setErr(''); setSuggestOpen(false)
-        continueSuggest(s)
+        // Auto-append the trailing separator so the path reads as a directory
+        // and the user can keep typing the next segment right away.
+        const sep = String(s).includes('\\') ? '\\' : '/'
+        const withSep = String(s).replace(/[\\/]+$/, '') + sep
+        setPath(withSep); setErr(''); setSuggestOpen(false)
+        continueSuggest(withSep)
       }
 
       const commitPath = (p) => {
@@ -623,9 +630,11 @@ window.__ModuleLoader__.load({
               : (entries.length ? entries.slice(0, 400).map((it, i) => React.createElement('div', {
                   key: i, title: (it.dir ? '进入 ' : '文件: ') + it.name,
                   onClick: it.dir ? () => enterDir(it.name) : undefined,
-                  style: { padding: '6px 10px', cursor: it.dir ? 'pointer' : 'default', color: it.dir ? T.ok : T.label, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, borderBottom: '1px solid ' + T.border },
+                  style: { padding: '6px 10px', cursor: it.dir ? 'pointer' : 'default', color: T.label, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, borderBottom: '1px solid ' + T.border },
                 },
-                  React.createElement('span', null, it.dir ? '📁' : '📄'),
+                  React.createElement('span', { style: { flexShrink: 0, display: 'inline-flex', color: T.label } }, it.dir
+                    ? React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'currentColor' }, React.createElement('path', { d: 'M1.5 3.5A1.5 1.5 0 0 1 3 2h3.2a1.5 1.5 0 0 1 1.06.44L8.5 3.7h4.5A1.5 1.5 0 0 1 14.5 5.2V12A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12V3.5Zm2.5 1a.5.5 0 0 0 0 1h1.2a.5.5 0 0 0 0-1H4Z' }))
+                    : React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'currentColor', opacity: 0.85 }, React.createElement('path', { d: 'M3.5 1.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5.2a1 1 0 0 0-.29-.7L10.5 1.79a1 1 0 0 0-.7-.29H3.5Zm1.5 3h2.25a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5ZM5 9.5h6a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5Zm0 2.25h4a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5Z' }))),
                   React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 } }, it.name),
                   React.createElement('span', { style: { fontSize: 11, opacity: 0.55, flexShrink: 0, fontFamily: 'monospace' } }, it.dir ? '' : (humanSize(it.size) + (it.mtime ? '  ' + fmtTime(it.mtime) : ''))),
                 )) : React.createElement('div', { style: { opacity: 0.6, padding: 12 } }, '（空目录）')),
@@ -716,6 +725,33 @@ window.__ModuleLoader__.load({
       return api('GET', '/dsh-remote/status').catch(() => null)
     }
 
+    // Resolve the remote path this session should show: prefer the session's
+    // own cwd (a remote mirror dir) mapped through /dsh-remote/resolve-mirror;
+    // fall back to the machine workspace when the session has no cwd or the
+    // host side has no mirror match.
+    function resolveSessionRemote(sessionId) {
+      if (!sessionId) return Promise.resolve('')
+      // 1) Prefer the client-side session list cwd (mirror dir under
+      //    $DSH_HOME/remote-workspaces/...) passed as ?local=.
+      let local = ''
+      try {
+        const list = SESSIONS && SESSIONS.list && typeof SESSIONS.list.getSnapshot === 'function'
+          ? SESSIONS.list.getSnapshot()
+          : null
+        const entry = list && list.byId && list.byId[sessionId]
+        if (entry && entry.cwd) local = String(entry.cwd)
+      } catch { /* sessions store shape differs */ }
+      if (local) {
+        return api('GET', '/dsh-remote/resolve-mirror?local=' + encodeURIComponent(local))
+          .then((r) => (r && r.remotePath) || '')
+          .catch(() => '')
+      }
+      // 2) Fall back to host-side session header cwd.
+      return api('GET', '/dsh-remote/resolve-mirror?sessionId=' + encodeURIComponent(sessionId))
+        .then((r) => (r && r.remotePath) || '')
+        .catch(() => '')
+    }
+
     function readRemoteFile(path, maxBytes) {
       return api('POST', '/dsh-remote/read', { path, maxBytes }).catch((e) => {
         throw new Error('远程读取失败: ' + ((e && e.message) || e))
@@ -734,31 +770,109 @@ window.__ModuleLoader__.load({
     }
 
     // ── Remote explorer tab ────────────────────────────────────────────────
+    // Inline monochrome icons (fill: currentColor → follows the row text color,
+    // i.e. black on the sidebar). Folder open/closed + file.
+    const IconFolder = (open) => React.createElement('svg', {
+      width: 14, height: 14, viewBox: '0 0 16 16', fill: 'currentColor', style: { flexShrink: 0 },
+    },
+      open
+        ? React.createElement('path', { d: 'M1.5 3.5A1.5 1.5 0 0 1 3 2h3.2a1.5 1.5 0 0 1 1.06.44L8.5 3.7h4.5A1.5 1.5 0 0 1 14.5 5.2V12A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12V3.5Zm2.5 1a.5.5 0 0 0 0 1h1.2a.5.5 0 0 0 0-1H4Z' })
+        : React.createElement('path', { d: 'M1.5 3.5A1.5 1.5 0 0 1 3 2h3.2a1.5 1.5 0 0 1 1.06.44L8.5 3.7h4.5A1.5 1.5 0 0 1 14.5 5.2V12A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12V3.5Zm2.5 1a.5.5 0 0 0 0 1h1.2a.5.5 0 0 0 0-1H4Z' }),
+    )
+    const IconFile = () => React.createElement('svg', {
+      width: 14, height: 14, viewBox: '0 0 16 16', fill: 'currentColor', style: { flexShrink: 0, opacity: 0.85 },
+    },
+      React.createElement('path', { d: 'M3.5 1.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5.2a1 1 0 0 0-.29-.7L10.5 1.79a1 1 0 0 0-.7-.29H3.5Zm1.5 3h2.25a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5ZM5 9.5h6a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5Zm0 2.25h4a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5Z' }),
+    )
+
+    // Tree-style remote file explorer. Uses the same `expanded` / `onToggleDir`
+    // contract as the built-in local file tree (better-sidebar framework
+    // manages + persists the expanded set), so interaction and look match the
+    // local files tab. Data is listed live from the remote host over
+    // /dsh-remote/ls, rooted at this session's remote workspace dir.
     function RemoteExplorerTab(props) {
       const [status, setStatus] = React.useState(null)
-      const [levels, setLevels] = React.useState([])
+      const [root, setRoot] = React.useState('') // remote root path for this session
+      const [data, setData] = React.useState({}) // dir -> { entries | error | loading }
+      const dataRef = React.useRef(data)
       const [err, setErr] = React.useState('')
-      const [loading, setLoading] = React.useState(false)
-      const [picker, setPicker] = React.useState(false)
-      const [menu, setMenu] = React.useState(null) // { x, y, item }
       const [busy, setBusy] = React.useState('')
+      const [picker, setPicker] = React.useState(false)
+      const [menu, setMenu] = React.useState(null) // { x, y, path, isDir, name }
+      const [rootOpen, setRootOpen] = React.useState(true) // first level expanded by default
+      const [hoverPath, setHoverPath] = React.useState('') // row hover highlight
+      const expanded = Array.isArray(props.expanded) ? props.expanded : []
+
+      const storeLevel = (path, level) => {
+        dataRef.current = { ...dataRef.current, [path]: level }
+        setData(dataRef.current)
+      }
 
-      const refreshStatus = () => {
-        fetchRemoteStatus().then((s) => {
-          setStatus(s)
-          if (s && s.workspace) {
-            setLevels((prev) => {
-              if (!prev.length) {
-                loadDir(s.workspace, 0)
-                return [{ path: s.workspace, items: null }]
-              }
-              return prev
+      const loadDir = React.useCallback((dir) => {
+        const cur = dataRef.current
+        if (cur[dir] !== undefined && !cur[dir].loading) return
+        storeLevel(dir, { loading: true })
+        listRemoteDir(dir)
+          .then((res) => {
+            const items = Array.isArray(res && res.items) ? res.items : []
+            const sorted = items.slice().sort((a, b) => {
+              if (a.type === 'dir' && b.type !== 'dir') return -1
+              if (a.type !== 'dir' && b.type === 'dir') return 1
+              return String(a.name).localeCompare(String(b.name))
             })
+            storeLevel(dir, { entries: sorted })
+          })
+          .catch((e) => storeLevel(dir, { error: String((e && e.message) || e) }))
+      }, [])
+
+      // Resolve this session's remote root, then load it and every expanded dir.
+      // Re-runs whenever the session scope changes (switching conversations, or
+      // the async sessionCwd fetch landing), so the sidebar follows the session's
+      // own workspace dir.
+      const scopeCwd = props.scope && props.scope.cwd
+      const sessionId = props.scope && props.scope.sessionId
+      const refreshStatus = React.useCallback(() => {
+        const applyRoot = (r) => {
+          setRoot(r)
+          setData({})
+          dataRef.current = {}
+          if (r) {
+            storeLevel(r, { loading: true })
+            listRemoteDir(r)
+              .then((res) => {
+                const items = Array.isArray(res && res.items) ? res.items : []
+                const sorted = items.slice().sort((a, b) => {
+                  if (a.type === 'dir' && b.type !== 'dir') return -1
+                  if (a.type !== 'dir' && b.type === 'dir') return 1
+                  return String(a.name).localeCompare(String(b.name))
+                })
+                storeLevel(r, { entries: sorted })
+                for (const dir of expanded) loadDir(dir)
+              })
+              .catch((e) => storeLevel(r, { error: String((e && e.message) || e) }))
+          }
+        }
+        const resolveRoot = () => {
+          if (scopeCwd) {
+            return api('GET', '/dsh-remote/resolve-mirror?local=' + encodeURIComponent(scopeCwd))
+              .then((r) => (r && r.remotePath) || '')
+              .catch(() => '')
           }
+          if (sessionId) return resolveSessionRemote(sessionId)
+          return Promise.resolve('')
+        }
+        resolveRoot().then((r) => {
+          fetchRemoteStatus().then((s) => {
+            setStatus(s)
+            applyRoot(r || (s && s.workspace) || '')
+          })
         })
-      }
-      React.useEffect(() => { refreshStatus() }, [])
+      }, [scopeCwd, sessionId])
+
+      React.useEffect(() => { refreshStatus() }, [refreshStatus])
       React.useEffect(() => { if (props.visible) refreshStatus() }, [props.visible])
+      // Load dirs as they get expanded.
+      React.useEffect(() => { if (root) for (const dir of expanded) loadDir(dir) }, [root, expanded, loadDir])
       React.useEffect(() => {
         if (!menu) return
         const close = () => setMenu(null)
@@ -766,143 +880,142 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('mousedown', close)
       }, [menu])
 
-      const loadDir = (p, idx) => {
-        if (loading) return
-        setLoading(true); setErr('')
-        listRemoteDir(p).then((res) => {
-          const items = Array.isArray(res && res.items) ? res.items : []
-          const sorted = items.slice().sort((a, b) => {
-            if (a.type === 'dir' && b.type !== 'dir') return -1
-            if (a.type !== 'dir' && b.type === 'dir') return 1
-            return String(a.name).localeCompare(String(b.name))
-          })
-          setLevels((prev) => {
-            const base = prev.length ? prev.slice() : [{ path: p, items: null }]
-            const list = sorted.map((it) => ({ name: it.name, type: it.type === 'dir' ? 'dir' : 'file', size: it.size, mtime: it.mtime }))
-            if (idx < 0 || idx >= base.length) return base.concat([{ path: p, items: list }])
-            base[idx] = { path: p, items: list }
-            return base.slice(0, idx + 1)
-          })
-        }).catch((e) => setErr(String((e && e.message) || e)))
-          .finally(() => setLoading(false))
-      }
-
-      const enterDir = (name) => {
-        const last = levels.length ? levels[levels.length - 1] : null
-        if (!last || !last.items) return
-        const base = last.path
-        const sep = base.includes('\\') ? '\\' : '/'
-        const next = base === '/' ? '/' + name : base + sep + name
-        loadDir(next, levels.length)
-      }
-      const jumpTo = (p) => {
-        // Breadcrumb segments may lack the leading separator (built by
-        // splitting the absolute path), so normalize to the absolute form
-        // before matching the level stack.
-        const target = p.startsWith('/') || p.startsWith('\\') || /^[A-Za-z]:/.test(p) ? p : '/' + p
-        const idx = levels.findIndex((lv) => lv.path === target)
-        if (idx < 0) return
-        setLevels(levels.slice(0, idx + 1))
-      }
       const openFile = (p) => {
         const name = String(p).split(/[\\/]/).pop() || p
         props.ctx.betterSidebar.openTab({ type: SIDEBAR_FILE_ID, title: name, path: p }, props.scope)
       }
 
-      const doFs = (op, payload) => {
+      const doFs = (op, payload, refreshParent) => {
         setBusy(op)
         return api('POST', '/dsh-remote/fs', { op, ...payload })
           .then(() => {
-            const last = levels.length ? levels[levels.length - 1] : null
-            if (last) loadDir(last.path, levels.length - 1)
             setErr('')
+            if (refreshParent) {
+              dataRef.current = {}
+              setData({})
+              if (root) { storeLevel(root, { loading: true }); loadDir(root) }
+              for (const dir of expanded) loadDir(dir)
+            }
           })
           .catch((e) => setErr(String((e && e.message) || e)))
           .finally(() => setBusy(''))
       }
 
-      const onCtx = (e, item) => {
+      const onCtx = (e, path, isDir, name) => {
         e.preventDefault(); e.stopPropagation()
-        setMenu({ x: e.clientX, y: e.clientY, item })
+        setMenu({ x: e.clientX, y: e.clientY, path, isDir, name })
       }
-      const curPath = levels.length ? levels[levels.length - 1].path : ''
-      const menuFull = menu ? joinRemote(curPath, menu.item.name) : ''
-
-      const row = (it, i) => React.createElement('div', {
-        key: it.name + '|' + i,
-        title: (it.type === 'dir' ? '进入目录 ' : '打开文件 ') + it.name,
-        onClick: () => (it.type === 'dir' ? enterDir(it.name) : openFile(joinRemote(curPath, it.name))),
-        onContextMenu: (e) => onCtx(e, it),
-        style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', borderRadius: 5, cursor: 'pointer', fontSize: 13, color: it.type === 'dir' ? '#4caf7d' : '#e4e4e7', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderBottom: '1px solid rgba(128,128,128,0.12)' },
-      },
-        React.createElement('span', { style: { flexShrink: 0 } }, it.type === 'dir' ? '📁' : '📄'),
-        React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 } }, it.name),
-        it.type !== 'dir' ? React.createElement('span', { style: { fontSize: 11, opacity: 0.55, flexShrink: 0, fontFamily: 'monospace' } }, humanSize(it.size)) : null)
-
-      const rootHint = status && status.workspace
-        ? React.createElement('div', { style: { fontSize: 11, opacity: 0.7, padding: '4px 8px', wordBreak: 'break-all' } }, '远程工作区: ' + status.workspace + (status.host ? '  (' + status.username + '@' + status.host + ')' : ''))
-        : React.createElement('div', { style: { fontSize: 11, opacity: 0.7, padding: '4px 8px' } }, '未设置远程工作区')
-
-      const allItems = levels.length ? (levels[levels.length - 1].items || []) : []
-      const segs = String(curPath || '').split(/[\\/]+/).filter(Boolean)
-      const crumbs = [React.createElement('span', { key: 'r', style: { cursor: 'pointer', color: '#4caf7d', fontWeight: 700 }, onClick: () => { const idx = levels.findIndex((lv) => lv.path === '/' || lv.path === '\\'); if (idx >= 0) jumpTo(levels[idx].path); else setLevels([]) } }, '⌂')]
-      let acc = ''
-      segs.forEach((s, i) => {
-        acc = acc ? acc + '/' + s : s
-        const isLast = i === segs.length - 1
-        crumbs.push(React.createElement('span', { key: 's' + i, style: { color: isLast ? '#e4e4e7' : '#9a9aa0', cursor: isLast ? 'default' : 'pointer', fontWeight: isLast ? 600 : 400, whiteSpace: 'nowrap' }, onClick: isLast ? undefined : () => jumpTo(acc) }, (i ? '/' : '') + s))
-      })
-
       const ctxItem = (label, danger, fn) => React.createElement('div', {
         onClick: (e) => { e.stopPropagation(); setMenu(null); fn() },
         style: { padding: '6px 10px', cursor: 'pointer', fontSize: 12, color: danger ? '#e06c75' : '#e4e4e7', borderRadius: 4, whiteSpace: 'nowrap' },
       }, label)
 
-      // Explicit "up one level" button: the breadcrumb line ellipsizes and
-      // its segments may be hard to hit in a narrow sidebar, so give the
-      // user a direct way back to the parent level.
-      const goUpOneLevel = () => {
-        if (levels.length <= 1) return
-        setLevels(levels.slice(0, levels.length - 1))
+      // One tree row (dir toggles via the framework's onToggleDir; file opens).
+      // Text uses the normal foreground (theme-following) — no accent green.
+      const row = (entry, depth) => {
+        const pad = depth * 22 + 6
+        const hovered = hoverPath === entry.path
+        const base = {
+          display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: pad,
+          borderRadius: 5, cursor: 'pointer', fontSize: 13, whiteSpace: 'nowrap',
+          overflow: 'hidden', textOverflow: 'ellipsis', transition: 'background 0.12s ease',
+          background: hovered ? 'rgba(128,128,128,0.14)' : 'transparent',
+          color: T.label,
+        }
+        if (entry.type === 'dir') {
+          const isOpen = expanded.includes(entry.path)
+          return React.createElement('div', { key: entry.path },
+            React.createElement('div', {
+              role: 'button', tabIndex: 0,
+              onClick: () => { if (props.onToggleDir) props.onToggleDir(entry.path) },
+              onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (props.onToggleDir) props.onToggleDir(entry.path) } },
+              onContextMenu: (e) => onCtx(e, entry.path, true, entry.name),
+              onMouseEnter: () => setHoverPath(entry.path),
+              onMouseLeave: () => setHoverPath((p) => (p === entry.path ? '' : p)),
+              style: base,
+              title: entry.path,
+            },
+              React.createElement('span', { style: { flexShrink: 0, color: T.label, display: 'inline-flex' } }, IconFolder(isOpen)),
+              React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1, fontWeight: 500 } }, entry.name),
+            ),
+            isOpen ? renderLevel(entry.path, depth + 1) : null,
+          )
+        }
+        return React.createElement('div', {
+          role: 'button', tabIndex: 0, key: entry.path,
+          onClick: () => openFile(entry.path),
+          onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFile(entry.path) } },
+          onContextMenu: (e) => onCtx(e, entry.path, false, entry.name),
+          onMouseEnter: () => setHoverPath(entry.path),
+          onMouseLeave: () => setHoverPath((p) => (p === entry.path ? '' : p)),
+          style: base,
+          title: entry.path,
+        },
+          React.createElement('span', { style: { flexShrink: 0, display: 'inline-flex' } }, IconFile()),
+          React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 } }, entry.name),
+          entry.size != null ? React.createElement('span', { style: { fontSize: 11, opacity: 0.55, flexShrink: 0, fontFamily: 'monospace' } }, humanSize(entry.size)) : null,
+        )
+      }
+
+      const renderLevel = (dir, depth) => {
+        const level = data[dir]
+        if (level === undefined || (level.loading && !level.entries)) {
+          return React.createElement('div', { key: dir + ':loading', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 13, opacity: 0.6 } }, '加载中…')
+        }
+        if (level.error !== undefined) {
+          return React.createElement('div', { key: dir + ':err', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 13, color: '#e06c75' } }, level.error)
+        }
+        const items = level.entries || []
+        if (!items.length) return null
+        return React.createElement('div', { key: dir + ':list' }, items.map((it) => row({ ...it, path: joinRemote(dir, it.name) }, depth)))
       }
 
+      const rootName = root ? String(root).split(/[\\/]/).filter(Boolean).pop() || root : ''
+      const rootLevel = data[root]
+
       return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 } },
         React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '6px 8px', borderBottom: '1px solid rgba(128,128,128,0.25)' } },
-          React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => { const w = status && status.workspace; if (w) { setLevels([{ path: w, items: null }]); loadDir(w, 0) } else setPicker(true) } }, '↻'),
+          React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: refreshStatus, title: '刷新' }, '↻'),
           React.createElement('button', {
             style: { ...buttonS, padding: '3px 8px', fontSize: 12 },
-            onClick: goUpOneLevel,
-            disabled: levels.length <= 1,
-            title: '返回上一级目录',
-          }, '↑ 上一级'),
-          React.createElement('div', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12, fontFamily: 'monospace' } }, crumbs),
-          React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => { const last = levels.length ? levels[levels.length - 1] : null; const base = (last && last.path) || '/'; const nm = window.prompt('新建目录名（在 ' + base + ' 下）'); if (nm && nm.trim()) doFs('mkdir', { path: joinRemote(base, nm.trim()) }) } }, '新建目录'),
+            onClick: () => { const nm = window.prompt('新建目录名（在 ' + (root || '/') + ' 下）'); if (nm && nm.trim()) doFs('mkdir', { path: joinRemote(root, nm.trim()) }, true) },
+          }, '新建目录'),
           React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => setPicker(true) }, '…'),
         ),
-        rootHint,
+        status && status.workspace
+          ? React.createElement('div', { style: { fontSize: 11, opacity: 0.7, padding: '4px 8px', wordBreak: 'break-all' } }, '远程工作区: ' + root + (status.host ? '  (' + status.username + '@' + status.host + ')' : ''))
+          : React.createElement('div', { style: { fontSize: 11, opacity: 0.7, padding: '4px 8px' } }, '未设置远程工作区'),
         picker ? React.createElement('div', { style: { padding: 8 } }, React.createElement(DirPicker, {
-          open: true, busy: false, onPicked: (localMirror) => {
-            setPicker(false)
-            refreshStatus()
-            fetchRemoteStatus().then((s) => { if (s && s.workspace) { setLevels([{ path: s.workspace, items: null }]); loadDir(s.workspace, 0) } })
-          }, onCancel: () => setPicker(false),
+          open: true, busy: false, onPicked: () => { setPicker(false); refreshStatus() }, onCancel: () => setPicker(false),
         })) : null,
-        React.createElement('div', { style: { flex: 1, overflowY: 'auto', minHeight: 0 } },
-          loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12, fontSize: 13 } }, '加载中…')
-            : (allItems.length ? allItems.slice(0, 500).map(row)
-                : (curPath ? React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '（空目录）')
-                    : React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '选择或设置一个远程工作区'))),
+        React.createElement('div', { style: { flex: 1, overflowY: 'auto', minHeight: 0, padding: '2px 0' } },
+          !root
+            ? React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '选择或设置一个远程工作区')
+            : React.createElement('div', { key: root },
+                React.createElement('div', {
+                  role: 'button', tabIndex: 0,
+                  onClick: () => setRootOpen((v) => !v),
+                  onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setRootOpen((v) => !v) } },
+                  onContextMenu: (e) => onCtx(e, root, true, rootName),
+                  style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: 6, borderRadius: 5, cursor: 'pointer', fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: T.label, fontWeight: 600 },
+                  title: root,
+                },
+                  React.createElement('span', { style: { flexShrink: 0, color: T.label, display: 'inline-flex' } }, IconFolder(rootOpen)),
+                  React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 } }, rootName || root),
+                ),
+                rootLevel && rootOpen ? renderLevel(root, 1) : null,
+              ),
         ),
         // context menu
         menu ? React.createElement('div', { style: { position: 'fixed', left: menu.x, top: menu.y, zIndex: 9998, background: v('--dsw-alias-bg-overlay', '#1f1f23'), border: '1px solid ' + T.borderStrong, borderRadius: 8, padding: 4, boxShadow: '0 8px 24px rgba(0,0,0,0.4)', minWidth: 170 }, onClick: (e) => e.stopPropagation() },
-          ctxItem(menu.item.type === 'dir' ? '📁 进入目录' : '📄 打开文件', false, () => (menu.item.type === 'dir' ? enterDir(menu.item.name) : openFile(menuFull))),
-          ctxItem('⬇ 下载到本地镜像', false, () => doFs('download', { path: menuFull })),
+          ctxItem(menu.isDir ? '📂 展开/收起' : '📄 打开文件', false, () => { if (menu.isDir) { if (props.onToggleDir) props.onToggleDir(menu.path) } else openFile(menu.path) }),
+          ctxItem('⬇ 下载到本地镜像', false, () => doFs('download', { path: menu.path })),
           ctxItem('✏ 重命名', false, () => {
-            const nm = window.prompt('重命名为（新名字）', menu.item.name)
-            if (nm && nm.trim() && nm.trim() !== menu.item.name) doFs('rename', { path: menuFull, dest: joinRemote(curPath, nm.trim()) })
+            const nm = window.prompt('重命名为（新名字）', menu.name)
+            if (nm && nm.trim() && nm.trim() !== menu.name) doFs('rename', { path: menu.path, dest: joinRemote(String(menu.path).replace(/[\\/][^\\/]*$/, ''), nm.trim()) }, true)
           }),
-          ctxItem('🗑 删除' + (menu.item.type === 'dir' ? '（含子目录）' : ''), true, () => {
-            if (window.confirm('确认删除 ' + menuFull + '？')) doFs('remove', { path: menuFull })
+          ctxItem('🗑 删除' + (menu.isDir ? '（含子目录）' : ''), true, () => {
+            if (window.confirm('确认删除 ' + menu.path + '？')) doFs('remove', { path: menu.path }, true)
           }),
         ) : null,
         err ? React.createElement('div', { style: { color: '#e06c75', fontSize: 12, padding: '4px 8px' } }, (busy ? '处理中… ' : '') + err) : null,
@@ -1017,17 +1130,19 @@ window.__ModuleLoader__.load({
         disposers.forEach((d) => { try { d() } catch {} })
         return
       }
-      let autoOpened = false
+      let autoOpenedFor = new Set()
       let disposeAuto = null
       const tryAutoOpen = () => {
-        if (autoOpened || typeof bs.subscribeState !== 'function') return
+        if (typeof bs.subscribeState !== 'function') return
         const snap = bs.getSnapshot && bs.getSnapshot()
         if (!snap || !snap.sessionId) return
-        fetchRemoteStatus().then((s) => {
-          if (!s || !s.workspace || autoOpened) return
-          autoOpened = true
+        if (autoOpenedFor.has(snap.sessionId)) return
+        const sessionId = snap.sessionId
+        resolveSessionRemote(sessionId).then((remotePath) => {
+          if (!remotePath || autoOpenedFor.has(sessionId)) return
+          autoOpenedFor.add(sessionId)
           try {
-            bs.openTab({ type: SIDEBAR_EXPLORER_ID, title: '远程文件', path: s.workspace })
+            bs.openTab({ type: SIDEBAR_EXPLORER_ID, title: '远程文件', path: remotePath })
           } catch (e2) {
             console.warn('[dsh-remote] better-sidebar auto-open skipped:', e2)
           }
@@ -1045,6 +1160,7 @@ window.__ModuleLoader__.load({
       const slots = ctx.get('slots')
       if (slots === undefined) return
       WORKSPACES = (ctx && ((ctx.get && ctx.get('workspaces')) || ctx.workspaces)) || null
+      SESSIONS = (ctx && ((ctx.get && ctx.get('sessions')) || null)) || null
       slots.inject('settings.section', () =>
         slots.register({ name: 'settings.section', id: 'dsh-remote', priority: 40, label: () => '远程工作区' }, () => React.createElement(RemoteWorkspacePage, null)),
       )