dsh-remote 0.6.8 → 0.7.0

package/lib/client.js

@@ -358,34 +358,29 @@ window.__ModuleLoader__.load({
         }
         const last = levels[levels.length - 1]
         const entries = last.all || []
-        // Floating overlay: pinned to viewport, covers the dialog background so
-        // it never stretches the surrounding layout. The picker panel is a fixed
-        // (height-capped) box whose directory list scrolls internally.
-        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: 12 },
-          onClick: () => setPopOpen(false),
-        },
-          React.createElement('div', { style: { background: v('--dsw-alias-bg-overlay', '#1e1e1e'), border: '1px solid ' + T.borderStrong, borderRadius: 10, boxShadow: '0 10px 40px rgba(0,0,0,0.5)', width: 'min(560px, 94vw)', minWidth: 320, display: 'flex', flexDirection: 'column', maxHeight: 'min(440px, 82vh)', overflow: 'hidden' }, onClick: (e) => e.stopPropagation() },
-            React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '8px 12px', borderBottom: '1px solid ' + T.border } },
-              React.createElement('button', { style: { ...buttonS, padding: '3px 10px' }, 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: '3px 10px' }, onClick: () => setPopOpen(false) }, '关闭 ✕'),
-            ),
-            React.createElement('div', { style: { overflowY: 'auto', overflowX: 'hidden' } },
-              loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12 } }, '加载中…')
-                : (entries.length ? entries.slice(0, 400).map((it, i) => React.createElement('div', {
-                    key: i, title: (it.dir ? '进入 ' : '文件: ') + it.name,
-                    onClick: it.dir ? () => enterDir(it.name) : undefined,
-                    style: { padding: '7px 12px', 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('div', { style: { opacity: 0.6, padding: 12 } }, '（空目录）')),
-            ),
-            React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', padding: '8px 12px', borderTop: '1px solid ' + T.border } },
-              React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, '所选: ' + last.path),
-              React.createElement('button', { style: { ...buttonS, fontWeight: 600 }, onClick: () => acceptBrowserPick(last.path) }, '选用此路径'),
-            ),
+        // 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: () => setPopOpen(false) }, '关闭 ✕'),
+          ),
+          React.createElement('div', { style: { overflowY: 'auto', overflowX: 'hidden' } },
+            loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12 } }, '加载中…')
+              : (entries.length ? entries.slice(0, 400).map((it, i) => React.createElement('div', {
+                  key: i, title: (it.dir ? '进入 ' : '文件: ') + it.name,
+                  onClick: it.dir ? () => enterDir(it.name) : undefined,
+                  style: { padding: '6px 10px', cursor: it.dir ? 'pointer' : 'default', color: it.dir ? T.ok : T.label, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, borderBottom: '1px solid ' + T.border },
+                },
+                  React.createElement('span', null, it.dir ? '📁' : '📄'),
+                  React.createElement('span', { style: { overflow: 'hidden', textOverflow: 'ellipsis' } }, it.name),
+                )) : 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 } },
+            React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, '所选: ' + last.path),
+            React.createElement('button', { style: { ...buttonS, fontWeight: 600 }, onClick: () => { acceptBrowserPick(last.path); setPopOpen(false) } }, '选用此路径'),
           ),
         )
       }
@@ -396,7 +391,7 @@ window.__ModuleLoader__.load({
       // 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)', 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(620px, 90vh)', 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 }, '关闭 ✕'),
@@ -415,7 +410,7 @@ window.__ModuleLoader__.load({
               React.createElement('button', { style: { ...buttonS, alignSelf: 'flex-start' }, onClick: chooseLocal, disabled: loading }, loading ? '打开中…' : '打开系统文件夹选择器'),
               err ? React.createElement('div', { style: { color: T.danger, fontSize: 12 } }, err) : null,
             )
-          : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
+          : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0, overflowY: 'auto' } },
               React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center' } },
                 React.createElement('label', { style: { fontSize: 12, opacity: 0.8, whiteSpace: 'nowrap' } }, '远程机器:'),
                 React.createElement('div', { ref: ddRef, style: { position: 'relative', display: 'inline-block' } },
@@ -432,29 +427,266 @@ window.__ModuleLoader__.load({
                 ),
               ),
               // 路径输入框（带自动补全）+ 打开浏览弹层按钮
-              React.createElement('div', { ref: suggestRef, style: { position: 'relative', 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 }, '浏览…'),
-                // 自动补全下拉
+              // suggestRef 外层仍用于「点击外部关闭」判定；输入行与补全列表
+              // 是两级 div —— 补全列表以流式（非绝对定位）展开，确认按钮被
+              // 推到下方而不会被遮挡（issue #4「有子目录时选择框遮挡确定菜单」）。
+              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 }, '浏览…'),
+                ),
+                // 自动补全下拉（流式展开，参与文档流，不覆盖确认按钮）
                 (suggestOpen && suggest.length)
