dsh-remote 0.7.5 → 0.8.1

package/lib/client.js

@@ -1,7 +1,8 @@
 // dsh-remote — client half.
-// Settings → 远程工作区:	a multi-machine SSH registry (add/edit/select current;
-// password stored host-side and kept private). No workspace path here — the
-// path is picked at workspace-add time.
+// Settings → 远程工作区: a multi-machine SSH registry (add/edit/select current;
+// passphrase / host-key mode / proxy jump / agent / keychain password; password
+// stored host-side and kept private). Plus a port-forward panel, the command
+// audit log view, quick workspace switching, and an ~/.ssh/config importer.
 //
 // A unified workspace directory picker fills ui-workspace's two directory-flow
 // holes (sidebar + conversation hero):
@@ -11,6 +12,10 @@
 //     /dsh-remote/ls, choose or type a remote path → /dsh-remote/mirror builds a
 //     real LOCAL mirror → onPicked(localMirror) so host adopts it as a workspace.
 //
+// better-sidebar integration (optional): a live remote file explorer tab and a
+// read-only-by-default remote file tab with an explicit「编辑 → 保存到远程」flow
+// (mtime optimistic lock via POST /dsh-remote/write).
+//
 // Client entries must be classic scripts registered via window.__ModuleLoader__.load
 // ({ id, factory }); the factory receives a synchronous `require`.
 window.__ModuleLoader__.load({
@@ -32,6 +37,15 @@ window.__ModuleLoader__.load({
       return data
     }
 
+    // Like api() but returns {status, data} so callers can handle 409 etc.
+    async function apiRaw(method, path, body) {
+      const opts = { method, headers: {} }
+      if (body) { opts.headers['Content-Type'] = 'application/json'; opts.body = JSON.stringify(body) }
+      const res = await fetch(path, opts)
+      const data = await res.json().catch(() => ({}))
+      return { status: res.status, data }
+    }
+
     // Theme via DSH design tokens so this follows the harness light/dark theme.
     const v = (name, fb) => `var(${name}, ${fb})`
     const T = {
@@ -42,6 +56,7 @@ window.__ModuleLoader__.load({
       danger: v('--dsw-static-red-500', '#e06c75'),
       dangerText: v('--dsw-static-red-400', '#e06c75'),
       ok: v('--dsw-static-green-500', '#4caf7d'),
+      warn: v('--dsw-static-yellow-500', '#e6c07b'),
       radius: 8,
       muted: v('--dsw-alias-label-tertiary', 'rgba(128,128,128,0.7)'),
       label: v('--dsw-alias-label-primary', '#e4e4e7'),
@@ -52,37 +67,66 @@ window.__ModuleLoader__.load({
     const inputS = { flex: 1, padding: '6px 10px', borderRadius: T.radius, border: '1px solid ' + T.border, background: T.bg, color: T.label, outline: 'none' }
     const buttonS = { padding: '6px 12px', borderRadius: T.radius, border: '1px solid ' + T.border, background: T.bg, color: T.label, cursor: 'pointer' }
     const primaryBtnS = { padding: '6px 12px', borderRadius: T.radius, border: 'none', background: T.primary, color: T.onPrimary, cursor: 'pointer', fontWeight: 600 }
-    const ghostBtnS = { padding: '6px 12px', borderRadius: T.radius, border: 'none', background: 'transparent', color: T.label, cursor: 'pointer' }
     const box = { border: '1px solid ' + T.border, borderRadius: T.radius, background: T.bg, padding: 10 }
     const boxS = box
 
+    function humanSize(n) {
+      if (n == null) return ''
+      if (n < 1024) return n + ' B'
+      const units = ['KB', 'MB', 'GB', 'TB']
+      let i = -1
+      let v = n
+      while (v >= 1024 && i < units.length - 1) { v /= 1024; i++ }
+      return v.toFixed(v >= 100 ? 0 : 1) + ' ' + units[i]
+    }
+    function fmtTime(ts) {
+      if (!ts) return ''
+      const d = new Date(ts * 1000)
+      const pad = (x) => String(x).padStart(2, '0')
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+    }
+
     let WORKSPACES = null // ctx.get('workspaces'), set in apply()
 
-    // ── Settings → 远程工作区 (machine registry) ─────────────────────────────
+    // ── Settings → 远程工作区 (machine registry + forwards + audit) ──────────
     function RemoteWorkspacePage() {
       const [machines, setMachines] = React.useState([])
       const [currentId, setCurrentId] = React.useState('')
-      const [form, setForm] = React.useState({ name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '', id: '' })
+      const [form, setForm] = React.useState({
+        name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '',
+        passphrase: '', workspace: '', hostKeyMode: '', useAgent: false, keyboardInteractive: false,
+        encryptPassword: false, proxyHost: '', proxyPort: '22', proxyUser: '', proxyPassword: '', proxyKey: '', id: '',
+      })
       const [busy, setBusy] = React.useState(false)
       const [msg, setMsg] = React.useState('')
       const [err, setErr] = React.useState('')
       const [tst, setTst] = React.useState('') // idle | testing | ok | failing
+      const [forwards, setForwards] = React.useState([])
+      const [fwdForm, setFwdForm] = React.useState({ listenPort: '', targetHost: '127.0.0.1', targetPort: '', direction: 'local', autoStart: false })
+      const [auditLines, setAuditLines] = React.useState([])
+      const [sshEntries, setSshEntries] = React.useState(null)
+      const [workspaces, setWorkspaces] = React.useState([])
 
       const testConn = () => {
         if (!form.host.trim() || tst === 'testing') return
         setTst('testing'); setErr(''); setMsg('')
         api('POST', '/dsh-remote/test-connect', {
           host: form.host, port: Number(form.port) || 22, username: form.username || 'root',
-          password: form.password, privateKeyPath: form.privateKeyPath,
+          password: form.password, privateKeyPath: form.privateKeyPath, passphrase: form.passphrase,
+          proxy: form.proxyHost ? { host: form.proxyHost, port: Number(form.proxyPort) || 22, username: form.proxyUser || '', password: form.proxyPassword || '', privateKeyPath: form.proxyKey || '' } : undefined,
         })
           .then((r) => {
-            if (r && r.ok) { setTst('ok'); setMsg(r.latencyMs != null ? `连接成功（${r.user}@${r.host}，${r.latencyMs}ms）` : '连接成功') }
+            if (r && r.ok) { setTst('ok'); setMsg(r.latencyMs != null ? `连接成功（${r.user}@${r.host}，${r.latencyMs}ms）` : '连接成功'); refresh() }
             else { setTst('failing'); setErr((r && r.error) || '连接失败') }
           })
           .catch((e) => { setTst('failing'); setErr(String((e && e.message) || e)) })
       }
 
-      const refresh = () => api('GET', '/dsh-remote/machines').then((r) => { setMachines(r.machines || []); setCurrentId(r.currentId || '') })
+      const refresh = () => api('GET', '/dsh-remote/machines').then((r) => {
+        setMachines(r.machines || []); setCurrentId(r.currentId || '')
+        const cur = (r.machines || []).find((m) => m.id === r.currentId)
+        setWorkspaces((cur && cur.recentWorkspaces) || [])
+      })
       React.useEffect(() => { refresh() }, [])
 
       // ── update state ────────────────────────────────────────────────────────
@@ -98,7 +142,7 @@ window.__ModuleLoader__.load({
             if (!r || !r.ok) { setUpdMsg((r && r.error) || '检查更新失败'); return }
             setUpd(r)
             if (r.updateMode) setUpdMode(r.updateMode)
-            if (!quiet) setUpdMsg(r.updateAvailable ? '发现新版本 ' + r.latest : '已是最新版本（v' + r.current + '）')
+            if (!quiet) setUpdMsg(r.updateAvailable ? '发现新版本 v' + r.latest : '已是最新版本（v' + r.current + '）')
           })
           .catch((e) => setUpdMsg(String((e && e.message) || e)))
           .finally(() => setUpdBusy(false))
@@ -109,45 +153,90 @@ window.__ModuleLoader__.load({
         setUpdBusy(true); setUpdMsg('')
         api('POST', '/dsh-remote/update-apply', { version: upd.latest })
           .then((r) => {
-            if (r && r.ok) setUpdMsg('✅ 已更新到 v' + r.to + '（' + r.from + ' → ' + r.to + '）。重启 Harness 生效。')
+            if (r && r.ok) setUpdMsg('✅ 已更新到 v' + r.to + '（' + (r.from || '') + ' → ' + r.to + '）。重启 Harness 生效。')
             else setUpdMsg((r && r.error) || '更新失败')
             checkUpdate(true)
           })
           .catch((e) => setUpdMsg('更新失败: ' + String((e && e.message) || e)))
           .finally(() => setUpdBusy(false))
       }
-      // 更新模式持久化:auto/manual/off 通过 /dsh-remote/update-check 返回当前值;
-      // 修改模式这里仅本地提示(host 侧 config 由 profile 配置)。为简单可靠,
-      // 模式切换写入 host 配置目录下的 override 文件,host 加载时读取。
       const saveUpdateMode = (mode) => {
         setUpdMode(mode); setUpdMsg('更新模式已设为「' + (mode === 'auto' ? '自动' : mode === 'off' ? '关闭' : '手动') + '」')
         api('POST', '/dsh-remote/update-mode', { mode }).catch((e) => setUpdMsg('模式保存失败: ' + String((e && e.message) || e)))
       }
       React.useEffect(() => { checkUpdate(true) }, [])
 
+      const refreshForwards = () => api('GET', '/dsh-remote/forwards').then((r) => setForwards(r.forwards || [])).catch(() => {})
+      React.useEffect(() => { refreshForwards(); api('GET', '/dsh-remote/audit?limit=30').then((r) => setAuditLines(r.lines || [])).catch(() => {}) }, [])
+
       const setF = (k) => (ev) => setForm({ ...form, [k]: ev.target.value })
-      const startEdit = (m) => setForm({ name: m.name, host: m.host, port: String(m.port || 22), username: m.username || 'root', password: '', privateKeyPath: m.privateKeyPath || '', id: m.id })
+      const setFb = (k) => (ev) => setForm({ ...form, [k]: ev.target.checked })
+      const startEdit = (m) => setForm({
+        name: m.name, host: m.host, port: String(m.port || 22), username: m.username || 'root',
+        password: '', privateKeyPath: m.privateKeyPath || '', passphrase: '', workspace: m.workspace || '',
+        hostKeyMode: m.hostKeyMode || '', useAgent: !!m.useAgent, keyboardInteractive: !!m.keyboardInteractive,
+        encryptPassword: !!(m.credentialBackend && m.credentialBackend !== 'plain'),
+        proxyHost: (m.proxy && m.proxy.host) || '', proxyPort: String((m.proxy && m.proxy.port) || 22),
+        proxyUser: (m.proxy && m.proxy.username) || '', proxyPassword: '', proxyKey: (m.proxy && m.proxy.privateKeyPath) || '',
+        id: m.id,
+      })
+      const clearForm = () => setForm({ name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '', passphrase: '', workspace: '', hostKeyMode: '', useAgent: false, keyboardInteractive: false, encryptPassword: false, proxyHost: '', proxyPort: '22', proxyUser: '', proxyPassword: '', proxyKey: '', id: '' })
       const save = (action) => {
         setBusy(true); setErr(''); setMsg('')
         if (action === 'delete') {
-          api('POST', '/dsh-remote/machines', { action: 'delete', id: form.id }).then(refresh).then(() => { setForm({ name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '', id: '' }); setMsg('已删除') }).catch((e) => setErr(String((e && e.message) || e))).finally(() => setBusy(false))
+          api('POST', '/dsh-remote/machines', { action: 'delete', id: form.id }).then(refresh).then(() => { clearForm(); setMsg('已删除') }).catch((e) => setErr(String((e && e.message) || e))).finally(() => setBusy(false))
           return
         }
         api('POST', '/dsh-remote/machines', {
           action: form.id ? 'update' : 'add', id: form.id || undefined, name: form.name, host: form.host, port: Number(form.port) || 22,
-          username: form.username, password: form.password, privateKeyPath: form.privateKeyPath,
-        }).then((r) => { refresh(); setForm({ name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '', id: '' }); setMsg(form.id ? '已保存更新' : '已添加 — 可设为当前') }).catch((e) => setErr(String((e && e.message) || e))).finally(() => setBusy(false))
+          username: form.username, password: form.password, privateKeyPath: form.privateKeyPath, passphrase: form.passphrase,
+          workspace: form.workspace, hostKeyMode: form.hostKeyMode, useAgent: form.useAgent, keyboardInteractive: form.keyboardInteractive,
+          encryptPassword: form.encryptPassword,
+          proxy: form.proxyHost ? { host: form.proxyHost, port: Number(form.proxyPort) || 22, username: form.proxyUser || '', password: form.proxyPassword || '', privateKeyPath: form.proxyKey || '' } : undefined,
+        }).then((r) => { refresh(); clearForm(); setMsg(form.id ? '已保存更新' : '已添加 — 可设为当前') }).catch((e) => setErr(String((e && e.message) || e))).finally(() => setBusy(false))
       }
       const useNow = (id) => { setBusy(true); api('POST', '/dsh-remote/current', { id }).then((r) => { setCurrentId(r.currentId); setMsg('已切换为当前远程机') }).catch((e) => setErr(String((e && e.message) || e))).finally(() => setBusy(false)) }
       const del = (id) => { if (window.confirm('确定删除这台机器？')) { api('POST', '/dsh-remote/machines', { action: 'delete', id }).then(refresh).then(() => setMsg('已删除')).catch((e) => setErr(String((e && e.message) || e))) } }
 
+      const importSsh = () => {
+        api('GET', '/dsh-remote/ssh-config').then((r) => setSshEntries(r && r.present ? (r.entries || []) : []))
+          .catch((e) => setErr('读取 ~/.ssh/config 失败: ' + String((e && e.message) || e)))
+      }
+      const applySshEntry = (e) => {
+        setForm({ ...form,
+          name: e.host, host: e.hostName || e.host, port: String(e.port || 22),
+          username: e.user || 'root', privateKeyPath: e.identityFile || '',
+        })
+        setSshEntries(null)
+        setMsg('已从 ~/.ssh/config 填入（仅引用私钥路径，不读取内容）')
+      }
+
+      const setWorkspaceNow = (p) => {
+        api('POST', '/dsh-remote/workspace', { path: p })
+          .then(() => setMsg('已切换到工作区 ' + p))
+          .catch((e) => setErr(String((e && e.message) || e)))
+      }
+
+      // ── forwards panel ────────────────────────────────────────────────────
+      const fwdAction = (action, id) => {
+        api('POST', '/dsh-remote/forwards', { action, id })
+          .then((r) => { setForwards(r.forwards || []); setErr(''); setMsg('') })
+          .catch((e) => setErr(String((e && e.message) || e)))
+      }
+      const fwdDefine = () => {
+        if (!fwdForm.listenPort) return
+        api('POST', '/dsh-remote/forwards', { action: 'define', listenPort: Number(fwdForm.listenPort), targetHost: fwdForm.targetHost || '127.0.0.1', targetPort: Number(fwdForm.targetPort) || Number(fwdForm.listenPort), direction: fwdForm.direction, autoStart: fwdForm.autoStart })
+          .then((r) => { setForwards(r.forwards || []); setFwdForm({ listenPort: '', targetHost: '127.0.0.1', targetPort: '', direction: 'local', autoStart: false }) })
+          .catch((e) => setErr(String((e && e.message) || e)))
+      }
+
       const row = (label, ctrl, k) => React.createElement('div', { key: k, style: { display: 'flex', gap: 6, alignItems: 'center' } },
-        React.createElement('label', { style: { width: 76, fontSize: 12, opacity: 0.8 } }, label), ctrl)
+        React.createElement('label', { style: { width: 84, fontSize: 12, opacity: 0.8, flexShrink: 0 } }, label), ctrl)
 
-      return React.createElement('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 760 } },
+      return React.createElement('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 820 } },
         React.createElement('div', { style: { fontSize: 15, fontWeight: 600 } }, '远程工作区（dsh-remote）'),
         React.createElement('div', { style: { fontSize: 12, opacity: 0.8 } },
-          '维护多台 SSH 机器。路径不在设置里配置 —— 新建/选择工作区时，「本机」走系统文件夹对话框；「远程」选一台机器在远程目录中选择。'),
+          '维护多台 SSH 机器（密码/私钥/agent/跳板机/钥匙串）。路径在新建/选择工作区时选：「本机」走系统文件夹对话框；「远程」选一台机器在远程目录中选择。'),
         React.createElement('div', { style: boxS },
           React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, '已配置的机器'),
           machines.length
@@ -156,6 +245,9 @@ window.__ModuleLoader__.load({
                   m.name + '  ',
                   React.createElement('code', { style: { fontSize: 12, opacity: 0.8 } }, m.username + '@' + m.host + ':' + m.port),
                   m.passwordSet ? ' 🔒' : '',
+                  (m.credentialBackend && m.credentialBackend !== 'plain') ? ' 🗝' : '',
+                  m.proxy && m.proxy.host ? ' ⛳' : '',
+                  m.latencyMs != null ? React.createElement('span', { style: { fontSize: 11, opacity: 0.6 } }, ` · ${m.latencyMs}ms`) : null,
                   m.id === currentId ? React.createElement('span', { style: { color: T.ok, fontSize: 12 } }, ' · 当前') : null),
                 React.createElement('button', { style: buttonS, onClick: () => startEdit(m) }, '编辑'),
                 React.createElement('button', { style: buttonS, onClick: () => del(m.id) }, '删除'),
@@ -163,28 +255,92 @@ window.__ModuleLoader__.load({
             : React.createElement('div', { style: { opacity: 0.6, fontSize: 12 } }, '还没有机器。在下方添加。'),
           ),
         React.createElement('div', { style: boxS },
-          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, form.id ? '编辑机器' : '添加机器'),
+          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 } },
+            React.createElement('div', { style: { fontSize: 13, fontWeight: 600 } }, form.id ? '编辑机器' : '添加机器'),
+            React.createElement('button', { style: { ...buttonS, fontSize: 12, padding: '3px 8px' }, onClick: () => (sshEntries ? setSshEntries(null) : importSsh()) }, sshEntries ? '收起' : '从 ~/.ssh/config 导入')),
+          sshEntries ? React.createElement('div', { style: { marginBottom: 8, maxHeight: 160, overflowY: 'auto', border: '1px solid ' + T.border, borderRadius: T.radius } },
+            sshEntries.length ? sshEntries.map((e) => React.createElement('div', { key: e.host, onClick: () => applySshEntry(e), style: { padding: '6px 10px', cursor: 'pointer', fontSize: 12, borderBottom: '1px solid ' + T.border } },
+              e.host + '  →  ' + (e.hostName || '?') + (e.user ? '  (' + e.user + ')' : '') + (e.identityFile ? '  [key]' : '') + (e.proxyJump ? '  ⛳' : '')))
+              : React.createElement('div', { style: { padding: 8, fontSize: 12, opacity: 0.6 } }, '~/.ssh/config 里没有可导入的 Host 条目'))
+          : null,
           row('名称', React.createElement('input', { value: form.name, onChange: setF('name'), placeholder: '例如 编译机', style: inputS }), 'n'),
           row('主机', React.createElement('input', { value: form.host, onChange: setF('host'), placeholder: 'IP 或 hostname', style: inputS }), 'h'),
           row('端口', React.createElement('input', { value: form.port, onChange: setF('port'), placeholder: '22', style: { ...inputS, width: 70 } }), 'p'),
           row('用户', React.createElement('input', { value: form.username, onChange: setF('username'), placeholder: 'root', style: inputS }), 'u'),
-          row('密码', React.createElement('input', { type: 'password', value: form.password, onChange: setF('password'), placeholder: 'SSH 无 key 时用（不回显、仅保存）', style: inputS }), 'w'),
-          row('私钥路径', React.createElement('input', { value: form.privateKeyPath, onChange: setF('privateKeyPath'), placeholder: '留空用默认 key', style: inputS }), 'k'),
+          row('密码', React.createElement('input', { type: 'password', value: form.password, onChange: setF('password'), placeholder: 'SSH 无 key 时用（不回显）', style: inputS }), 'w'),
+          row('私钥路径', React.createElement('input', { value: form.privateKeyPath, onChange: setF('privateKeyPath'), placeholder: '留空用密码或 agent', style: inputS }), 'k'),
+          row('Passphrase', React.createElement('input', { type: 'password', value: form.passphrase, onChange: setF('passphrase'), placeholder: '私钥加密时使用', style: inputS }), 'pp'),
+          row('默认工作区', React.createElement('input', { value: form.workspace, onChange: setF('workspace'), placeholder: '可选：该机器的默认远程目录', style: inputS }), 'ws'),
+          row('HostKey 模式', React.createElement('select', { value: form.hostKeyMode, onChange: setF('hostKeyMode'), style: { ...inputS, maxWidth: 220 } },
+            React.createElement('option', { value: '' }, '（默认 accept-new）'),
+            React.createElement('option', { value: 'accept-new' }, 'accept-new（信任首次，之后校验）'),
+            React.createElement('option', { value: 'verify' }, 'verify（严格：拒绝陌生主机）'),
+            React.createElement('option', { value: 'off' }, 'off（不校验，不推荐）')), 'hkm'),
+          React.createElement('div', { style: { display: 'flex', gap: 16, paddingLeft: 90, flexWrap: 'wrap' } },
+            React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
+              React.createElement('input', { type: 'checkbox', checked: form.useAgent, onChange: setFb('useAgent') }), 'SSH agent（SSH_AUTH_SOCK）'),
+            React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
+              React.createElement('input', { type: 'checkbox', checked: form.keyboardInteractive, onChange: setFb('keyboardInteractive') }), 'keyboard-interactive（OTP/动态码）'),
+            React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
+              React.createElement('input', { type: 'checkbox', checked: form.encryptPassword, onChange: setFb('encryptPassword') }), '加密保存密码（系统钥匙串）')),
+          row('跳板机', React.createElement('input', { value: form.proxyHost, onChange: setF('proxyHost'), placeholder: '经此主机中转（可选）', style: inputS }), 'ph'),
+          row('跳板端口/用户', React.createElement('div', { style: { display: 'flex', gap: 6, flex: 1 } },
+            React.createElement('input', { value: form.proxyPort, onChange: setF('proxyPort'), placeholder: '22', style: { ...inputS, width: 60 } }),
+            React.createElement('input', { value: form.proxyUser, onChange: setF('proxyUser'), placeholder: '跳板用户', style: inputS }),
+            React.createElement('input', { type: 'password', value: form.proxyPassword, onChange: setF('proxyPassword'), placeholder: '跳板密码', style: inputS }),
+            React.createElement('input', { value: form.proxyKey, onChange: setF('proxyKey'), placeholder: '跳板私钥', style: inputS })), 'pu'),
           React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center' } },
             msg ? React.createElement('span', { style: { color: T.ok, fontSize: 12, marginRight: 'auto' } }, msg) : null,
             form.id ? React.createElement('button', { style: buttonS, onClick: () => save('delete') }, '删除') : null,
-            React.createElement('button', { style: buttonS, onClick: () => { setForm({ name: '', host: '', port: '22', username: 'root', password: '', privateKeyPath: '', id: '' }); setErr(''); setTst('idle') } }, form.id ? '取消编辑' : '清空'),
+            React.createElement('button', { style: buttonS, onClick: () => { clearForm(); setErr(''); setTst('idle') } }, form.id ? '取消编辑' : '清空'),
             React.createElement('button', { style: { ...buttonS, fontFamily: 'monospace', whiteSpace: 'nowrap' }, onClick: testConn, disabled: busy || !form.host.trim() || tst === 'testing' },
               tst === 'testing' ? '连接中…' : tst === 'ok' ? '✓ 连接成功' : '测试连接'),
             React.createElement('button', { style: { ...buttonS, fontWeight: 700 }, onClick: () => save(form.id ? 'update' : 'add'), disabled: busy || !form.host.trim() }, busy ? '保存中…' : '保存'),
           ),
         ),
+        // 快捷切换工作区（该机器的最近工作区）
+        workspaces.length ? React.createElement('div', { style: boxS },
+          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, '当前机器最近工作区（一键切换）'),
+          workspaces.map((w, i) => React.createElement('div', { key: w + i, style: { display: 'flex', gap: 8, alignItems: 'center', padding: '4px 0' } },
+            React.createElement('code', { style: { flex: 1, fontSize: 12, fontFamily: 'monospace' } }, w),
+            React.createElement('button', { style: { ...buttonS, padding: '2px 10px' }, onClick: () => setWorkspaceNow(w) }, '切换')))) : null,
+        // 端口转发面板
+        React.createElement('div', { style: boxS },
+          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, '端口转发（SSH 隧道）'),
+          forwards.length ? forwards.map((f) => React.createElement('div', { key: f.id, style: { display: 'flex', gap: 8, alignItems: 'center', padding: '4px 0', fontSize: 12, fontFamily: 'monospace' } },
+            React.createElement('span', { style: { color: f.active ? T.ok : T.muted } }, f.active ? '●' : '○'),
+            React.createElement('span', { style: { flex: 1 } }, `${f.direction} 127.0.0.1:${f.listenPort} → ${f.targetHost}:${f.targetPort}${f.autoStart ? ' [自启]' : ''}`),
+            f.active
+              ? React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('stop', f.id) }, '停止')
+              : React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('start', f.id) }, '启动'),
+            React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('remove', f.id) }, '删除'))) : null,
+          React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', marginTop: 6, flexWrap: 'wrap' } },
+            React.createElement('select', { value: fwdForm.direction, onChange: (e) => setFwdForm({ ...fwdForm, direction: e.target.value }), style: { ...inputS, maxWidth: 110 } },
+              React.createElement('option', { value: 'local' }, '本地→远端'),
+              React.createElement('option', { value: 'reverse' }, '远端→本地')),
+            React.createElement('input', { value: fwdForm.listenPort, onChange: (e) => setFwdForm({ ...fwdForm, listenPort: e.target.value }), placeholder: '监听端口', style: { ...inputS, maxWidth: 90 } }),
+            React.createElement('input', { value: fwdForm.targetHost, onChange: (e) => setFwdForm({ ...fwdForm, targetHost: e.target.value }), placeholder: '目标主机', style: { ...inputS, maxWidth: 120 } }),
+            React.createElement('input', { value: fwdForm.targetPort, onChange: (e) => setFwdForm({ ...fwdForm, targetPort: e.target.value }), placeholder: '目标端口', style: { ...inputS, maxWidth: 90 } }),
+            React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
+              React.createElement('input', { type: 'checkbox', checked: fwdForm.autoStart, onChange: (e) => setFwdForm({ ...fwdForm, autoStart: e.target.checked }) }), '自动重连'),
+            React.createElement('button', { style: { ...buttonS, fontWeight: 700 }, onClick: fwdDefine, disabled: !fwdForm.listenPort }, '添加转发')),
+        ),
+        // 审计日志
+        React.createElement('div', { style: boxS },
+          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, '最近执行的远程命令（审计日志）'),
+          auditLines.length
+            ? React.createElement('div', { style: { maxHeight: 180, overflowY: 'auto', fontSize: 11, fontFamily: 'monospace', lineHeight: 1.6 } },
+                auditLines.map((l, i) => React.createElement('div', { key: i, style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, l)))
+            : React.createElement('div', { style: { opacity: 0.6, fontSize: 12 } }, '暂无记录（在远端执行的命令会记录到 $DSH_HOME/remote-workspaces/audit.log）'),
+        ),
         err ? React.createElement('div', { style: { color: T.danger, fontSize: 13 } }, err) : null,
         React.createElement('div', { style: boxS },
           React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, '更新'),
           React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', fontSize: 12 } },
             upd
