dsh-remote 0.8.18 → 0.8.20

package/lib/client.js

@@ -94,6 +94,12 @@ window.__ModuleLoader__.load({
         'settings.fwdAdd': '添加转发',
         'settings.audit': '最近执行的远程命令（审计日志）',
         'settings.auditEmpty': '暂无记录（在远端执行的命令会记录到 $DSH_HOME/remote-workspaces/audit.log）',
+        'settings.auditRefresh': '刷新日志',
+        'settings.badgePwd': '密码',
+        'settings.badgeKeychain': '钥匙串',
+        'settings.badgeProxy': '跳板',
+        'settings.sectionHide': '收起此栏',
+        'settings.sectionShow': '展开此栏',
         'settings.update': '更新',
         'settings.updateChecking': '版本信息加载中…',
         'settings.checking': '检查中…',
@@ -188,6 +194,9 @@ window.__ModuleLoader__.load({
         'picker.chooseDrive': ' 选择驱动器',
         'picker.homeBtn': '🏠',
         'picker.goHome': '回家目录',
+        'picker.hintKeys': 'Enter 确认 · Esc 关闭 · Ctrl/⌘+Enter 设为工作区',
+        'picker.star': '⭐ Star dsh-remote',
+        'picker.feedback': '反馈 / 提 issue',
         'explorer.refresh': '刷新',
         'explorer.newDir': '新建目录',
         'explorer.more': '…',
@@ -210,6 +219,9 @@ window.__ModuleLoader__.load({
         'explorer.menuDelete': '🗑 删除',
         'explorer.menuDeleteDir': '🗑 删除（含子目录）',
         'explorer.renamePrompt': '重命名为（新名字）',
+        'explorer.renameTitle': '重命名',
+        'explorer.mkdirTitle': '新建目录',
+        'explorer.namePlaceholder': '名称',
         'explorer.deleteConfirm': '确认删除 {path}？',
         'explorer.copied': '已复制',
         'explorer.tabTitle': '远程文件',
@@ -226,6 +238,8 @@ window.__ModuleLoader__.load({
         'file.empty': '（空文件）',
         'file.truncated': '… 内容已截断（只读远程查看，完整文件请用 rw_read_file / 下载）',
         'file.conflict': '远端文件已变化，请重新读取',
+        'file.dirty': '未保存',
+        'file.saveHint': 'Ctrl/⌘+S 保存',
         'file.downloaded': '已下载到本地镜像{local}',
         'file.downloadedAt': ': {path}',
         'file.readFail': '远程读取失败: {msg}',
@@ -294,6 +308,12 @@ window.__ModuleLoader__.load({
         'settings.fwdAdd': 'Add forward',
         'settings.audit': 'Recent remote commands (audit log)',
         'settings.auditEmpty': 'No records yet (commands run remotely are logged to $DSH_HOME/remote-workspaces/audit.log)',
+        'settings.auditRefresh': 'Refresh log',
+        'settings.badgePwd': 'password',
+        'settings.badgeKeychain': 'keychain',
+        'settings.badgeProxy': 'jump',
+        'settings.sectionHide': 'Collapse section',
+        'settings.sectionShow': 'Expand section',
         'settings.update': 'Update',
         'settings.updateChecking': 'Loading version info…',
         'settings.checking': 'Checking…',
@@ -388,6 +408,9 @@ window.__ModuleLoader__.load({
         'picker.chooseDrive': ' choose a drive',
         'picker.homeBtn': '🏠',
         'picker.goHome': 'Go to home',
+        'picker.hintKeys': 'Enter confirms · Esc closes · Ctrl/⌘+Enter sets workspace',
+        'picker.star': '⭐ Star dsh-remote',
+        'picker.feedback': 'Feedback / report issue',
         'explorer.refresh': 'Refresh',
         'explorer.newDir': 'New directory',
         'explorer.more': '…',
@@ -410,6 +433,9 @@ window.__ModuleLoader__.load({
         'explorer.menuDelete': '🗑 Delete',
         'explorer.menuDeleteDir': '🗑 Delete (with contents)',
         'explorer.renamePrompt': 'Rename to (new name)',
+        'explorer.renameTitle': 'Rename',
+        'explorer.mkdirTitle': 'New directory',
+        'explorer.namePlaceholder': 'Name',
         'explorer.deleteConfirm': 'Delete {path}?',
         'explorer.copied': 'Copied',
         'explorer.tabTitle': 'Remote Files',
@@ -426,6 +452,8 @@ window.__ModuleLoader__.load({
         'file.empty': ' (empty file)',
         'file.truncated': '… content truncated (read-only remote view; use rw_read_file / Download for the full file)',
         'file.conflict': 'The remote file changed, please re-read it',
+        'file.dirty': 'unsaved',
+        'file.saveHint': 'Ctrl/⌘+S to save',
         'file.downloaded': 'Downloaded to local mirror{local}',
         'file.downloadedAt': ': {path}',
         'file.readFail': 'Failed to read remote: {msg}',
@@ -525,6 +553,19 @@ window.__ModuleLoader__.load({
         ? '/api' + path : path
     }
 
+    function sessionQuery(sessionId) {
+      return sessionId ? 'sessionId=' + encodeURIComponent(sessionId) : ''
+    }
+    function withSessionQuery(path, sessionId) {
+      const q = sessionQuery(sessionId)
+      if (!q) return path
+      return path + (path.includes('?') ? '&' : '?') + q
+    }
+    function withSessionBody(body, sessionId) {
+      if (!sessionId) return body
+      return Object.assign({}, body || {}, { sessionId })
+    }
+
     async function api(method, path, body) {
       const opts = { method, headers: {} }
       if (body) { opts.headers['Content-Type'] = 'application/json'; opts.body = JSON.stringify(body) }
@@ -561,13 +602,83 @@ window.__ModuleLoader__.load({
       label: v('--dsw-alias-label-primary', '#e4e4e7'),
       primary: v('--dsw-alias-button-primary-fill', '#2563eb'),
       onPrimary: v('--dsw-alias-button-contrast-fill', '#fff'),
-      hoverBg: v('--dsw-alias-interactive-bg-hover', 'rgba(128,128,128,0.14)'),
+      // Hover tints are a neutral translucent gray rather than a theme token:
+      // the harness's own interactive-bg-hover is a 6% tint that disappears on
+      // the settings surface, while a gray overlay darkens light themes and
+      // lightens dark ones.
+      hoverBg: 'rgba(128,128,128,0.14)',
     }
     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 box = { border: '1px solid ' + T.border, borderRadius: T.radius, background: T.bg, padding: 10 }
+    const box = { border: '1px solid ' + T.border, borderRadius: 10, background: T.bg, padding: 12 }
     const boxS = box
+    const LABEL_W = 108
+    const CHROME_CSS_ID = 'dsh-remote-chrome'
+    function ensureChromeCss() {
+      try {
+        if (typeof document === 'undefined' || !document.head || typeof document.getElementById !== 'function') return
+        if (document.getElementById(CHROME_CSS_ID)) return
+        const el = document.createElement('style')
+        el.id = CHROME_CSS_ID
+        el.textContent = [
+          '.dsh-rw-btn{transition:background .12s ease,opacity .12s ease,border-color .12s ease}',
+          '.dsh-rw-btn:hover:not(:disabled){background:rgba(128,128,128,.18)}',
+          '.dsh-rw-btn:focus-visible{outline:2px solid var(--dsw-alias-button-primary-fill,#2563eb);outline-offset:1px}',
+          '.dsh-rw-btn:disabled{opacity:.45;cursor:not-allowed}',
+          // A filled primary keeps its own fill on hover; opacity is the only
+          // cue that stays visible whether that fill is near-black or near-white.
+          '.dsh-rw-primary:hover:not(:disabled){background:var(--dsw-alias-button-primary-fill,#2563eb);opacity:.85}',
+          '.dsh-rw-input{transition:border-color .12s ease,box-shadow .12s ease}',
+          '.dsh-rw-input:focus{border-color:var(--dsw-alias-button-primary-fill,#2563eb)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-button-primary-fill,#2563eb) 28%,transparent)}',
+          '.dsh-rw-row{border-radius:8px;margin:0 -6px;padding-left:8px;padding-right:8px;transition:background .12s ease}',
+          '.dsh-rw-row:hover{background:rgba(128,128,128,.14)}',
+          '.dsh-rw-list-item{transition:background .1s ease}',
+          '.dsh-rw-list-item:hover{background:rgba(128,128,128,.18)}',
+          '.dsh-rw-tabs{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:rgba(128,128,128,.14);border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.35))}',
+          '.dsh-rw-tab{border:none!important;background:transparent!important}',
+          '.dsh-rw-tab.is-active{background:var(--dsw-alias-button-primary-fill,#2563eb)!important;color:var(--dsw-alias-button-contrast-fill,#fff)!important;font-weight:600}',
+          '.dsh-rw-pill{display:inline-flex;align-items:center;font-size:11px;line-height:1.3;padding:1px 7px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.35));opacity:.9;white-space:nowrap}',
+          '.dsh-rw-pill.is-ok{color:var(--dsw-static-green-500,#4caf7d);border-color:currentColor}',
+          '.dsh-rw-section-btn{width:100%;text-align:left;display:flex;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;padding:0;color:inherit}',
+          '@keyframes dsh-rw-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}',
+          '.dsh-rw-modal-panel{animation:dsh-rw-in .14s ease-out}',
+        ].join('')
+        document.head.appendChild(el)
+      } catch { /* vm tests / no DOM */ }
+    }
+    function PromptDialog(props) {
+      const { title, initial, placeholder, onSubmit, onCancel } = props
+      const [val, setVal] = React.useState(initial || '')
+      React.useEffect(() => {
+        try {
+          if (typeof document === 'undefined') return
+          const onKey = (e) => {
+            if (e.key === 'Escape') { e.preventDefault(); onCancel() }
+            if (e.key === 'Enter') { e.preventDefault(); const t = val.trim(); if (t) onSubmit(t) }
+          }
+          document.addEventListener('keydown', onKey)
+          return () => document.removeEventListener('keydown', onKey)
+        } catch { return undefined }
+      }, [val, onSubmit, onCancel])
+      return React.createElement('div', {
+        style: { position: 'fixed', inset: 0, zIndex: 1000000, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 },
+        onClick: onCancel,
+      },
+        React.createElement('div', {
+          className: 'dsh-rw-modal-panel',
+          style: { background: v('--dsw-alias-bg-overlay', '#1e1e1e'), border: '1px solid ' + T.borderStrong, borderRadius: 10, padding: 14, width: 'min(420px, 92vw)', display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 12px 40px rgba(0,0,0,0.4)' },
+          onClick: (e) => e.stopPropagation(),
+        },
+          React.createElement('div', { style: { fontSize: 13, fontWeight: 600, color: T.label } }, title),
+          React.createElement('input', { autoFocus: true, value: val, onChange: (e) => setVal(e.target.value), placeholder: placeholder || '', className: 'dsh-rw-input', style: inputS }),
+          React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } },
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: onCancel }, tr('file.cancel')),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: () => { const t = val.trim(); if (t) onSubmit(t) }, disabled: !val.trim() }, tr('common.confirm')),
+          ),
+        ),
+      )
+    }
 
     function humanSize(n) {
       if (n == null) return ''
@@ -629,6 +740,9 @@ window.__ModuleLoader__.load({
       const [sshEntries, setSshEntries] = React.useState(null)
       const [workspaces, setWorkspaces] = React.useState([])
       const [advOpen, setAdvOpen] = React.useState(false) // 高级配置折叠
+      const [fwdOpen, setFwdOpen] = React.useState(true)
+      const [auditOpen, setAuditOpen] = React.useState(false)
+      React.useEffect(() => { ensureChromeCss() }, [])
 
       const testConn = () => {
         if (!form.host.trim() || tst === 'testing') return
@@ -771,52 +885,66 @@ window.__ModuleLoader__.load({
           .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', marginBottom: 8 } },
-        React.createElement('label', { style: { width: 84, fontSize: 12, opacity: 0.8, flexShrink: 0 } }, label), ctrl)
+      const row = (label, ctrl, k) => React.createElement('div', { key: k, style: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 } },
+        React.createElement('label', { style: { width: LABEL_W, fontSize: 12, opacity: 0.8, flexShrink: 0 } }, label), ctrl)
+      const pill = (cls, text) => React.createElement('span', { className: 'dsh-rw-pill' + (cls ? ' ' + cls : ''), style: { marginLeft: 4 } }, text)
+      const sectionToggle = (open, setOpen, title, extra) => React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: open ? 8 : 0 } },
+        React.createElement('button', {
+          type: 'button', className: 'dsh-rw-section-btn',
+          title: open ? tr('settings.sectionHide') : tr('settings.sectionShow'),
+          onClick: () => setOpen(!open),
+          style: { fontSize: 13, fontWeight: 600 },
+        }, React.createElement('span', { style: { opacity: 0.7, width: 12 } }, open ? '▾' : '▸'), title),
+        extra || null,
+      )
 
       return React.createElement('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 860 } },
-        React.createElement('div', { style: { fontSize: 15, fontWeight: 600 } }, tr('settings.title')),
-        React.createElement('div', { style: { fontSize: 12, opacity: 0.8 } },
+        React.createElement('div', { style: { fontSize: 16, fontWeight: 650, letterSpacing: '-0.01em' } }, tr('settings.title')),
+        React.createElement('div', { style: { fontSize: 12, opacity: 0.8, lineHeight: 1.55 } },
           tr('settings.intro')),
         React.createElement('div', { style: boxS },
-          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, tr('settings.machines')),
+          React.createElement('div', { style: { marginBottom: 8, fontSize: 13, fontWeight: 600 } }, tr('settings.machines')),
           machines.length
-            ? machines.map((m) => React.createElement('div', { key: m.id, style: { display: 'flex', gap: 8, alignItems: 'center', padding: '6px 0', borderBottom: '1px solid ' + T.border } },
-                React.createElement('div', { style: { flex: 1, fontSize: 13 } },
-                  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 } }, ' · ' + tr('settings.current')) : null),
-                React.createElement('button', { style: buttonS, onClick: () => startEdit(m) }, tr('settings.edit')),
-                React.createElement('button', { style: buttonS, onClick: () => del(m.id) }, tr('settings.delete')),
-                React.createElement('button', { style: { ...buttonS, padding: '6px 10px', whiteSpace: 'nowrap' }, onClick: () => useNow(m.id), disabled: m.id === currentId }, tr('settings.setCurrent'))))
+            ? machines.map((m) => React.createElement('div', { key: m.id, className: 'dsh-rw-row', style: { display: 'flex', gap: 8, alignItems: 'center', paddingTop: 8, paddingBottom: 8, borderBottom: '1px solid ' + T.border, flexWrap: 'wrap' } },
+                React.createElement('div', { style: { flex: 1, fontSize: 13, minWidth: 180 } },
+                  React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' } },
+                    React.createElement('span', { style: { fontWeight: 600 } }, m.name),
+                    React.createElement('code', { style: { fontSize: 12, opacity: 0.8 } }, m.username + '@' + m.host + ':' + m.port),
+                    m.id === currentId ? pill('is-ok', tr('settings.current')) : null,
+                    m.passwordSet ? pill('', tr('settings.badgePwd')) : null,
+                    (m.credentialBackend && m.credentialBackend !== 'plain') ? pill('', tr('settings.badgeKeychain')) : null,
+                    m.proxy && m.proxy.host ? pill('', tr('settings.badgeProxy')) : null,
+                    m.latencyMs != null ? React.createElement('span', { style: { fontSize: 11, opacity: 0.6 } }, m.latencyMs + 'ms') : null,
+                  )),
+                React.createElement('div', { style: { display: 'flex', gap: 6, flexShrink: 0 } },
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: () => startEdit(m) }, tr('settings.edit')),
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: () => del(m.id) }, tr('settings.delete')),
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn' + (m.id === currentId ? '' : ' dsh-rw-primary'), style: { ...(m.id === currentId ? buttonS : primaryBtnS), padding: '6px 10px', whiteSpace: 'nowrap' }, onClick: () => useNow(m.id), disabled: m.id === currentId }, tr('settings.setCurrent')))))
             : React.createElement('div', { style: { opacity: 0.6, fontSize: 12 } }, tr('settings.noMachines')),
           currentId
-            ? React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center', paddingTop: 6, fontSize: 12, color: T.ok } },
+            ? React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center', paddingTop: 10, fontSize: 12, color: T.ok } },
                 tr('settings.currentMachine', { name: ((machines.find((m) => m.id === currentId) || {}).name || currentId) }),
-                React.createElement('button', { style: { ...buttonS, padding: '2px 8px', fontSize: 12, marginLeft: 'auto' }, onClick: clearCurrent }, tr('settings.clearCurrent')))
-            : React.createElement('div', { style: { paddingTop: 6, fontSize: 12, opacity: 0.6 } }, tr('settings.noActive')),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px', fontSize: 12, marginLeft: 'auto' }, onClick: clearCurrent }, tr('settings.clearCurrent')))
+            : React.createElement('div', { style: { paddingTop: 10, fontSize: 12, opacity: 0.6 } }, tr('settings.noActive')),
           ),
         React.createElement('div', { style: boxS },
           React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 } },
             React.createElement('div', { style: { fontSize: 13, fontWeight: 600 } }, form.id ? tr('settings.editMachine') : tr('settings.addMachine')),
-            React.createElement('button', { style: { ...buttonS, fontSize: 12, padding: '3px 8px' }, onClick: () => (sshEntries ? setSshEntries(null) : importSsh()) }, sshEntries ? tr('settings.sshCollapse') : tr('settings.sshImport'))),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, fontSize: 12, padding: '3px 8px' }, onClick: () => (sshEntries ? setSshEntries(null) : importSsh()) }, sshEntries ? tr('settings.sshCollapse') : tr('settings.sshImport'))),
           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 } },
+            sshEntries.length ? sshEntries.map((e) => React.createElement('div', { key: e.host, className: 'dsh-rw-list-item', 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 } }, tr('settings.sshNoEntries')))
           : null,