-                  ? React.createElement('div', { style: { position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, background: v('--dsw-alias-bg-overlay', '#1e1e1e'), border: '1px solid ' + T.borderStrong, borderRadius: 8, marginTop: 4, maxHeight: 200, overflowY: 'auto', boxShadow: '0 6px 24px rgba(0,0,0,0.25)' } },
+                  ? 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' } },
                 React.createElement('span', { style: { fontSize: 11, opacity: 0.75, fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 } }, path ? '所选: ' + path : ''),
                 React.createElement('button', { style: { ...buttonS, fontWeight: 600 }, onClick: () => commitPath(path), disabled: busy || !machineId || !path.trim() }, busy ? '镜像中…' : '设为远程工作区'),
               ),
-              // 悬浮浏览弹层：选中的路径回填到输入框（不直接提交）
-              popOpen ? renderDirPopup() : null,
             ),
         (tab === 'local') ? React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } }, React.createElement('button', { style: { background: 'transparent' }, onClick: onCancel }, '取消')) : null,
         ),
       )
     }
 
+    // ── 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
+    }
+
+    // ── Remote explorer tab ────────────────────────────────────────────────
+    function RemoteExplorerTab(props) {
+      const [status, setStatus] = React.useState(null)
+      const [levels, setLevels] = React.useState([])   // [{path, items}]
+      const [err, setErr] = React.useState('')
+      const [loading, setLoading] = React.useState(false)
+      const [picker, setPicker] = React.useState(false)
+
+      const refreshStatus = () => {
+        fetchRemoteStatus().then((s) => {
+          setStatus(s)
+          if (s && s.workspace) setLevels((prev) => (prev.length ? prev : [{ path: s.workspace, items: null }]))
+        })
+      }
+      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])
+
+      const loadDir = (p, idx) => {
+        if (loading) return
+        setLoading(true); setErr('')
+        listRemoteDir(p).then((res) => {
+          const items = Array.isArray(res && res.items) ? res.items : []
+          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' }))
+            if (idx < 0 || idx >= base.length) return base.concat([{ path: p, items: list }])
+            base[idx] = { path: p, items: list }
+            return base.slice(0, idx + 1)
+          })
+        }).catch((e) => setErr(String((e && e.message) || e)))
+          .finally(() => setLoading(false))
+      }
+
+      // 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
+        const base = last.path
+        const sep = base.includes('\\') ? '\\' : '/'
+        const next = base === '/' ? '/' + name : base + sep + name
+        loadDir(next, levels.length)
+      }
+      // Jump to a breadcrumb ancestor.
+      const jumpTo = (p) => {
+        const idx = levels.findIndex((lv) => lv.path === p)
+        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 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 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))),
+        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))
+
+      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' } }, '未设置远程工作区')
+
+      return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 } },
+        React.createElement('div', { style: { display: 'flex', gap: 6, alignItems: 'center', padding: '6px 8px', borderBottom: '1px solid rgba(128,128,128,0.25)' } },
+          React.createElement('button', { style: { ...buttonS, padding: '3px 8px', fontSize: 12 }, onClick: () => { const w = status && status.workspace; if (w) { setLevels([{ path: w, items: null }]); loadDir(w, 0) } else setPicker(true) } }, '↻'),
+          React.createElement('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: () => 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),
+        })) : null,
+        React.createElement('div', { style: { flex: 1, overflowY: 'auto', minHeight: 0 } },
+          loading ? React.createElement('div', { style: { opacity: 0.7, padding: 12, fontSize: 13 } }, '加载中…')
+            : (allItems.length ? allItems.slice(0, 500).map(row)
+                : (curPath ? React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '（空目录）')
+                    : React.createElement('div', { style: { opacity: 0.6, padding: 12, fontSize: 13 } }, '选择或设置一个远程工作区'))),
+        ),
+        err ? React.createElement('div', { style: { color: '#e06c75', fontSize: 12, padding: '4px 8px' } }, 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).
+    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)
+
+      React.useEffect(() => {
+        if (!path) { setLoading(false); return }
+        let cancelled = false
+        setLoading(true); setErr(''); setData(null)
+        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])
+
+      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('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,
+                    )),
+        ),
+      )
+    }
+
+    // ── better-sidebar registration (guarded: plugin may be absent) ────────
+    function registerSidebarIntegration(ctx) {
+      const bs = (ctx && ctx.get && ctx.get('betterSidebar')) || null
+      if (!bs || typeof bs.registerTab !== 'function') return
+      const disposers = []
+      try {
+        disposers.push(bs.registerTab({
+          id: SIDEBAR_EXPLORER_ID,
+          title: () => '远程文件',
+          icon: (size) => React.createElement('span', { style: { fontSize: (size || 14), lineHeight: 1 } }, '🌐'),
+          order: 55,
+          single: true,
+          component: (props) => React.createElement(RemoteExplorerTab, props),
+        }))
+        disposers.push(bs.registerTab({
+          id: SIDEBAR_FILE_ID,
+          title: () => '远程文件',
+          hidden: true, // not in the + menu; opened from the explorer tree
+          dedupeKey: (tab) => tab.path,
+          component: (props) => React.createElement(RemoteFileTab, props),
+        }))
+      } catch (e) {
+        console.warn('[dsh-remote] better-sidebar integration skipped:', e)
+        disposers.forEach((d) => { try { d() } catch {} })
+        return
+      }
+      return () => disposers.forEach((d) => { try { d() } catch {} })
+    }
+
     function apply(ctx) {
       const slots = ctx.get('slots')
       if (slots === undefined) return
@@ -471,6 +703,23 @@ 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) {
+          inner.effect(() => bsDispose, 'dsh-remote.betterSidebar')
+        }
+      })
     }
 
     exports.name = name