-              ? React.createElement('span', { style: { opacity: 0.85 } }, '当前 v' + upd.current + (upd.updateAvailable ? React.createElement('b', { style: { color: T.ok, marginLeft: 6 } }, '→ 新版本 v' + upd.latest) : null))
+              ? React.createElement('span', { style: { opacity: 0.85 } },
+                  '当前 v' + upd.current,
+                  upd.updateAvailable ? React.createElement('b', { style: { color: T.ok, marginLeft: 6 } }, '→ 新版本 v' + upd.latest) : null)
               : React.createElement('span', { style: { opacity: 0.6 } }, '版本信息加载中…'),
             React.createElement('button', { style: { ...buttonS, padding: '2px 10px' }, onClick: () => checkUpdate(false), disabled: updBusy }, updBusy ? '检查中…' : '检查更新'),
             upd && upd.updateAvailable
@@ -207,7 +363,7 @@ window.__ModuleLoader__.load({
           React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, '⭐ 去 GitHub 点个 Star'),
           React.createElement('span', {}, '·'),
           React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote/issues/new', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, '💬 反馈建议 / 提 issue'),
-          React.createElement('span', { style: { marginLeft: 'auto', opacity: 0.5 } }, 'dsh-remote v0.7.5'),
+          React.createElement('span', { style: { marginLeft: 'auto', opacity: 0.5 } }, 'dsh-remote v0.8.0'),
         ),
       )
     }