-          row(tr('settings.name'), React.createElement('input', { value: form.name, onChange: setF('name'), placeholder: tr('settings.name') + ' (e.g. build-server)', style: inputS }), 'n'),
-          row(tr('settings.host'), React.createElement('input', { value: form.host, onChange: setF('host'), placeholder: 'IP or hostname', style: inputS }), 'h'),
-          row(tr('settings.port'), React.createElement('input', { value: form.port, onChange: setF('port'), placeholder: '22', style: { ...inputS, width: 70 } }), 'p'),
-          row(tr('settings.user'), React.createElement('input', { value: form.username, onChange: setF('username'), placeholder: 'root', style: inputS }), 'u'),
-          row(tr('settings.password'), React.createElement('input', { type: 'password', value: form.password, onChange: setF('password'), placeholder: 'SSH password (hidden)', style: inputS }), 'w'),
+          row(tr('settings.name'), React.createElement('input', { className: 'dsh-rw-input', value: form.name, onChange: setF('name'), placeholder: tr('settings.name') + ' (e.g. build-server)', style: inputS }), 'n'),
+          row(tr('settings.host'), React.createElement('input', { className: 'dsh-rw-input', value: form.host, onChange: setF('host'), placeholder: 'IP or hostname', style: inputS }), 'h'),
+          row(tr('settings.port'), React.createElement('input', { className: 'dsh-rw-input', value: form.port, onChange: setF('port'), placeholder: '22', style: { ...inputS, width: 70 } }), 'p'),
+          row(tr('settings.user'), React.createElement('input', { className: 'dsh-rw-input', value: form.username, onChange: setF('username'), placeholder: 'root', style: inputS }), 'u'),
+          row(tr('settings.password'), React.createElement('input', { className: 'dsh-rw-input', type: 'password', value: form.password, onChange: setF('password'), placeholder: 'SSH password (hidden)', style: inputS }), 'w'),
           // 高级配置折叠开关
           React.createElement('button', {
             type: 'button',
+            className: 'dsh-rw-btn',
             onClick: () => setAdvOpen(!advOpen),
             style: { ...buttonS, width: '100%', marginBottom: advOpen ? 10 : 0, color: advOpen ? T.primary : 'inherit', fontWeight: advOpen ? 600 : 400, borderStyle: 'dashed' },
           }, advOpen ? tr('settings.advCollapse') : tr('settings.advExpand')),