package/lib/index.js

@@ -1492,6 +1492,57 @@ export async function apply(ctx, config) {
         }
       },
     },
+    {
+      // Read a remote file over SFTP (live, not the local mirror) for the
+      // sidebar's remote file viewer. Text files come back as UTF-8 content
+      // (CRLF→LF), binary files are reported as binary with size+head bytes
+      // (base64) so the client can sniff the format without loading the
+      // whole file. `maxBytes` caps how much text is returned.
+      kind: 'exact',
+      path: '/dsh-remote/read',
+      handler: async (req, res) => {
+        if (req.method !== 'GET' && req.method !== 'POST') return sendJson(res, 405, { ok: false, error: 'method not allowed' })
+        try {
+          const q = new URL(req.url, 'http://localhost').searchParams
+          let p = q.get('path') ? decodeURIComponent(q.get('path')) : ''
+          if (req.method === 'POST') {
+            const body = JSON.parse((await readBody(req)) || '{}')
+            if (!p) p = String(body.path || '')
+          }
+          if (!p) return sendJson(res, 400, { ok: false, error: 'path is required' })
+          const target = normalizeRemotePath(p)
+          const maxBytes = Math.min(Math.max(Number(q.get('maxBytes')) || 256 * 1024, 1024), 2 * 1024 * 1024)
+          let sftp
+          try {
+            sftp = await pool.sftp()
+          } catch (err) {
+            return sendJson(res, 500, { ok: false, error: 'sftp unavailable: ' + ((err && err.message) || err) })
+          }
+          let buf
+          try {
+            buf = await sftp.readFile(target)
+          } catch (err) {
+            return sendJson(res, 500, { ok: false, error: 'read failed: ' + ((err && err.message) || err) })
+          }
+          // Binary sniff: NUL byte in the first 8KB (or the whole file when
+          // smaller) marks the file binary — matches the sidebar's convention.
+          const headN = Math.min(buf.length, 8192)
+          let binary = false
+          for (let i = 0; i < headN; i++) {
+            if (buf[i] === 0) { binary = true; break }
+          }
+          if (binary) {
+            return sendJson(res, 200, { ok: true, binary: true, size: buf.length, head: buf.slice(0, Math.min(buf.length, 4096)).toString('base64') })
+          }
+          let content = buf.toString('utf8').replace(/\r\n/g, '\n')
+          const truncated = content.length > maxBytes
+          if (truncated) content = content.slice(0, maxBytes) + `\n…[truncated: ${buf.length - maxBytes} more bytes]`
+          return sendJson(res, 200, { ok: true, binary: false, content, truncated })
+        } catch (err) {
+          return sendJson(res, 500, { ok: false, error: String((err && err.message) || err) })
+        }
+      },
+    },
     {
       kind: 'exact',
       path: '/dsh-remote/workspace',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "Remote-work assistant for DeepSeek Harness: connect SSH (password or key), pick a remote workspace, operate on it with rw_pick_workspace / rw_list_dir / rw_read_file / rw_exec / rw_sync tools, and mirror it to a real local directory (SFTP) so the DSH native workspace can adopt it.",
   "license": "MIT",
   "author": "flymysql <flyphp@outlook.com>",