@@ -219,8 +375,6 @@ window.__ModuleLoader__.load({
         const t = ln.trim()
         if (!t || !t.length || /^total\b/i.test(t)) continue
         const parts = t.split(/\s+/).filter(Boolean)
-        // ls -l row: mode links owner group size month day [hh:mm|year] name...
-        // NAME starts at column 8 (everything before it is the fixed metadata).
         if (parts.length < 8) continue
         const mode = parts[0]
         const name = parts.slice(8).join(' ')
@@ -231,8 +385,7 @@ window.__ModuleLoader__.load({
       return out
     }
 
-    // Clickable breadcrumb of the current remote path; clicking a segment jumps
-    // to that ancestor level (finite-width, one line, ellipsized at the front).
+    // Clickable breadcrumb of the current remote path.
     function breadcrumb(active, cur, jumpTo) {
       const norm = String(cur || '').replace(/\/+$/, '')
       const segs = norm === '' || norm === '/' ? [] : norm.split('/')
@@ -262,21 +415,19 @@ window.__ModuleLoader__.load({
       const [items, setItems] = React.useState(null)
       const [err, setErr] = React.useState('')
       const [loading, setLoading] = React.useState(false)
-      // 级联下钻状态：每一格是 { path, dirs } —— dirs 是该路径下的目录列表。
       const [levels, setLevels] = React.useState(null)
       const [popOpen, setPopOpen] = React.useState(false)
       const [suggest, setSuggest] = React.useState([])
       const [suggestOpen, setSuggestOpen] = React.useState(false)
+      const [recent, setRecent] = React.useState([])
       const suggestTimer = React.useRef(null)
       const suggestRef = React.useRef(null)
-      // 点击自动补全下拉外部的空白处时收起补全列表（上游 0.5.10）
       React.useEffect(() => {
         if (!suggestOpen) return
         const onDown = (ev) => { if (suggestRef.current && !suggestRef.current.contains(ev.target)) setSuggestOpen(false) }
         document.addEventListener('mousedown', onDown)
         return () => document.removeEventListener('mousedown', onDown)
       }, [suggestOpen])
-      // 机器下拉（自绘 dropdown）：点外部任意处关闭，避免候选层常驻遮挡下方按钮（上游 0.5.8）
       const [mOpen, setMOpen] = React.useState(false)
       const ddRef = React.useRef(null)
       React.useEffect(() => {
@@ -286,6 +437,14 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('mousedown', onDown)
       }, [mOpen])
 
+      const sortItems = (list) => {
+        const dirs = list.filter((it) => it.dir)
+        const files = list.filter((it) => !it.dir)
+        dirs.sort((a, b) => a.name.localeCompare(b.name))
+        files.sort((a, b) => a.name.localeCompare(b.name))
+        return dirs.concat(files)
+      }
+
       const loadLevels = (id, p, toIndex) => {
         if (!id) return
         setLoading(true); setErr('')
@@ -293,15 +452,12 @@ window.__ModuleLoader__.load({
         .then(() => api('GET', '/dsh-remote/ls?path=' + encodeURIComponent(p || '')))
         .then((res) => {
           const real = res && res.path ? res.path : (p || '')
-          // server returns [{ type:'dir'|'file', name }]; entering a dir is
-          // decided by type dir (server already follows symlinks to dirs).
           const list = Array.isArray(res && res.items)
-            ? res.items.map((it) => ({ name: it.name, dir: it.type === 'dir' }))
+            ? res.items.map((it) => ({ name: it.name, dir: it.type === 'dir', size: it.size, mtime: it.mtime }))
             : parseLs(res && res.text)
-          const node = { path: real, dirs: list.filter((it) => it.dir), all: list }
+          const node = { path: real, dirs: sortItems(list.filter((it) => it.dir)), all: sortItems(list) }
           setLevels((prev) => {
             const base = prev && prev.length ? prev.slice() : []
-            // toIndex >= 0 → put this node at that position, truncating below it.
             let idx = typeof toIndex === 'number' && toIndex >= 0 ? toIndex : base.length
             if (idx >= base.length) return base.concat([node])
             base[idx] = node
@@ -312,7 +468,14 @@ window.__ModuleLoader__.load({
         .finally(() => setLoading(false))
       }
 
-      React.useEffect(() => { if (open) { api('GET', '/dsh-remote/machines').then((r) => { setMachines(r.machines || []); setMachineId(r.currentId || (r.machines && r.machines[0] && r.machines[0].id) || '') }) } }, [open])
+      React.useEffect(() => { if (open) {
+        api('GET', '/dsh-remote/machines').then((r) => {
+          setMachines(r.machines || [])
+          const cur = (r.machines || []).find((m) => m.id === r.currentId)
+          setRecent((cur && cur.recentWorkspaces) || [])
+          setMachineId(r.currentId || (r.machines && r.machines[0] && r.machines[0].id) || '')
+        })
+      } }, [open])
 
       const chooseLocal = () => {
         setLoading(true); setErr('')
@@ -330,14 +493,10 @@ window.__ModuleLoader__.load({
         setTab(t); setErr('')
         if (t === 'remote') {
           if (machineId) loadLevels(machineId, '', 0)
-          // Prime the field with the machine's root so the user immediately gets
-          // a '/'-level completion list without typing anything.
           if (!path.trim()) { setPath('/'); loadSuggestions('/') }
         }
       }
 
-      // enterDir(name): drive into the named subdir of the current deepest level,
-// appending that directory as the new deepest level (path is pieced together).
       const enterDir = (name) => {
         if (busy || loading) return
         const last = levels && levels.length ? levels[levels.length - 1] : null
@@ -347,14 +506,11 @@ window.__ModuleLoader__.load({
         loadLevels(machineId, next, (levels ? levels.length : 0))
       }
 
-      // Autocomplete: given a partial remote path, list children of its parent dir
-      // that start with the last segment (powered by the structured ls endpoint).
       const loadSuggestions = (raw, mid) => {
         const id = mid || machineId
         if (!id || !raw) { setSuggest([]); setSuggestOpen(false); return }
         const t = String(raw || '').trim()
         if (!t) { setSuggest([]); setSuggestOpen(false); return }
-        // Windows drive path (D:\...) uses backslashes; POSIX uses '/'.
         const isWin = t.includes('\\')
         const sep = isWin ? '\\' : '/'
         const slash = t.lastIndexOf(sep)
@@ -380,8 +536,6 @@ window.__ModuleLoader__.load({
         suggestTimer.current = setTimeout(() => loadSuggestions(raw), 220)
       }
 
-      // After a directory is chosen, immediately reveal the next level: list the
-      // chosen directory's children as fresh completions (no keystroke needed).
       const continueSuggest = (dir) => {
         if (!machineId || !dir) { setSuggest([]); setSuggestOpen(false); return }
         setSuggestOpen(false)
@@ -399,13 +553,11 @@ window.__ModuleLoader__.load({
         }).catch(() => { setSuggest([]); setSuggestOpen(false) })
       }
 
-      // Choose a suggestion: fill the field and immediately open its next level.
       const selectSuggestion = (s) => {
         setPath(s); setErr(''); setSuggestOpen(false)
         continueSuggest(s)
       }
 
-      // Commit an explicit remote path as the workspace (race from the input).
       const commitPath = (p) => {
         const target = String(p || '').trim()
         if (!target || !machineId || busy) return
@@ -413,27 +565,42 @@ window.__ModuleLoader__.load({
         api('POST', '/dsh-remote/mirror', { path: target }).then((res) => (res && res.localMirror ? onPicked(res.localMirror) : setErr((res && res.error) || ''))).catch((e) => setErr(String((e && e.message) || e)))
       }
 
-      // Confirm the highlighted directory from the browser popup by filling the
-      // path input (not committing), so the user can review/edit before commit.
       const acceptBrowserPick = (p) => {
         setPath(String(p || ''))
         setSuggestOpen(false)
         setPopOpen(false)
       }
 
+      const pickHome = () => {
+        api('POST', '/dsh-remote/home').then((r) => {
+          if (r && r.home) { setPath(r.home); setErr(''); loadSuggestions(r.home) }
+          else setErr((r && (r.hint || r.error)) || '无法解析主目录')
+        }).catch((e) => setErr(String((e && e.message) || e)))
+      }
+
+      const mkdirHere = () => {
+        const last = levels && levels.length ? levels[levels.length - 1] : null
+        const base = (last && last.path) || '/'
+        const nm = window.prompt('新建目录名（在 ' + base + ' 下）')
+        if (!nm || !nm.trim()) return
+        const sep = base.includes('\\') ? '\\' : '/'
+        const full = base === '/' ? '/' + nm.trim() : base + sep + nm.trim()
+        api('POST', '/dsh-remote/fs', { op: 'mkdir', path: full })
+          .then(() => { setErr(''); loadLevels(machineId, base, (levels ? levels.length - 1 : 0)) })
+          .catch((e) => setErr(String((e && e.message) || e)))
+      }
+
       function renderDirPopup() {
         if (!levels || !levels.length) {
           return React.createElement('div', { style: { opacity: 0.6, fontSize: 12 } }, (loading ? '加载中…' : '正在读取根目录…'))
         }
         const last = levels[levels.length - 1]
         const entries = last.all || []
-        // Inline panel anchored inside the dialog (NOT a full-viewport overlay):
-        // a height-capped box whose directory list scrolls internally, so the
-        // dialog's own confirm row ("设为远程工作区") stays visible below it.
         return React.createElement('div', { style: { border: '1px solid ' + T.borderStrong, borderRadius: 10, background: v('--dsw-alias-bg-overlay', '#1e1e1e'), boxShadow: '0 8px 32px rgba(0,0,0,0.4)', display: 'flex', flexDirection: 'column', maxHeight: 'min(300px, 46vh)', overflow: 'hidden' } },
           React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '6px 10px', borderBottom: '1px solid ' + T.border } },
             React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => setLevels((p) => p && p.length > 1 ? p.slice(0, p.length - 1) : p), disabled: levels.length <= 1 || loading }, '回上一级 ▴'),
             React.createElement('div', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, breadcrumb(machineId, last.path, (p) => setLevels((prev) => { const cut = (prev || []).findIndex((lv) => lv.path === p); return cut >= 0 ? prev.slice(0, cut + 1) : prev }))),
+            React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: mkdirHere }, '新建目录'),
             React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => setPopOpen(false) }, '关闭 ✕'),
           ),
           React.createElement('div', { style: { overflowY: 'auto', overflowX: 'hidden' } },
@@ -444,7 +611,8 @@ window.__ModuleLoader__.load({
                   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 },
                 },
                   React.createElement('span', null, it.dir ? '📁' : '📄'),
-                  React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, it.name),
+                  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 } }, '（空目录）')),
           ),
           React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', padding: '6px 10px', borderTop: '1px solid ' + T.border } },
@@ -456,11 +624,8 @@ window.__ModuleLoader__.load({
 
       if (!open) return null
       const tabBtn = (t, lbl) => React.createElement('button', { onClick: () => switchTab(t), style: { ...buttonS, fontWeight: tab === t ? 700 : 400 } }, lbl)
-      // The picker is a full-viewport centered modal (backdrop + panel), so it
-      // renders identically in the narrow sidebar and in the conversation and
-      // is never squeezed into a cramped in-place column.
       return React.createElement('div', { style: { position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }, onClick: () => { if (!busy) onCancel() } },
-        React.createElement('div', { style: { background: v('--dsw-alias-bg-layer-1', '#18181b'), border: '1px solid ' + T.borderStrong, borderRadius: 12, boxShadow: '0 12px 48px rgba(0,0,0,0.5)', width: 'min(600px, 94vw)', maxHeight: 'min(620px, 90vh)', display: 'flex', flexDirection: 'column', padding: 16, boxSizing: 'border-box' }, onClick: (e) => e.stopPropagation() },
+        React.createElement('div', { style: { background: v('--dsw-alias-bg-layer-1', '#18181b'), border: '1px solid ' + T.borderStrong, borderRadius: 12, boxShadow: '0 12px 48px rgba(0,0,0,0.5)', width: 'min(600px, 94vw)', maxHeight: 'min(680px, 92vh)', display: 'flex', flexDirection: 'column', padding: 16, boxSizing: 'border-box' }, onClick: (e) => e.stopPropagation() },
         React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 } },
           React.createElement('div', null, '选择工作目录'),
           React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => { if (!busy) onCancel() }, disabled: busy }, '关闭 ✕'),
@@ -489,29 +654,28 @@ window.__ModuleLoader__.load({
                   mOpen
                     ? React.createElement('div', { style: { position: 'absolute', top: '100%', left: 0, zIndex: 1000, marginTop: 2, minWidth: 300, maxHeight: 260, overflow: 'auto', background: v('--dsw-alias-bg-overlay', '#1f1f23'), border: '1px solid ' + T.border, borderRadius: T.radius, padding: 4 } },
                         machines.length
-                          ? machines.map((m) => React.createElement('div', { key: m.id, onClick: () => { setMachineId(m.id); setLevels(null); setMOpen(false); if (m.id) { loadLevels(m.id, '', 0); if (!path.trim()) { setPath('/'); loadSuggestions('/', m.id) } } }, style: { padding: '6px 8px', borderRadius: 4, cursor: 'pointer', color: m.id === machineId ? T.ok : 'inherit' } }, m.name + '  (' + m.username + '@' + m.host + ':' + m.port + ')'))
+                          ? machines.map((m) => React.createElement('div', { key: m.id, onClick: () => { setMachineId(m.id); setRecent(m.recentWorkspaces || []); setLevels(null); setMOpen(false); if (m.id) { loadLevels(m.id, '', 0); if (!path.trim()) { setPath('/'); loadSuggestions('/', m.id) } } }, style: { padding: '6px 8px', borderRadius: 4, cursor: 'pointer', color: m.id === machineId ? T.ok : 'inherit' } }, m.name + '  (' + m.username + '@' + m.host + ':' + m.port + ')'))
                           : React.createElement('div', { style: { padding: 6, opacity: 0.6 } }, '还没有机器，请先在设置里添加'),
                       )
                     : null,
                 ),
               ),
-              // 路径输入框（带自动补全）+ 打开浏览弹层按钮
-              // suggestRef 外层仍用于「点击外部关闭」判定；输入行与补全列表
-              // 是两级 div —— 补全列表以流式（非绝对定位）展开，确认按钮被
-              // 推到下方而不会被遮挡（issue #4「有子目录时选择框遮挡确定菜单」）。
+              // 最近工作区快捷入口
+              recent.length ? React.createElement('div', { style: { display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap' } },
+                React.createElement('span', { style: { fontSize: 11, opacity: 0.6, whiteSpace: 'nowrap' } }, '最近:'),
+                recent.map((w, i) => React.createElement('button', { key: w + i, onClick: () => { setPath(w); setErr(''); continueSuggest(w) }, style: { ...buttonS, padding: '2px 8px', fontSize: 11, fontFamily: 'monospace' } }, w))) : null,
               React.createElement('div', { ref: suggestRef, style: { position: 'relative' } },
                 React.createElement('div', { style: { display: 'flex', gap: 6 } },
                   React.createElement('input', { value: path, onChange: (e) => onPathChange(e.target.value), onFocus: () => loadSuggestions(path), placeholder: (machineId ? '输入远程路径（自动补全）' : '先选远程机器'), disabled: !machineId, style: { ...inputS, flex: 1, minWidth: 120 } }),
                   React.createElement('button', { style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: () => { if (machineId) setPopOpen(true) }, disabled: !machineId }, '浏览…'),
+                  React.createElement('button', { style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: pickHome, disabled: !machineId }, '~ 主目录'),
                 ),
-                // 自动补全下拉（流式展开，参与文档流，不覆盖确认按钮）
                 (suggestOpen && suggest.length)
                   ? React.createElement('div', { style: { marginTop: 6, background: v('--dsw-alias-bg-overlay', '#1e1e1e'), border: '1px solid ' + T.borderStrong, borderRadius: 8, maxHeight: 200, overflowY: 'auto', boxShadow: '0 6px 24px rgba(0,0,0,0.25)' } },
                       suggest.map((s, i) => React.createElement('div', { key: s + i, onMouseDown: () => selectSuggestion(s), style: { padding: '6px 10px', cursor: 'pointer', fontSize: 12, fontFamily: 'monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, s)),
                     )
                   : null,
               ),
-              // 目录浏览面板（内联，锚定在对话框内；确认按钮保持可见）
               popOpen ? renderDirPopup() : null,
               err ? React.createElement('div', { style: { color: T.danger, fontSize: 12 } }, err) : null,
               React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center' } },
@@ -530,50 +694,25 @@ window.__ModuleLoader__.load({
     }
 
     // ── better-sidebar integration (optional) ────────────────────────────────
-    // The sidebar of dsh-better-sidebar lists LOCAL files (its fs tree reads
-    // the host filesystem). When dsh-remote is the active remote workspace the
-    // user wants to browse the REMOTE host's files live — not the local SFTP
-    // mirror snapshot (which rw_sync caps by depth/file-count/size).
-    //
-    // Through the public `ctx.betterSidebar` service (v0.4.0+; gracefully
-    // skipped when dsh-better-sidebar is not installed) we register TWO tabs:
-    //   • `dsh-remote:explorer` — a live remote file tree (dirs expand over
-    //     /dsh-remote/ls; every click lists the REMOTE host, not the mirror),
-    //   • `dsh-remote:file` — a read-only remote file view (hidden from the
-    //     + menu; opened by the explorer) that reads the file live over
-    //     /dsh-remote/read and renders its text (or a binary notice).
-    //
-    // Both are READ-ONLY on purpose: the sidebar editor's save path writes to
-    // the LOCAL fs, so an editable remote file would silently save into the
-    // mirror. Editing stays in the rw_* tools / the mirror workflow. We do NOT
-    // register a file viewer (better-sidebar's matching is extension/priority
-    // based and cannot tell a remote path from a local one — a catch-all
-    // viewer would hijack every local file open).
-
-    // A stable id namespace so the persisted sidebar tabs survive reloads.
     const SIDEBAR_EXPLORER_ID = 'dsh-remote:explorer'
     const SIDEBAR_FILE_ID = 'dsh-remote:file'
 
-    /** Remote workspace state the sidebar reads (host /dsh-remote/status). */
     function fetchRemoteStatus() {
       return api('GET', '/dsh-remote/status').catch(() => null)
     }
 
-    /** Read a remote file (live) → {binary, content?, head?, size?, truncated?}. */
     function readRemoteFile(path, maxBytes) {
       return api('POST', '/dsh-remote/read', { path, maxBytes }).catch((e) => {
         throw new Error('远程读取失败: ' + ((e && e.message) || e))
       })
     }
 
-    /** List a remote dir (live) → items [{name, type}] (server-driven types). */
     function listRemoteDir(path) {
       return api('GET', '/dsh-remote/ls?path=' + encodeURIComponent(path || '')).catch((e) => {
         throw new Error('远程目录读取失败: ' + ((e && e.message) || e))
       })
     }
 
-    /** Join a remote dir + entry name, honoring the dir's separator style. */
     function joinRemote(base, name) {
       if (!base) return name
       return base.replace(/[\\/]+$/, '') + (base.includes('\\') ? '\\' : '/') + name
@@ -582,19 +721,18 @@ window.__ModuleLoader__.load({
     // ── Remote explorer tab ────────────────────────────────────────────────
     function RemoteExplorerTab(props) {
       const [status, setStatus] = React.useState(null)
-      const [levels, setLevels] = React.useState([])   // [{path, items}]
+      const [levels, setLevels] = React.useState([])
       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 refreshStatus = () => {
         fetchRemoteStatus().then((s) => {
           setStatus(s)
           if (s && s.workspace) {
             setLevels((prev) => {
-              // First open with a workspace: seed the root level AND load it,
-              // so the tree shows the remote listing immediately instead of
-              // an empty "（空目录）" until the user hits ↻.
               if (!prev.length) {
                 loadDir(s.workspace, 0)
                 return [{ path: s.workspace, items: null }]
@@ -605,18 +743,27 @@ window.__ModuleLoader__.load({
         })
       }
       React.useEffect(() => { refreshStatus() }, [])
-      // When the tab becomes visible, re-verify the workspace still exists
-      // (the remote connection may have been switched in settings).
       React.useEffect(() => { if (props.visible) refreshStatus() }, [props.visible])
+      React.useEffect(() => {
+        if (!menu) return
+        const close = () => setMenu(null)
+        document.addEventListener('mousedown', close)
+        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 = items.map((it) => ({ name: it.name, type: it.type === 'dir' ? 'dir' : 'file' }))
+            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)
@@ -625,7 +772,6 @@ window.__ModuleLoader__.load({
           .finally(() => setLoading(false))
       }
 
-      // Open a directory: append it as the new deepest level.
       const enterDir = (name) => {
         const last = levels.length ? levels[levels.length - 1] : null
         if (!last || !last.items) return
@@ -634,7 +780,6 @@ window.__ModuleLoader__.load({
         const next = base === '/' ? '/' + name : base + sep + name
         loadDir(next, levels.length)
       }
-      // Jump to a breadcrumb ancestor.
       const jumpTo = (p) => {
         // Breadcrumb segments may lack the leading separator (built by
         // splitting the absolute path), so normalize to the absolute form
@@ -644,36 +789,60 @@ window.__ModuleLoader__.load({
         if (idx < 0) return
         setLevels(levels.slice(0, idx + 1))
       }
-      // Open a file: open the dedicated REMOTE file tab (reads the file live
-      // over /dsh-remote/read) — NOT the builtin editor, whose fs.read would
-      // hit the local filesystem and fail on a remote path.
       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 allItems = levels.length ? (levels[levels.length - 1].items || []) : []
+      const doFs = (op, payload) => {
+        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('')
+          })
+          .catch((e) => setErr(String((e && e.message) || e)))
+          .finally(() => setBusy(''))
+      }
+
+      const onCtx = (e, item) => {
+        e.preventDefault(); e.stopPropagation()
+        setMenu({ x: e.clientX, y: e.clientY, item })
+      }
       const curPath = levels.length ? levels[levels.length - 1].path : ''
-      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 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' } }, it.name))
+      },
+        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.
@@ -692,13 +861,13 @@ window.__ModuleLoader__.load({
             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()) }) } }, '新建目录'),
           React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => setPicker(true) }, '…'),
         ),
         rootHint,
         picker ? React.createElement('div', { style: { padding: 8 } }, React.createElement(DirPicker, {
           open: true, busy: false, onPicked: (localMirror) => {
             setPicker(false)
-            // The picker commits a mirror + workspace; refresh the tree.
             refreshStatus()
             fetchRemoteStatus().then((s) => { if (s && s.workspace) { setLevels([{ path: s.workspace, items: null }]); loadDir(s.workspace, 0) } })
           }, onCancel: () => setPicker(false),
@@ -709,54 +878,100 @@ window.__ModuleLoader__.load({
                 : (curPath ? React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '（空目录）')
                     : React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '选择或设置一个远程工作区'))),
         ),
-        err ? React.createElement('div', { style: { color: '#e06c75', fontSize: 12, padding: '4px 8px' } }, err) : 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('✏ 重命名', 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()) })
+          }),
+          ctxItem('🗑 删除' + (menu.item.type === 'dir' ? '（含子目录）' : ''), true, () => {
+            if (window.confirm('确认删除 ' + menuFull + '？')) doFs('remove', { path: menuFull })
+          }),
+        ) : null,
+        err ? React.createElement('div', { style: { color: '#e06c75', fontSize: 12, padding: '4px 8px' } }, (busy ? '处理中… ' : '') + err) : null,
       )
     }
 
-    // ── Remote file tab (opened by the explorer; reads the file live) ──────
-    // A dedicated tab type instead of a file viewer: better-sidebar's viewer
-    // matching is extension/priority-based and cannot tell a REMOTE path from
-    // a LOCAL one (a catch-all viewer would hijack every local file open and
-    // then fail its local fs.read). Our own tab carries the remote path and
-    // reads it straight over /dsh-remote/read — read-only by design (the
-    // sidebar editor's save writes to the LOCAL fs, so an editable remote
-    // file would silently save into the mirror).
+    // ── Remote file tab (opened by the explorer; live read + explicit edit) ──
     function RemoteFileTab(props) {
       const { tab, scope } = props
       const path = tab.path || ''
       const [data, setData] = React.useState(null)
       const [err, setErr] = React.useState('')
       const [loading, setLoading] = React.useState(true)
+      const [edit, setEdit] = React.useState(false)
+      const [draft, setDraft] = React.useState('')
+      const [saving, setSaving] = React.useState(false)
 
-      React.useEffect(() => {
+      const load = () => {
         if (!path) { setLoading(false); return }
         let cancelled = false
-        setLoading(true); setErr(''); setData(null)
+        setLoading(true); setErr(''); setData(null); setEdit(false)
         readRemoteFile(path, 256 * 1024)
           .then((d) => { if (!cancelled) { setData(d); setLoading(false) } })
           .catch((e) => { if (!cancelled) { setErr(String((e && e.message) || e)); setLoading(false) } })
         return () => { cancelled = true }
-      }, [path])
+      }
+      React.useEffect(load, [path])
+
+      const startEdit = () => {
+        if (!data || data.binary) return
+        setDraft((data.content != null ? data.content : '').replace(/\n…\[truncated:.*$/, ''))
+        setEdit(true); setErr('')
+      }
+      const saveRemote = () => {
+        setSaving(true); setErr('')
+        apiRaw('POST', '/dsh-remote/write', { path, content: draft })
+          .then((r) => {
+            if (r.status === 409) {
+              setErr(String((r.data && r.data.error) || '远端文件已变化，请重新读取'))
+              return
+            }
+            if (r.status >= 400) throw new Error((r.data && (r.data.error || r.data.message)) || 'HTTP ' + r.status)
+            setEdit(false)
+            load()
+          })
+          .catch((e) => setErr(String((e && e.message) || e)))
+          .finally(() => setSaving(false))
+      }
+      const downloadMirror = () => {
+        setSaving(true); setErr('')
+        api('POST', '/dsh-remote/fs', { op: 'download', path })
+          .then((r) => setErr('已下载到本地镜像' + (r && r.local ? ': ' + r.local : '')))
+          .catch((e) => setErr(String((e && e.message) || e)))
+          .finally(() => setSaving(false))
+      }
 
       const baseName = path.split(/[\\/]/).pop() || path
       return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 } },
         React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderBottom: '1px solid rgba(128,128,128,0.25)', fontSize: 12 } },
           React.createElement('span', { style: { fontWeight: 600, whiteSpace: 'nowrap' } }, '📄 ' + baseName),
           React.createElement('code', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', opacity: 0.75 } }, path),
-          React.createElement('span', { style: { opacity: 0.7, fontSize: 11, flexShrink: 0 } }, '只读'),
+          React.createElement('span', { style: { opacity: 0.7, fontSize: 11, flexShrink: 0 } }, edit ? '编辑中' : '只读'),
+          edit
+            ? React.createElement(React.Fragment, null,
+                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: saveRemote, disabled: saving }, saving ? '保存中…' : '保存到远程'),
+                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: () => { setEdit(false); setErr('') } }, '取消'))
+            : React.createElement(React.Fragment, null,
+                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: startEdit, disabled: !data || data.binary }, '编辑'),
+                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: downloadMirror, disabled: saving }, '下载')),
         ),
         React.createElement('div', { style: { flex: 1, overflow: 'auto', minHeight: 0 } },
           loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12, fontSize: 13 } }, '加载中…')
             : err ? React.createElement('div', { style: { color: '#e06c75', padding: 12, fontSize: 13 } }, err)
               : (data && data.binary
                   ? React.createElement('div', { style: { padding: 12, fontSize: 13, color: '#e6c07b' } },
-                      '二进制文件 (' + (data.size != null ? data.size + ' bytes' : '未知大小') + ') — 远程查看器为只读，请用 rw_download / 本地镜像查看。')
-                  : React.createElement('div', { style: { fontSize: 13, lineHeight: 1.55, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', padding: '10px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word' } },
-                      (data && data.content != null) ? data.content : '（空文件）',
-                      (data && data.truncated)
-                        ? React.createElement('div', { style: { color: '#e6c07b', fontSize: 12, marginTop: 8 } }, '… 内容已截断（只读远程查看，完整文件请用 rw_read_file / 下载）')
-                        : null,
-                    )),
+                      '二进制文件 (' + (data.size != null ? data.size + ' bytes' : '未知大小') + ') — 请用「下载」或 rw_download / 本地镜像查看。')
+                  : (edit
+                      ? React.createElement('textarea', { value: draft, onChange: (e) => setDraft(e.target.value), spellCheck: false, style: { width: '100%', height: '100%', boxSizing: 'border-box', border: 'none', outline: 'none', resize: 'none', background: 'transparent', color: '#e4e4e7', fontSize: 13, lineHeight: 1.55, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', padding: '10px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word' } })
+                      : React.createElement('div', { style: { fontSize: 13, lineHeight: 1.55, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', padding: '10px 12px', whiteSpace: 'pre-wrap', wordBreak: 'break-word' } },
+                          (data && data.content != null) ? data.content : '（空文件）',
+                          (data && data.truncated)
+                            ? React.createElement('div', { style: { color: '#e6c07b', fontSize: 12, marginTop: 8 } }, '… 内容已截断（只读远程查看，完整文件请用 rw_read_file / 下载）')
+                            : null,
+                        ))),
         ),
       )
     }
@@ -787,16 +1002,6 @@ window.__ModuleLoader__.load({
         disposers.forEach((d) => { try { d() } catch {} })
         return
       }
-      // When a remote workspace is already configured, auto-open the remote
-      // explorer tab so the sidebar shows REMOTE files (not the local mirror
-      // tree the built-in Files tab lists). openTab with a path seed expands
-      // the panel and lands the tab in the active pane (the right panel);
-      // on the single:true explorer descriptor a repeat open focuses it.
-      //
-      // Timing: at plugin apply there is usually no active session yet, so
-      // openTab would be a no-op (store.reduce without a session). Subscribe
-      // to the sidebar snapshot and open the FIRST time a session appears;
-      // the subscription is also the cleanup channel for the auto-open fiber.
       let autoOpened = false
       let disposeAuto = null
       const tryAutoOpen = () => {
@@ -837,17 +1042,6 @@ window.__ModuleLoader__.load({
           },
         ),
       )
-      // better-sidebar integration: register the remote explorer + file tabs
-      // when dsh-better-sidebar is installed. Guarded — the plugin is optional
-      // and everything above works without it.
-      //
-      // Timing: bundle order may apply dsh-remote BEFORE dsh-better-sidebar,
-      // so `ctx.get('betterSidebar')` at apply time can be undefined. Use
-      // ctx.inject (cordis: "run once the requested services are available",
-      // re-run when a required service changes) so the integration registers
-      // the moment better-sidebar provides its service; when the plugin is
-      // never installed the fiber simply never runs — the optional integration
-      // stays inert. ctx.effect inside keeps the disposer fiber-bound.
       ctx.inject(['betterSidebar'], (inner) => {
         const bsDispose = registerSidebarIntegration(inner)
         if (bsDispose) {
@@ -860,4 +1054,4 @@ window.__ModuleLoader__.load({
     exports.apply = apply
     return module.exports
   },
-})
+})