@@ -829,7 +957,7 @@ window.__ModuleLoader__.load({
               React.createElement('option', { value: 'accept-new' }, tr('settings.hkAccept')),
               React.createElement('option', { value: 'verify' }, tr('settings.hkVerify')),
               React.createElement('option', { value: 'off' }, tr('settings.hkOff'))), 'hkm'),
-            React.createElement('div', { style: { display: 'flex', gap: 16, paddingLeft: 90, flexWrap: 'wrap', marginBottom: 8 } },
+            React.createElement('div', { style: { display: 'flex', gap: 16, paddingLeft: LABEL_W + 8, flexWrap: 'wrap', marginBottom: 8 } },
               React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
                 React.createElement('input', { type: 'checkbox', checked: form.useAgent, onChange: setFb('useAgent') }), tr('settings.agent')),
               React.createElement('label', { style: { fontSize: 12, display: 'flex', gap: 4, alignItems: 'center' } },
@@ -843,13 +971,13 @@ window.__ModuleLoader__.load({
               React.createElement('input', { type: 'password', value: form.proxyPassword, onChange: setF('proxyPassword'), placeholder: 'Jump password', style: { ...inputS, minWidth: 140 } })), 'pu'),
             row(tr('settings.proxyKey'), React.createElement('input', { value: form.proxyKey, onChange: setF('proxyKey'), placeholder: 'Jump private key path (optional)', style: inputS }), 'pk'),
           ) : null,
-          React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', flexWrap: 'wrap', marginTop: 4 } },
+          React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', flexWrap: 'wrap', marginTop: 8 } },
             msg ? React.createElement('span', { style: { color: T.ok, fontSize: 12, marginRight: 'auto' } }, msg) : null,
-            form.id ? React.createElement('button', { style: buttonS, onClick: () => save('delete') }, tr('settings.delete')) : null,
-            React.createElement('button', { style: buttonS, onClick: () => { clearForm(); setErr(''); setTst('idle'); setAdvOpen(false) } }, form.id ? tr('settings.cancelEdit') : tr('settings.clear')),
-            React.createElement('button', { style: { ...buttonS, fontFamily: 'monospace', whiteSpace: 'nowrap' }, onClick: testConn, disabled: busy || !form.host.trim() || tst === 'testing' },
+            form.id ? React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: () => save('delete') }, tr('settings.delete')) : null,
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: () => { clearForm(); setErr(''); setTst('idle'); setAdvOpen(false) } }, form.id ? tr('settings.cancelEdit') : tr('settings.clear')),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, fontFamily: 'monospace', whiteSpace: 'nowrap' }, onClick: testConn, disabled: busy || !form.host.trim() || tst === 'testing' },
               tst === 'testing' ? tr('settings.testing') : tst === 'ok' ? tr('settings.testOk') : tr('settings.testConn')),
-            React.createElement('button', { style: { ...buttonS, fontWeight: 700 }, onClick: () => save(form.id ? 'update' : 'add'), disabled: busy || !form.host.trim() }, busy ? tr('settings.saving') : tr('settings.save')),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: () => save(form.id ? 'update' : 'add'), disabled: busy || !form.host.trim() }, busy ? tr('settings.saving') : tr('settings.save')),
           ),
         ),
         // 快捷切换工作区（该机器的最近工作区）
@@ -857,35 +985,40 @@ window.__ModuleLoader__.load({
           React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, tr('settings.recentWorkspaces')),
           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) }, tr('settings.switch'))))) : null,
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 10px' }, onClick: () => setWorkspaceNow(w) }, tr('settings.switch'))))) : null,
         // 端口转发面板
         React.createElement('div', { style: boxS },
-          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, tr('settings.forwards')),
-          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 ? ' [auto]' : ''}`),
-            f.active
-              ? React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('stop', f.id) }, tr('settings.fwdStop'))
-              : React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('start', f.id) }, tr('settings.fwdStart')),
-            React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('remove', f.id) }, tr('settings.fwdRemove')))) : 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' }, tr('settings.fwdDirLocal')),
-              React.createElement('option', { value: 'reverse' }, tr('settings.fwdDirReverse'))),
-            React.createElement('input', { value: fwdForm.listenPort, onChange: (e) => setFwdForm({ ...fwdForm, listenPort: e.target.value }), placeholder: tr('settings.fwdListen'), style: { ...inputS, maxWidth: 90 } }),
-            React.createElement('input', { value: fwdForm.targetHost, onChange: (e) => setFwdForm({ ...fwdForm, targetHost: e.target.value }), placeholder: tr('settings.fwdTargetHost'), style: { ...inputS, maxWidth: 120 } }),
-            React.createElement('input', { value: fwdForm.targetPort, onChange: (e) => setFwdForm({ ...fwdForm, targetPort: e.target.value }), placeholder: tr('settings.fwdTargetPort'), 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 }) }), tr('settings.fwdAuto')),
-            React.createElement('button', { style: { ...buttonS, fontWeight: 700 }, onClick: fwdDefine, disabled: !fwdForm.listenPort }, tr('settings.fwdAdd'))),
+          sectionToggle(fwdOpen, setFwdOpen, tr('settings.forwards')),
+          fwdOpen ? React.createElement(React.Fragment, null,
+            forwards.length ? forwards.map((f) => React.createElement('div', { key: f.id, className: 'dsh-rw-row', style: { display: 'flex', gap: 8, alignItems: 'center', padding: '6px 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 ? ' [auto]' : ''}`),
+              f.active
+                ? React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('stop', f.id) }, tr('settings.fwdStop'))
+                : React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('start', f.id) }, tr('settings.fwdStart')),
+              React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px' }, onClick: () => fwdAction('remove', f.id) }, tr('settings.fwdRemove')))) : null,
+            React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', marginTop: 6, flexWrap: 'wrap' } },
+              React.createElement('select', { className: 'dsh-rw-input', value: fwdForm.direction, onChange: (e) => setFwdForm({ ...fwdForm, direction: e.target.value }), style: { ...inputS, maxWidth: 110 } },
+                React.createElement('option', { value: 'local' }, tr('settings.fwdDirLocal')),
+                React.createElement('option', { value: 'reverse' }, tr('settings.fwdDirReverse'))),
+              React.createElement('input', { className: 'dsh-rw-input', value: fwdForm.listenPort, onChange: (e) => setFwdForm({ ...fwdForm, listenPort: e.target.value }), placeholder: tr('settings.fwdListen'), style: { ...inputS, maxWidth: 90 } }),
+              React.createElement('input', { className: 'dsh-rw-input', value: fwdForm.targetHost, onChange: (e) => setFwdForm({ ...fwdForm, targetHost: e.target.value }), placeholder: tr('settings.fwdTargetHost'), style: { ...inputS, maxWidth: 120 } }),
+              React.createElement('input', { className: 'dsh-rw-input', value: fwdForm.targetPort, onChange: (e) => setFwdForm({ ...fwdForm, targetPort: e.target.value }), placeholder: tr('settings.fwdTargetPort'), 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 }) }), tr('settings.fwdAuto')),
+              React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: fwdDefine, disabled: !fwdForm.listenPort }, tr('settings.fwdAdd'))),
+          ) : null,
         ),
         // 审计日志
         React.createElement('div', { style: boxS },
-          React.createElement('div', { style: { marginBottom: 6, fontSize: 13, fontWeight: 600 } }, tr('settings.audit')),
-          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 } }, tr('settings.auditEmpty')),
+          sectionToggle(auditOpen, setAuditOpen, tr('settings.audit'),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px', fontSize: 12, marginLeft: 'auto' }, onClick: (e) => { e.stopPropagation(); api('GET', '/dsh-remote/audit?limit=30').then((r) => setAuditLines(r.lines || [])).catch(() => {}) } }, tr('settings.auditRefresh'))),
+          auditOpen
+            ? (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 } }, tr('settings.auditEmpty')))
+            : React.createElement('div', { style: { fontSize: 11, opacity: 0.55 } }, String(auditLines.length)),
         ),
         err ? React.createElement('div', { style: { color: T.danger, fontSize: 13 } }, err) : null,
         React.createElement('div', { style: boxS },
@@ -896,9 +1029,9 @@ window.__ModuleLoader__.load({
                   '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 } }, tr('settings.updateChecking')),
-            React.createElement('button', { style: { ...buttonS, padding: '2px 10px' }, onClick: () => checkUpdate(false), disabled: updBusy }, updBusy ? tr('settings.checking') : tr('settings.checkUpdate')),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 10px' }, onClick: () => checkUpdate(false), disabled: updBusy }, updBusy ? tr('settings.checking') : tr('settings.checkUpdate')),
             upd && upd.updateAvailable
-              ? React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontWeight: 700, color: T.ok }, onClick: applyUpdateNow, disabled: updBusy }, tr('settings.updateNow'))
+              ? React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: { ...primaryBtnS, padding: '2px 10px' }, onClick: applyUpdateNow, disabled: updBusy }, tr('settings.updateNow'))
               : null,
           ),
           React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center', marginTop: 6, fontSize: 12 } },
@@ -993,6 +1126,7 @@ window.__ModuleLoader__.load({
       // 本机浏览浮层（browse 后端）：{ path, home, crumbs, entries, truncated }。
       const [localPop, setLocalPop] = React.useState(null)
       const [newDirName, setNewDirName] = React.useState('')
+      const [mkdirPrompt, setMkdirPrompt] = React.useState(false)
       const suggestTimer = React.useRef(null)
       const suggestRef = React.useRef(null)
       React.useEffect(() => {
@@ -1009,6 +1143,7 @@ window.__ModuleLoader__.load({
         document.addEventListener('mousedown', onDown)
         return () => document.removeEventListener('mousedown', onDown)
       }, [mOpen])
+      React.useEffect(() => { if (open) ensureChromeCss() }, [open])
 
       const sortItems = (list) => {
         const dirs = list.filter((it) => it.dir)
@@ -1235,10 +1370,16 @@ window.__ModuleLoader__.load({
       const mkdirHere = () => {
         const last = levels && levels.length ? levels[levels.length - 1] : null
         const base = (last && last.path) || '/'
-        const nm = window.prompt(tr('picker.newDirName', { path: base }))
-        if (!nm || !nm.trim()) return
+        setMkdirPrompt({ base })
+      }
+      const confirmMkdirHere = (nm) => {
+        const last = levels && levels.length ? levels[levels.length - 1] : null
+        const base = (mkdirPrompt && mkdirPrompt.base) || (last && last.path) || '/'
+        setMkdirPrompt(false)
+        const name = String(nm || '').trim()
+        if (!name) return
         const sep = base.includes('\\') ? '\\' : '/'
-        const full = base === '/' ? '/' + nm.trim() : base + sep + nm.trim()
+        const full = base === '/' ? '/' + name : base + sep + name
         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)))
@@ -1297,6 +1438,7 @@ window.__ModuleLoader__.load({
                 : (cur.entries.length ? cur.entries.slice(0, 400).map((it, i) => React.createElement('div', {
                     key: it.path || i, title: tr('picker.enterDir', { name: it.name }),
                     onClick: () => loadLocal(it.path),
+                    className: 'dsh-rw-list-item',
                     style: { padding: '7px 12px', cursor: 'pointer', 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, '📁'),
@@ -1306,10 +1448,10 @@ window.__ModuleLoader__.load({
             ),
             err ? React.createElement('div', { style: { color: T.danger, fontSize: 12, padding: '4px 12px' } }, err) : null,
             React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '8px 12px', borderTop: '1px solid ' + T.border } },
-              React.createElement('input', { value: newDirName, onChange: (e) => setNewDirName(e.target.value), placeholder: tr('picker.newFolder'), style: { ...inputS, width: 110, flex: '0 0 auto', padding: '4px 8px', fontSize: 12 } }),
-              React.createElement('button', { style: { ...buttonS, padding: '4px 10px', whiteSpace: 'nowrap' }, onClick: mkdirLocal, disabled: loading || !newDirName.trim() || !cur.path }, tr('picker.create')),
+              React.createElement('input', { className: 'dsh-rw-input', value: newDirName, onChange: (e) => setNewDirName(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter') mkdirLocal() }, placeholder: tr('picker.newFolder'), style: { ...inputS, width: 110, flex: '0 0 auto', padding: '4px 8px', fontSize: 12 } }),
+              React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '4px 10px', whiteSpace: 'nowrap' }, onClick: mkdirLocal, disabled: loading || !newDirName.trim() || !cur.path }, tr('picker.create')),
               React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, tr('picker.selected', { path: cur.path })),
-              React.createElement('button', { style: { ...buttonS, fontWeight: 600, whiteSpace: 'nowrap' }, onClick: () => acceptLocalPick(cur.path) }, tr('picker.chooseThis')),
+              React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: { ...primaryBtnS, whiteSpace: 'nowrap' }, onClick: () => acceptLocalPick(cur.path) }, tr('picker.chooseThis')),
             ),
           ),
         )
@@ -1333,6 +1475,7 @@ window.__ModuleLoader__.load({
               : (entries.length ? entries.slice(0, 400).map((it, i) => React.createElement('div', {
                   key: i, title: it.drive ? tr('picker.enterDrive', { name: it.name }) : (it.dir ? tr('picker.enterDir', { name: it.name }) : tr('picker.fileAt', { name: it.name })),
                   onClick: it.dir ? () => enterDir(it) : undefined,
+                  className: it.dir ? 'dsh-rw-list-item' : undefined,
                   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', { style: { flexShrink: 0, display: 'inline-flex', color: T.label, fontSize: 13 } }, it.drive ? '💽' : (it.dir
@@ -1344,31 +1487,59 @@ window.__ModuleLoader__.load({
           ),
           React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', padding: '6px 10px', borderTop: '1px solid ' + T.border } },
             React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, tr('picker.selected', { path: (last.path || (win ? tr('picker.driveRoot') : '/')) })),
-            React.createElement('button', { style: { ...buttonS, fontWeight: 600 }, onClick: () => { acceptBrowserPick(last.path); setPopOpen(false) } }, tr('picker.chooseThis')),
+            React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: () => { acceptBrowserPick(last.path); setPopOpen(false) } }, tr('picker.chooseThis')),
           ),
         )
       }
 
+      React.useEffect(() => {
+        if (!open) return
+        try {
+          if (typeof document === 'undefined') return
+          const onKey = (e) => {
+            if (mkdirPrompt) return
+            if (e.key === 'Escape') {
+              if (popOpen) { e.preventDefault(); setPopOpen(false); return }
+              if (suggestOpen) { e.preventDefault(); setSuggestOpen(false); return }
+              if (!busy) { e.preventDefault(); onCancel() }
+              return
+            }
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault()
+              if (tab === 'local' && path.trim()) onPicked(path)
+              else if (tab === 'remote' && path.trim()) commitPath(path)
+            }
+          }
+          document.addEventListener('keydown', onKey)
+          return () => document.removeEventListener('keydown', onKey)
+        } catch { return undefined }
+      }, [open, busy, tab, path, machineId, popOpen, suggestOpen, mkdirPrompt])
+
       if (!open) return null
-      const tabBtn = (t, lbl) => React.createElement('button', { onClick: () => switchTab(t), style: { ...buttonS, fontWeight: tab === t ? 700 : 400 } }, lbl)
-      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(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, tr('picker.title')),
-          React.createElement('button', { style: { ...buttonS, padding: '2px 8px' }, onClick: () => { if (!busy) onCancel() }, disabled: busy }, tr('picker.close')),
+      const tabBtn = (t, lbl) => React.createElement('button', {
+        type: 'button',
+        className: 'dsh-rw-btn dsh-rw-tab' + (tab === t ? ' is-active' : ''),
+        onClick: () => switchTab(t),
+        style: { ...buttonS, fontWeight: tab === t ? 700 : 400, padding: '5px 14px' },
+      }, lbl)
+      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 && !mkdirPrompt) onCancel() } },
+        React.createElement('div', { className: 'dsh-rw-modal-panel', style: { background: v('--dsw-alias-bg-layer-1', '#18181b'), color: T.label, 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: 10 } },
+          React.createElement('div', { style: { fontSize: 15, fontWeight: 650 } }, tr('picker.title')),
+          React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 8px' }, onClick: () => { if (!busy) onCancel() }, disabled: busy }, tr('picker.close')),
         ),
-        React.createElement('div', { style: { display: 'flex', gap: 6, marginBottom: 8 } },
+        React.createElement('div', { className: 'dsh-rw-tabs', style: { marginBottom: 10, alignSelf: 'flex-start' } },
           tabBtn('local', tr('picker.tabLocal')),
           tabBtn('remote', tr('picker.tabRemote')),
         ),
         tab === 'local'
           ? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
-              React.createElement('div', { style: { fontSize: 12, opacity: 0.8 } }, tr('picker.localIntro')),
+              React.createElement('div', { style: { fontSize: 12, opacity: 0.8, lineHeight: 1.5 } }, tr('picker.localIntro')),
               React.createElement('div', { style: { display: 'flex', gap: 6 } },
-                React.createElement('input', { value: path, onChange: (e) => setPath(e.target.value), placeholder: tr('picker.localPlaceholder'), style: inputS }),
-                React.createElement('button', { style: buttonS, onClick: () => (path.trim() ? onPicked(path) : undefined), disabled: !path.trim() }, tr('picker.useLocalPath')),
+                React.createElement('input', { className: 'dsh-rw-input', value: path, onChange: (e) => setPath(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter' && path.trim()) { e.preventDefault(); onPicked(path) } }, placeholder: tr('picker.localPlaceholder'), style: inputS }),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: () => (path.trim() ? onPicked(path) : undefined), disabled: !path.trim() }, tr('picker.useLocalPath')),
               ),
-              React.createElement('button', { style: { ...buttonS, alignSelf: 'flex-start' }, onClick: chooseLocal, disabled: loading }, loading ? tr('picker.opening') : tr('picker.openSysPicker')),
+              React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, alignSelf: 'flex-start' }, onClick: chooseLocal, disabled: loading }, loading ? tr('picker.opening') : tr('picker.openSysPicker')),
               err ? React.createElement('div', { style: { color: T.danger, fontSize: 12 } }, err) : null,
               localPop ? renderLocalPopup() : null,
             )
@@ -1376,31 +1547,44 @@ window.__ModuleLoader__.load({
               React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
                 React.createElement('label', { style: { fontSize: 12, opacity: 0.8, whiteSpace: 'nowrap' } }, tr('picker.remoteMachine')),
                 React.createElement('div', { ref: ddRef, style: { position: 'relative', display: 'inline-block' } },
-                  React.createElement('button', { style: { ...inputS, textAlign: 'left', cursor: 'pointer', minWidth: 200, maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, onClick: () => setMOpen((x) => !x) },
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...inputS, textAlign: 'left', cursor: 'pointer', minWidth: 200, maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, onClick: () => setMOpen((x) => !x) },
                     (machines.find((m) => m.id === machineId) || {}).name || (machineId ? '…' : tr('picker.chooseMachine')),
                   ),
                   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 } },
+                    ? 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'), color: T.label, 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); setRecent(m.recentWorkspaces || []); setLevels(null); setPath(''); setMOpen(false); if (m.id) loadLevels(m.id, '', 0) }, 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, className: 'dsh-rw-list-item', onClick: () => { setMachineId(m.id); setRecent(m.recentWorkspaces || []); setLevels(null); setPath(''); setMOpen(false); if (m.id) loadLevels(m.id, '', 0) }, 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 } }, tr('picker.noMachines')),
                       )
                     : null,
                 ),
               ),
-              // 最近工作区快捷入口
               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' } }, tr('picker.recent')),
-                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,
+                recent.map((w, i) => React.createElement('button', { type: 'button', className: 'dsh-rw-btn', 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, flexWrap: 'wrap' } },
-                  React.createElement('input', { value: path, onChange: (e) => onPathChange(e.target.value), onFocus: () => loadSuggestions(path), placeholder: (machineId ? (win ? tr('picker.pathPlaceholderWin') : tr('picker.pathPlaceholder')) : tr('picker.chooseMachineFirst')), disabled: !machineId, style: { ...inputS, flex: 1, minWidth: 120 } }),
-                  React.createElement('button', { style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: () => { if (!machineId) return; const p = path.trim(); loadLevels(machineId, p || '', 0); setPopOpen(true) }, disabled: !machineId }, tr('picker.browse')),
-                  React.createElement('button', { style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: pickHome, disabled: !machineId }, tr('picker.home')),
+                  React.createElement('input', {
+                    className: 'dsh-rw-input',
+                    value: path,
+                    onChange: (e) => onPathChange(e.target.value),
+                    onFocus: () => loadSuggestions(path),
+                    onKeyDown: (e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        if (suggestOpen && suggest.length) selectSuggestion(suggest[0])
+                        else if (path.trim()) commitPath(path)
+                      }
+                    },
+                    placeholder: (machineId ? (win ? tr('picker.pathPlaceholderWin') : tr('picker.pathPlaceholder')) : tr('picker.chooseMachineFirst')),
+                    disabled: !machineId, style: { ...inputS, flex: 1, minWidth: 120 },
+                  }),
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: () => { if (!machineId) return; const p = path.trim(); loadLevels(machineId, p || '', 0); setPopOpen(true) }, disabled: !machineId }, tr('picker.browse')),
+                  React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, whiteSpace: 'nowrap' }, onClick: pickHome, disabled: !machineId }, tr('picker.home')),
                 ),
                 (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)),
+                  ? React.createElement('div', { style: { marginTop: 6, background: v('--dsw-alias-bg-overlay', '#1e1e1e'), color: T.label, 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, className: 'dsh-rw-list-item', onMouseDown: () => selectSuggestion(s), style: { padding: '6px 10px', cursor: 'pointer', fontSize: 12, fontFamily: 'monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, s)),
                     )
                   : null,
               ),
@@ -1408,15 +1592,22 @@ window.__ModuleLoader__.load({
               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' } },
                 React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, path ? tr('picker.selected', { path }) : ''),
-                React.createElement('button', { style: { ...buttonS, fontWeight: 600 }, onClick: () => commitPath(path), disabled: busy || !machineId || !path.trim() }, busy ? tr('picker.mirroring') : tr('picker.setRemoteWs')),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: primaryBtnS, onClick: () => commitPath(path), disabled: busy || !machineId || !path.trim() }, busy ? tr('picker.mirroring') : tr('picker.setRemoteWs')),
               ),
             ),
-        (tab === 'local') ? React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } }, React.createElement('button', { style: { background: 'transparent' }, onClick: onCancel }, tr('picker.cancel'))) : null,
+        React.createElement('div', { style: { fontSize: 11, opacity: 0.55, paddingTop: 8 } }, tr('picker.hintKeys')),
+        (tab === 'local') ? React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } }, React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: buttonS, onClick: onCancel }, tr('picker.cancel'))) : null,
         React.createElement('div', { style: { display: 'flex', gap: 10, justifyContent: 'center', alignItems: 'center', paddingTop: 6, fontSize: 10, opacity: 0.5 } },
-          React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, '⭐ Star dsh-remote'),
+          React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, tr('picker.star')),
           React.createElement('span', {}, '·'),
-          React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote/issues/new', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, 'Feedback / report issue'),
+          React.createElement('a', { href: 'https://github.com/flymysql/dsh-remote/issues/new', target: '_blank', rel: 'noopener noreferrer', style: { color: 'inherit' } }, tr('picker.feedback')),
         ),
+        mkdirPrompt ? React.createElement(PromptDialog, {
+          title: tr('picker.newDirName', { path: mkdirPrompt.base || '/' }),
+          placeholder: tr('explorer.namePlaceholder'),
+          onSubmit: confirmMkdirHere,
+          onCancel: () => setMkdirPrompt(false),
+        }) : null,
         ),
       )
     }
@@ -1425,8 +1616,8 @@ window.__ModuleLoader__.load({
     const SIDEBAR_EXPLORER_ID = 'dsh-remote:explorer'
     const SIDEBAR_FILE_ID = 'dsh-remote:file'
 
-    function fetchRemoteStatus() {
-      return api('GET', '/dsh-remote/status').catch(() => null)
+    function fetchRemoteStatus(sessionId) {
+      return api('GET', withSessionQuery('/dsh-remote/status', sessionId)).catch(() => null)
     }
 
     // Resolve the remote path this session shows. Issue #13: the ONLY source
@@ -1458,14 +1649,14 @@ window.__ModuleLoader__.load({
         .catch(() => '')
     }
 
-    function readRemoteFile(path, maxBytes) {
-      return api('POST', '/dsh-remote/read', { path, maxBytes }).catch((e) => {
+    function readRemoteFile(path, maxBytes, sessionId) {
+      return api('POST', '/dsh-remote/read', withSessionBody({ path, maxBytes }, sessionId)).catch((e) => {
         throw new Error(tr('file.readFail', { msg: ((e && e.message) || e) }))
       })
     }
 
-    function listRemoteDir(path) {
-      return api('GET', '/dsh-remote/ls?path=' + encodeURIComponent(path || '')).catch((e) => {
+    function listRemoteDir(path, sessionId) {
+      return api('GET', withSessionQuery('/dsh-remote/ls?path=' + encodeURIComponent(path || ''), sessionId)).catch((e) => {
         throw new Error(tr('file.listFail', { msg: ((e && e.message) || e) }))
       })
     }
@@ -1675,7 +1866,11 @@ window.__ModuleLoader__.load({
       const [hoverPath, setHoverPath] = React.useState('') // row hover highlight
       /** Row whose path was just copied — shows a brief「已复制」label. */
       const [copiedPath, setCopiedPath] = React.useState('')
+      const [namePrompt, setNamePrompt] = React.useState(null) // { kind, path, name }
+      React.useEffect(() => { ensureChromeCss() }, [])
       const expanded = Array.isArray(props.expanded) ? props.expanded : []
+      const scopeCwd = props.scope && props.scope.cwd
+      const sessionId = props.scope && props.scope.sessionId
 
       const storeLevel = (path, level) => {
         dataRef.current = { ...dataRef.current, [path]: level }
@@ -1691,7 +1886,7 @@ window.__ModuleLoader__.load({
         if (existing && !existing.loading && opts && opts.keep) return
         if (cur[dir] !== undefined && !cur[dir].loading) return
         storeLevel(dir, { loading: true })
-        listRemoteDir(dir)
+        listRemoteDir(dir, sessionId)
           .then((res) => {
             const items = Array.isArray(res && res.items) ? res.items : []
             const sorted = items.slice().sort((a, b) => {
@@ -1712,14 +1907,12 @@ window.__ModuleLoader__.load({
               storeLevel(dir, { error: String((e && e.message) || e) })
             }
           })
-      }, [])
+      }, [sessionId])
 
       // 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 rootRef = React.useRef('')
       const refreshStatus = React.useCallback((opts) => {
         const applyRoot = (r, connected) => {
@@ -1739,14 +1932,17 @@ window.__ModuleLoader__.load({
             // Not connected (e.g. freshly restarted, machine no longer active):
             // show a clear disconnected state instead of firing ls requests
             // that all fail with AggregateError / 500 in a loop.
-            if (!connected) {
+            // A bound remote session lists on demand even if this process has
+            // not yet opened the SSH socket; only an unbound/disconnected
+            // machine-scoped view should show the empty "未连接" state.
+            if (!connected && !sessionId) {
               storeLevel(r, { error: tr('explorer.notConnected') })
               return
             }
             if (!sameRoot) {
               storeLevel(r, { loading: true })
             }
-            listRemoteDir(r)
+            listRemoteDir(r, sessionId)
               .then((res) => {
                 const items = Array.isArray(res && res.items) ? res.items : []
                 const sorted = items.slice().sort((a, b) => {
@@ -1779,7 +1975,7 @@ window.__ModuleLoader__.load({
           return Promise.resolve('')
         }
         resolveRoot().then((r) => {
-          fetchRemoteStatus().then((s) => {
+          fetchRemoteStatus(sessionId).then((s) => {
             setStatus(s)
             // Issue #13: NEVER fall back to the machine-level workspace here —
             // a session whose cwd is not a mirror is a LOCAL session and shows
@@ -1807,12 +2003,12 @@ window.__ModuleLoader__.load({
         const host = document.createElement('div')
         host.style.cssText = 'position:fixed;z-index:999999;pointer-events:auto'
         const box = document.createElement('div')
-        box.style.cssText = 'position:fixed;left:' + menu.x + 'px;top:' + menu.y + 'px;z-index:999999;background:#1f1f23;border:1px solid rgba(128,128,128,0.5);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,0.4);min-width:170;font-family:system-ui,sans-serif'
+        box.style.cssText = 'position:fixed;left:' + menu.x + 'px;top:' + menu.y + 'px;z-index:999999;background:var(--dsw-alias-bg-overlay,#1f1f23);border:1px solid var(--dsw-alias-border-l3,rgba(128,128,128,0.5));border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,0.4);min-width:170px;font-family:system-ui,sans-serif;color:var(--dsw-alias-label-primary,#e4e4e7)'
         const mkItem = (label, danger, fn) => {
           const d = document.createElement('div')
           d.textContent = label
-          d.style.cssText = 'padding:6px 10px;cursor:pointer;font-size:12px;color:' + (danger ? '#e06c75' : '#e4e4e7') + ';border-radius:4px;white-space:nowrap;transition:background 0.1s'
-          d.onmouseenter = () => { d.style.background = 'rgba(128,128,128,0.14)' }
+          d.style.cssText = 'padding:6px 10px;cursor:pointer;font-size:12px;color:' + (danger ? 'var(--dsw-static-red-400,#e06c75)' : 'inherit') + ';border-radius:4px;white-space:nowrap;transition:background 0.1s'
+          d.onmouseenter = () => { d.style.background = 'var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,0.14))' }
           d.onmouseleave = () => { d.style.background = 'transparent' }
           d.addEventListener('click', (e) => { e.stopPropagation(); setMenu(null); fn() })
           return d
@@ -1821,7 +2017,7 @@ window.__ModuleLoader__.load({
         box.appendChild(mkItem(tr('explorer.menuDownload'), false, () => doFs('download', { path: menu.path })))
         box.appendChild(mkItem(tr('explorer.menuCopyRel'), false, () => copyPath(relPath(menu.path), menu.path)))
         box.appendChild(mkItem(tr('explorer.menuCopyAbs'), false, () => copyPath(menu.path, menu.path)))
-        box.appendChild(mkItem(tr('explorer.menuRename'), false, () => { const nm = window.prompt(tr('explorer.renamePrompt'), menu.name); if (nm && nm.trim() && nm.trim() !== menu.name) doFs('rename', { path: menu.path, dest: joinRemote(String(menu.path).replace(/[\\/][^\\/]*$/, ''), nm.trim()) }, true) }))
+        box.appendChild(mkItem(tr('explorer.menuRename'), false, () => { setNamePrompt({ kind: 'rename', path: menu.path, name: menu.name }) }))
         box.appendChild(mkItem(menu.isDir ? tr('explorer.menuDeleteDir') : tr('explorer.menuDelete'), true, () => { if (window.confirm(tr('explorer.deleteConfirm', { path: menu.path }))) doFs('remove', { path: menu.path }, true) }))
         host.appendChild(box)
         document.body.appendChild(host)
@@ -1839,7 +2035,7 @@ window.__ModuleLoader__.load({
 
       const doFs = (op, payload, refreshParent) => {
         setBusy(op)
-        return api('POST', '/dsh-remote/fs', { op, ...payload })
+        return api('POST', '/dsh-remote/fs', withSessionBody({ op, ...payload }, sessionId))
           .then(() => {
             setErr('')
             if (refreshParent) {
@@ -1859,7 +2055,8 @@ window.__ModuleLoader__.load({
       }
       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' },
+        className: 'dsh-rw-list-item',
+        style: { padding: '6px 10px', cursor: 'pointer', fontSize: 12, color: danger ? T.danger : T.label, borderRadius: 4, whiteSpace: 'nowrap' },
       }, label)
 
       // The path shown by「复制相对地址」: relative to this session's remote
@@ -1949,11 +2146,11 @@ window.__ModuleLoader__.load({
           return React.createElement('div', { key: dir + ':missing', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 13, opacity: 0.6 } }, tr('explorer.dirMissing'))
         }
         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)
+          return React.createElement('div', { key: dir + ':err', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 13, color: T.danger } }, level.error)
         }
         const items = level.entries || []
         const soft = level.softError
-          ? React.createElement('div', { key: dir + ':softerr', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 11, opacity: 0.6, color: '#e6c07b' } }, tr('explorer.softError', { msg: level.softError }))
+            ? React.createElement('div', { key: dir + ':softerr', style: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', paddingLeft: depth * 22 + 6, fontSize: 11, opacity: 0.6, color: T.warn } }, tr('explorer.softError', { msg: level.softError }))
           : null
         if (!items.length) return soft || null
         return React.createElement('div', { key: dir + ':list' },
@@ -1966,13 +2163,15 @@ window.__ModuleLoader__.load({
       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: refreshStatus, title: tr('explorer.refresh') }, '↻'),
+        React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '6px 8px', borderBottom: '1px solid ' + T.border } },
+          React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: refreshStatus, title: tr('explorer.refresh') }, '↻'),
           React.createElement('button', {
+            type: 'button',
+            className: 'dsh-rw-btn',
             style: { ...buttonS, padding: '3px 8px', fontSize: 12 },
-            onClick: () => { const nm = window.prompt(tr('picker.newDirName', { path: (root || '/') })); if (nm && nm.trim()) doFs('mkdir', { path: joinRemote(root, nm.trim()) }, true) },
+            onClick: () => setNamePrompt({ kind: 'mkdir', path: root || '/', name: '' }),
           }, tr('explorer.newDir')),
-          React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => setPicker(true) }, tr('explorer.more')),
+          React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => setPicker(true) }, tr('explorer.more')),
         ),
         status && status.workspace && root
           ? React.createElement('div', { style: { fontSize: 11, opacity: 0.7, padding: '4px 8px', wordBreak: 'break-all' } }, tr('explorer.remoteWs', { path: root, host: (status.host ? tr('explorer.hostTag', { user: status.username, host: status.host }) : '') }))
@@ -2000,7 +2199,25 @@ window.__ModuleLoader__.load({
         ),
         // context menu — now rendered via DOM portal in useEffect above
         null,
-        err ? React.createElement('div', { style: { color: '#e06c75', fontSize: 12, padding: '4px 8px' } }, (busy ? tr('explorer.busy') : '') + err) : null,
+        err ? React.createElement('div', { style: { color: T.danger, fontSize: 12, padding: '4px 8px' } }, (busy ? tr('explorer.busy') : '') + err) : null,
+        namePrompt ? React.createElement(PromptDialog, {
+          title: namePrompt.kind === 'rename' ? tr('explorer.renameTitle') : tr('explorer.mkdirTitle'),
+          initial: namePrompt.name || '',
+          placeholder: namePrompt.kind === 'rename' ? tr('explorer.renamePrompt') : tr('explorer.namePlaceholder'),
+          onCancel: () => setNamePrompt(null),
+          onSubmit: (nm) => {
+            const name = String(nm || '').trim()
+            const cur = namePrompt
+            setNamePrompt(null)
+            if (!name) return
+            if (cur.kind === 'rename') {
+              if (name === cur.name) return
+              doFs('rename', { path: cur.path, dest: joinRemote(String(cur.path).replace(/[\\/][^\\/]*$/, ''), name) }, true)
+            } else {
+              doFs('mkdir', { path: joinRemote(cur.path, name) }, true)
+            }
+          },
+        }) : null,
       )
     }
 
@@ -2008,18 +2225,23 @@ window.__ModuleLoader__.load({
     function RemoteFileTab(props) {
       const { tab, scope } = props
       const path = tab.path || ''
+      const fileSessionId = scope && scope.sessionId
       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(() => { ensureChromeCss() }, [])
+
+      const originalText = (data && data.content != null ? data.content : '').replace(/\n…\[truncated:.*$/, '')
+      const dirty = edit && draft !== originalText
 
       const load = () => {
         if (!path) { setLoading(false); return }
         let cancelled = false
         setLoading(true); setErr(''); setData(null); setEdit(false)
-        readRemoteFile(path, 256 * 1024)
+        readRemoteFile(path, 256 * 1024, fileSessionId)
           .then((d) => { if (!cancelled) { setData(d); setLoading(false) } })
           .catch((e) => { if (!cancelled) { setErr(String((e && e.message) || e)); setLoading(false) } })
         return () => { cancelled = true }
@@ -2033,7 +2255,7 @@ window.__ModuleLoader__.load({
       }
       const saveRemote = () => {
         setSaving(true); setErr('')
-        apiRaw('POST', '/dsh-remote/write', { path, content: draft })
+        apiRaw('POST', '/dsh-remote/write', withSessionBody({ path, content: draft, expectedMtime: data && data.mtime }, fileSessionId))
           .then((r) => {
             if (r.status === 409) {
               setErr(String((r.data && r.data.error) || tr('file.conflict')))
@@ -2048,38 +2270,48 @@ window.__ModuleLoader__.load({
       }
       const downloadMirror = () => {
         setSaving(true); setErr('')
-        api('POST', '/dsh-remote/fs', { op: 'download', path })
+        api('POST', '/dsh-remote/fs', withSessionBody({ op: 'download', path }, fileSessionId))
           .then((r) => setErr(tr('file.downloaded', { local: (r && r.local ? tr('file.downloadedAt', { path: 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 } },
+      return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, color: T.label } },
+        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderBottom: '1px solid ' + T.border, 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),
+          dirty ? React.createElement('span', { className: 'dsh-rw-pill', style: { color: T.warn } }, tr('file.dirty')) : null,
           React.createElement('span', { style: { opacity: 0.7, fontSize: 11, flexShrink: 0 } }, edit ? tr('file.editing') : tr('file.readonly')),
           edit
             ? React.createElement(React.Fragment, null,
-                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: saveRemote, disabled: saving }, saving ? tr('file.saving') : tr('file.saveToRemote')),
-                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: () => { setEdit(false); setErr('') } }, tr('file.cancel')))
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn dsh-rw-primary', style: { ...primaryBtnS, padding: '2px 10px', fontSize: 12 }, onClick: saveRemote, disabled: saving || !dirty, title: tr('file.saveHint') }, saving ? tr('file.saving') : tr('file.saveToRemote')),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: () => { setEdit(false); setErr('') } }, tr('file.cancel')))
             : React.createElement(React.Fragment, null,
-                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: startEdit, disabled: !data || data.binary }, tr('file.edit')),
-                React.createElement('button', { style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: downloadMirror, disabled: saving }, tr('file.download'))),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: startEdit, disabled: !data || data.binary }, tr('file.edit')),
+                React.createElement('button', { type: 'button', className: 'dsh-rw-btn', style: { ...buttonS, padding: '2px 10px', fontSize: 12 }, onClick: downloadMirror, disabled: saving }, tr('file.download'))),
         ),
-        React.createElement('div', { style: { flex: 1, overflow: 'auto', minHeight: 0 } },
+        React.createElement('div', { style: { flex: 1, overflow: 'auto', minHeight: 0, display: 'flex', flexDirection: 'column' } },
+          err ? React.createElement('div', { style: { color: T.danger, padding: '8px 12px', fontSize: 13, flexShrink: 0 } }, err) : null,
           loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12, fontSize: 13 } }, tr('file.loading'))
-            : 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 && data.binary
+                  ? React.createElement('div', { style: { padding: 12, fontSize: 13, color: T.warn } },
                       tr('file.binary', { size: (data.size != null ? data.size + ' bytes' : tr('file.unknownSize')) }))
                   : (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 : tr('file.empty'),
+                      ? React.createElement('textarea', {
+                          value: draft,
+                          onChange: (e) => setDraft(e.target.value),
+                          onKeyDown: (e) => {
+                            if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); if (!saving && dirty) saveRemote() }
+                            if (e.key === 'Escape') { e.preventDefault(); setEdit(false); setErr('') }
+                          },
+                          spellCheck: false,
+                          style: { width: '100%', height: '100%', flex: 1, boxSizing: 'border-box', border: 'none', outline: 'none', resize: 'none', background: 'transparent', color: T.label, 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', color: T.label } },
+                          (data && data.content != null) ? data.content : (err ? '' : tr('file.empty')),
                           (data && data.truncated)
-                            ? React.createElement('div', { style: { color: '#e6c07b', fontSize: 12, marginTop: 8 } }, tr('file.truncated'))
+                            ? React.createElement('div', { style: { color: T.warn, fontSize: 12, marginTop: 8 } }, tr('file.truncated'))
                             : null,
                         ))),
         ),
@@ -2201,6 +2433,7 @@ window.__ModuleLoader__.load({
     }
 
     function apply(ctx) {
+      ensureChromeCss()
       const slots = ctx.get('slots')
       wireLocale(ctx)
       // Optional integrations must not gate the settings page. In particular,