dsh-ssh-manage 0.1.1 → 0.2.1

package/README.en.md

@@ -34,7 +34,7 @@ No more jumping between a terminal and DSH, and no need to remember where each h
 
 ### Host management
 
-- Group tree on the left, host table on the right: search, filter by group, favorite, tags, notes, connection state and latency.
+- Group tree on the left, host table on the right: search, filter by group, favorite, tags, notes, connection state and latency. Drag the divider to resize the group sidebar (double-click resets; the width is remembered).
 - Create, edit, rename and delete hosts; renaming migrates group, tags, favorites, notes, inspection data and the saved password.
 - Configurable table columns (info / notes / compact rows), responsive on narrow screens.
 - Host details drawer: address, user, port, group, tags, notes, distro, CPU, memory, disk, latency, plus "Test connection" and "Inspect".
@@ -44,7 +44,7 @@ No more jumping between a terminal and DSH, and no need to remember where each h
 ### Interactive terminal
 
 - Click "Connect" to open a real PTY shell, not a one-command-at-a-time console.
-- Multiple hosts stay as tabs inside the plugin page; switching tabs keeps output, closing a tab ends that session.
+- Multiple hosts stay as tabs: switching to another DSH session and coming back re-attaches to the existing shell and replays roughly the last 256 KB of output; only closing the tab ends the session.
 - xterm.js 6.0.0 rendering with 256 colors, cursor, scrollback, selection copy, paste and resize.
 - Terminal theme follows the DSH light/dark theme; the session bar has quick actions for address, password status, test, files, details, clear and close.
 - Output is streamed over a same-origin HTTP/SSE connection; input, resize and close use same-origin HTTP POST. A tested WebSocket channel is kept as a fallback.
@@ -96,16 +96,16 @@ Creating a host requires alias, hostname and password. The password is not writt
 
 ### From npm (recommended)
 
-npm package: [`dsh-ssh-manage`](https://www.npmjs.com/package/dsh-ssh-manage) (current version `0.1.1`).
+npm package: [`dsh-ssh-manage`](https://www.npmjs.com/package/dsh-ssh-manage) (current version `0.2.1`).
 
 ```text
-plugin_manager action=install_bundle target=dsh-ssh-manage@0.1.1
+plugin_manager action=install_bundle target=dsh-ssh-manage@0.2.1
 ```
 
 Or with the DSH CLI:
 
 ```bash
-dsh plugin add dsh-ssh-manage@0.1.1
+dsh plugin add dsh-ssh-manage@0.2.1
 ```
 
 After installation, refresh the Web page; the sidebar shows an "SSH Hosts" entry with id `dsh-ssh-manage`.
@@ -216,7 +216,7 @@ The terminal uses vendored xterm.js 6.0.0 (MIT, see `assets/LICENSE.xterm`) and
 ## Known limitations
 
 - **Host key verification** is not implemented; ssh2 accepts the server-provided key. Use trusted networks only.
-- **Session lifetime**: terminal sessions live in plugin page memory and reset when leaving the SSH panel, refreshing the page or HMR; page close sends best-effort close notifications, and orphaned sessions are cleaned up by the idle reaper.
+- **Session lifetime**: sessions are kept on the Host; switching to another DSH session, temporarily leaving the panel, or refreshing the page re-attaches to the existing shell and replays roughly the last 256 KB of output. Only closing the tab or exiting the Host process ends them; orphaned sessions are reaped after 6 hours of inactivity (max 16 sessions).
 - **Password auth only**: IdentityFile / SSH agent / ProxyJump are not used for transport; those config fields are preserved but ignored. ProxyJump hosts fail with a clear error.
 - **Config editing scope**: the editor only changes `Host`, `HostName`, `User`, `Port` and plugin metadata; maintain other SSH directives in `~/.ssh/config`.
 - **Batch commands** run one command; they are not an interactive terminal. Per-host output is capped at 1 MB and marked `truncated` when exceeded.

package/README.md

@@ -34,7 +34,7 @@
 
 ### 主机管理
 
-- 左侧分组树 + 右侧主机表格：搜索、按分组筛选、收藏、标签、备注、连接状态与延迟一目了然。
+- 左侧分组树 + 右侧主机表格：搜索、按分组筛选、收藏、标签、备注、连接状态与延迟一目了然；分组栏可拖拽调整宽度（双击恢复默认），宽度会记住。
 - 新建、编辑、重命名、删除主机；重命名自动迁移分组、标签、收藏、备注、巡检信息和已保存密码。
 - 表格列可配置（信息列 / 备注列 / 紧凑行高），窄屏自适应。
 - 主机详情抽屉：地址、用户、端口、分组、标签、备注、发行版、CPU、内存、磁盘、延迟，以及「测试连接」「巡检」。
@@ -44,7 +44,7 @@
 ### 交互式终端
 
 - 点「连接」打开真正的 PTY shell，不是一条命令一条命令地执行。
-- 多台主机以标签页常驻在当前插件页面，切换标签不丢输出；关闭标签才结束会话。
+- 多台主机以标签页常驻：切换到其它 DSH 会话再回来，终端会重新附着到原来的 shell，并回放最近约 256 KB 输出；关闭标签才结束会话。
 - xterm.js 6.0.0 渲染，支持 256 色、光标、滚动回看、选中复制、粘贴、窗口 resize。
 - 终端主题跟随 DSH 明暗主题；会话顶部有地址、密码状态、测试连接、文件、详情、清屏、关闭等快捷操作。
 - 输出走同源 HTTP/SSE 长连接，输入 / 尺寸 / 关闭走同源 HTTP POST；插件同时保留经过测试的 WebSocket 备用通道。
@@ -98,16 +98,16 @@
 
 ### 从 npm 安装（推荐）
 
-npm 包：[`dsh-ssh-manage`](https://www.npmjs.com/package/dsh-ssh-manage)（当前版本 `0.1.1`）。
+npm 包：[`dsh-ssh-manage`](https://www.npmjs.com/package/dsh-ssh-manage)（当前版本 `0.2.1`）。
 
 ```text
-plugin_manager action=install_bundle target=dsh-ssh-manage@0.1.1
+plugin_manager action=install_bundle target=dsh-ssh-manage@0.2.1
 ```
 
 或使用 DSH CLI：
 
 ```bash
-dsh plugin add dsh-ssh-manage@0.1.1
+dsh plugin add dsh-ssh-manage@0.2.1
 ```
 
 安装后刷新 Web 页面，左侧栏会出现「SSH 主机」入口，入口 id 为 `dsh-ssh-manage`。
@@ -218,7 +218,7 @@ npm test
 ## 已知限制
 
 - **主机密钥校验**：未接入 `known_hosts`，ssh2 默认接受服务器主机密钥；仅在可信网络使用。
-- **会话生命周期**：终端会话保存在插件页面内存中，离开 SSH 插件面板、页面刷新或 HMR 会重置；页面关闭时会尽力发送关闭通知，异常崩溃留下的孤儿会话由空闲清理兜底。
+- **会话生命周期**：终端会话由 Host 保留，切换 DSH 会话/暂时离开插件面板/刷新页面后会重新附着并回放最近约 256 KB 输出；只有关闭标签或 Host 进程退出才真正结束。Host 侧空闲超过 6 小时会清理孤儿会话（最大 16 个）。
 - **仅密码认证**：不支持 IdentityFile / SSH agent / ProxyJump 传输；配置中的这些字段会原样保留，但不会用于连接。ProxyJump 主机会明确报错。
 - **配置编辑范围**：编辑器只修改 `Host`、`HostName`、`User`、`Port` 与插件元数据；其它 SSH 指令请在 `~/.ssh/config` 中维护。
 - **批量命令**：一次执行一条命令，不等同于交互式终端；单台输出上限 1 MB，超出会标记 `truncated`。

package/client.js

@@ -26,11 +26,12 @@ window.__ModuleLoader__.load({
       'app.configFile': ['配置文件', 'Config file'],
       'app.copyConfig': ['复制配置路径', 'Copy config path'],
       'toolbar.collapse': ['收起', 'Collapse'],
+      'toolbar.resize': ['拖动调整分组栏宽度，双击恢复默认', 'Drag to resize the group sidebar; double-click to reset'],
       'toolbar.expand': ['展开', 'Expand'],
       'toolbar.refresh': ['刷新', 'Refresh'],
       'toolbar.groups': ['分组', 'Groups'],
       'toolbar.new': ['新建主机', 'New host'],
-      'toolbar.newShort': ['+ SSH', '+ SSH'],
+      'toolbar.newShort': ['SSH', 'SSH'],
       'toolbar.filter': ['只看收藏', 'Favorites only'],
       'toolbar.info': ['信息', 'Info'],
       'toolbar.settings': ['显示设置', 'View options'],
@@ -279,6 +280,12 @@ window.__ModuleLoader__.load({
       return `${user}${target}${port}`
     }
 
+    // Table / session chrome shows only the hostname (the name column already
+    // carries the alias); the full user@host:port stays in titles and copy.
+    function hostTarget(host) {
+      return host.hostname || host.host
+    }
+
     function hostGroupKey(host) {
       return host.group || ''
     }
@@ -1047,7 +1054,7 @@ window.__ModuleLoader__.load({
         }
         let result = 0
         if (sort.key === 'system') result = String(a.system ?? '').localeCompare(String(b.system ?? ''))
-        else if (sort.key === 'address') result = hostAddress(a).localeCompare(hostAddress(b))
+        else if (sort.key === 'address') result = hostTarget(a).localeCompare(hostTarget(b))
         else if (sort.key === 'notes') result = String(a.note ?? '').localeCompare(String(b.note ?? ''))
         else result = hostName(a).localeCompare(hostName(b), undefined, { numeric: true, sensitivity: 'base' })
         if (result === 0) result = a.host.localeCompare(b.host)
@@ -1067,10 +1074,10 @@ window.__ModuleLoader__.load({
     }
 
     function tableTracks(prefs) {
-      const tracks = ['32px', '112px', '92px', 'minmax(0,1.1fr)', 'minmax(0,1.2fr)']
-      if (prefs.info) tracks.push('minmax(0,1.5fr)')
-      if (prefs.notes) tracks.push('minmax(0,0.9fr)')
-      tracks.push('176px', '32px')
+      const tracks = ['32px', '96px', '80px', 'minmax(90px,1fr)', 'minmax(150px,1.25fr)']
+      if (prefs.info) tracks.push('minmax(210px,1.4fr)')
+      if (prefs.notes) tracks.push('minmax(120px,0.8fr)')
+      tracks.push('150px', '28px')
       return tracks.join(' ')
     }
 
@@ -1093,6 +1100,48 @@ window.__ModuleLoader__.load({
     // App
     // ---------------------------------------------------------------------
 
+    // Survives the plugin panel unmounting when the user switches to another
+    // DSH session (and a client-module reload). Host-side PTYs stay alive;
+    // mounting again attaches to them and replays recent output.
+    const PANEL_STATE_KEY = 'dsh-ssh-manage:panel-state'
+    const TREE_WIDTH_KEY = 'dsh-ssh-manage:tree-width'
+
+    function readPanelState() {
+      try {
+        const parsed = JSON.parse(String(window.sessionStorage.getItem(PANEL_STATE_KEY) ?? 'null'))
+        if (!parsed || typeof parsed !== 'object' || !Array.isArray(parsed.sessions)) {
+          return { sessions: [], activeSessionId: null, tab: 'hosts' }
+        }
+        const sessions = parsed.sessions
+          .filter((session) => session && typeof session.id === 'string' && typeof session.hostAlias === 'string')
+          .map((session) => ({ id: session.id, hostAlias: session.hostAlias }))
+        const tab = ['hosts', 'sessions', 'batch', 'settings'].includes(parsed.tab) ? parsed.tab : 'hosts'
+        const activeSessionId = typeof parsed.activeSessionId === 'string' ? parsed.activeSessionId : null
+        return { sessions, activeSessionId, tab }
+      } catch {
+        return { sessions: [], activeSessionId: null, tab: 'hosts' }
+      }
+    }
+
+    const persistentPanelState = readPanelState()
+    const TREE_MIN_WIDTH = 220
+    const TREE_MAX_WIDTH = 560
+
+    function clampTreeWidth(value) {
+      const numeric = Number(value)
+      if (!Number.isFinite(numeric)) return 300
+      return Math.min(TREE_MAX_WIDTH, Math.max(TREE_MIN_WIDTH, Math.round(numeric)))
+    }
+
+    function readTreeWidth() {
+      try {
+        const stored = window.localStorage.getItem(TREE_WIDTH_KEY)
+        return stored === null ? 300 : clampTreeWidth(stored)
+      } catch {
+        return 300
+      }
+    }
+
     function App({ ctx }) {
       const t = useT(ctx)
       const localeId = useLocaleId(ctx)
@@ -1100,7 +1149,11 @@ window.__ModuleLoader__.load({
       const [loading, setLoading] = React.useState(true)
       const [refreshing, setRefreshing] = React.useState(false)
       const [error, setError] = React.useState('')
-      const [tab, setTab] = React.useState('hosts')
+      const [tab, setTab] = React.useState(() => {
+        const saved = persistentPanelState.tab
+        if (saved === 'sessions' && persistentPanelState.sessions.length === 0) return 'hosts'
+        return ['hosts', 'sessions', 'batch', 'settings'].includes(saved) ? saved : 'hosts'
+      })
       const [filter, setFilter] = React.useState('')
       const [favoriteOnly, setFavoriteOnly] = React.useState(false)
       const [groupFilter, setGroupFilter] = React.useState(null)
@@ -1119,12 +1172,14 @@ window.__ModuleLoader__.load({
       const [pending, setPending] = React.useState({})
       const [sort, setSort] = React.useState({ key: 'name', dir: 'asc' })
       const [columns, setColumns] = React.useState({ info: true, notes: true, compact: false })
-      const [sessions, setSessions] = React.useState([])
-      const [activeSessionId, setActiveSessionId] = React.useState(null)
+      const [sessions, setSessions] = React.useState(() =>
+        persistentPanelState.sessions.map((session) => ({ id: session.id, hostAlias: session.hostAlias })),
+      )
+      const [activeSessionId, setActiveSessionId] = React.useState(() => persistentPanelState.activeSessionId)
+      const [treeWidth, setTreeWidth] = React.useState(readTreeWidth)
       const [clearSignals, setClearSignals] = React.useState({})
       const toastTimer = React.useRef(null)
       const floatingRef = React.useRef(null)
-      const sessionCounter = React.useRef(0)
 
       const notify = React.useCallback((message, tone = 'info') => {
         if (toastTimer.current) clearTimeout(toastTimer.current)
@@ -1139,6 +1194,25 @@ window.__ModuleLoader__.load({
         [],
       )
 
+      React.useEffect(() => {
+        persistentPanelState.sessions = sessions.map((session) => ({ id: session.id, hostAlias: session.hostAlias }))
+        persistentPanelState.activeSessionId = activeSessionId
+        persistentPanelState.tab = tab
+        try {
+          window.sessionStorage.setItem(PANEL_STATE_KEY, JSON.stringify(persistentPanelState))
+        } catch {}
+      }, [sessions, activeSessionId, tab])
+
+      React.useEffect(() => {
+        try {
+          window.localStorage.setItem(TREE_WIDTH_KEY, String(treeWidth))
+        } catch {}
+      }, [treeWidth])
+
+      React.useEffect(() => {
+        for (const session of sessions) ptyActiveIds.add(session.id)
+      }, [sessions])
+
       const applySnapshot = React.useCallback((next) => {
         if (!next) return
         const aliases = new Set((next.hosts ?? []).map((host) => host.host))
@@ -1217,8 +1291,11 @@ window.__ModuleLoader__.load({
         if (!snapshot) return
         const aliases = new Set(hosts.map((host) => host.host))
         setSessions((prev) => {
+          const removed = prev.filter((session) => !aliases.has(session.hostAlias))
           const next = prev.filter((session) => aliases.has(session.hostAlias))
-          return next.length === prev.length ? prev : next
+          if (removed.length === 0) return prev
+          for (const session of removed) closePtySession(session.id)
+          return next
         })
       }, [hosts, snapshot])
 
@@ -1298,8 +1375,8 @@ window.__ModuleLoader__.load({
         if (existing) {
           setActiveSessionId(existing.id)
         } else {
-          sessionCounter.current += 1
-          const id = `ssh-session-${Date.now()}-${sessionCounter.current}`
+          const id = newPtySessionId()
+          ptyActiveIds.add(id)
           setSessions((prev) => [...prev, { id, hostAlias: host.host }])
           setActiveSessionId(id)
         }
@@ -1309,6 +1386,7 @@ window.__ModuleLoader__.load({
       function closeSession(id) {
         const index = sessions.findIndex((session) => session.id === id)
         if (index < 0) return
+        closePtySession(id)
         const next = sessions.filter((session) => session.id !== id)
         setSessions(next)
         setClearSignals((prev) => {
@@ -1602,6 +1680,8 @@ window.__ModuleLoader__.load({
         setFloating,
         setEditor,
         setDrawer,
+        treeWidth,
+        setTreeWidth,
         sessions,
         activeSessionId,
         setActiveSessionId,
@@ -2320,7 +2400,7 @@ window.__ModuleLoader__.load({
         h(
           'div',
           { className: 'ssh-cell ssh-colAddress' },
-          h('span', { className: 'ssh-address', title: hostAddress(host) }, hostAddress(host)),
+          h('span', { className: 'ssh-address', title: hostAddress(host) }, hostTarget(host)),
           h(
             'span',
             { className: 'ssh-inlineActions' },
@@ -2429,9 +2509,11 @@ window.__ModuleLoader__.load({
         observer.observe(node)
         return () => observer.disconnect()
       }, [])
+      const hasInfo = visible.some((host) => Boolean(host.system || host.cpuCores || host.memoryGB || host.diskGB))
+      const hasNotes = visible.some((host) => Boolean(host.note))
       const effective = {
-        info: columns.info && tableWidth >= 860,
-        notes: columns.notes && tableWidth >= 1000,
+        info: columns.info && hasInfo && tableWidth >= 900,
+        notes: columns.notes && hasNotes && tableWidth >= 1100,
       }
       const style = { gridTemplateColumns: tableTracks(effective) }
       const visibleAliases = visible.map((host) => host.host)
@@ -2498,10 +2580,55 @@ window.__ModuleLoader__.load({
     }
 
     function HostsTab({ model }) {
+      const { t } = model
+      const beginResize = (event) => {
+        if (!model.sidebarOpen || event.button !== 0) return
+        event.preventDefault()
+        event.stopPropagation()
+        const startX = event.clientX
+        const startWidth = model.treeWidth
+        document.body.classList.add('ssh-col-resizing')
+        const onMove = (moveEvent) => {
+          model.setTreeWidth(clampTreeWidth(startWidth + moveEvent.clientX - startX))
+        }
+        const onUp = () => {
+          document.body.classList.remove('ssh-col-resizing')
+          window.removeEventListener('pointermove', onMove)
+          window.removeEventListener('pointerup', onUp)
+          window.removeEventListener('pointercancel', onUp)
+        }
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+        window.addEventListener('pointercancel', onUp)
+      }
+      const nudgeWidth = (event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+        event.preventDefault()
+        model.setTreeWidth(clampTreeWidth(model.treeWidth + (event.key === 'ArrowLeft' ? -20 : 20)))
+      }
       return h(
         'div',
-        { className: cx('ssh-body', !model.sidebarOpen && 'collapsed') },
+        {
+          className: cx('ssh-body', !model.sidebarOpen && 'collapsed'),
+          style: { '--ssh-tree-width': `${model.treeWidth}px` },
+        },
         h(Sidebar, { model }),
+        model.sidebarOpen
+          ? h('div', {
+              className: 'ssh-treeResizer',
+              role: 'separator',
+              tabIndex: 0,
+              'aria-orientation': 'vertical',
+              'aria-label': t('toolbar.resize'),
+              'aria-valuemin': TREE_MIN_WIDTH,
+              'aria-valuemax': TREE_MAX_WIDTH,
+              'aria-valuenow': model.treeWidth,
+              title: t('toolbar.resize'),
+              onPointerDown: beginResize,
+              onKeyDown: nudgeWidth,
+              onDoubleClick: () => model.setTreeWidth(300),
+            })
+          : null,
         model.sidebarOpen ? h('div', { className: 'ssh-sideScrim', onClick: () => model.setSidebarOpen(false) }) : null,
         h(
           'main',
@@ -2622,7 +2749,7 @@ window.__ModuleLoader__.load({
             'div',
             { className: 'ssh-sessionActions' },
             activeHost
-              ? h('span', { className: 'ssh-sessionAddress', title: hostAddress(activeHost) }, hostAddress(activeHost))
+              ? h('span', { className: 'ssh-sessionAddress', title: hostAddress(activeHost) }, hostTarget(activeHost))
               : null,
             activeCredential ? h(Badge, { tone: activeCredential.tone }, activeCredential.label) : null,
             h(
@@ -2734,7 +2861,7 @@ window.__ModuleLoader__.load({
               'div',
               { className: 'ssh-drawerTitles' },
               h('div', { className: 'ssh-drawerTitle', title: hostName(host) }, hostName(host)),
-              h('div', { className: 'ssh-drawerSub' }, hostAddress(host)),
+              h('div', { className: 'ssh-drawerSub' }, hostTarget(host)),
             ),
             h(
               Badge,
@@ -2913,10 +3040,26 @@ window.__ModuleLoader__.load({
     }
 
     const PTY_EVENTS_ROUTE = '/dsh-ssh-manage/pty/events'
+    const PTY_ATTACH_ROUTE = '/dsh-ssh-manage/pty/attach'
     const ptyStream = { source: null, ready: false, promise: null, listeners: new Map() }
     const ptyActiveIds = new Set()
+    const ptyClosedIds = new Set()
     const ptyStreamLostHandlers = new Set()
 
+    function closePtySession(id) {
+      if (!id) return
+      ptyClosedIds.add(id)
+      ptyActiveIds.delete(id)
+      try {
+        void fetch('/dsh-ssh-manage/pty/close', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id }),
+          keepalive: true,
+        })
+      } catch {}
+    }
+
     function onPtyStreamLost(handler) {
       ptyStreamLostHandlers.add(handler)
       return () => ptyStreamLostHandlers.delete(handler)
@@ -2934,17 +3077,6 @@ window.__ModuleLoader__.load({
       }
     }
 
-    if (typeof window !== 'undefined') {
-      window.addEventListener('pagehide', () => {
-        for (const id of ptyActiveIds) {
-          try {
-            navigator.sendBeacon('/dsh-ssh-manage/pty/close', new Blob([JSON.stringify({ id })], { type: 'application/json' }))
-          } catch {}
-        }
-        ptyActiveIds.clear()
-      })
-    }
-
     function subscribePty(id, listener) {
       ptyStream.listeners.set(id, listener)
       return () => {
@@ -3043,7 +3175,6 @@ window.__ModuleLoader__.load({
       const containerRef = React.useRef(null)
       const termRef = React.useRef(null)
       const fitRef = React.useRef(null)
-      const sessionIdRef = React.useRef(null)
       const activeRef = React.useRef(active === true)
       const [status, setStatus] = React.useState('loading')
       const [message, setMessage] = React.useState('')
@@ -3099,24 +3230,7 @@ window.__ModuleLoader__.load({
             unsubscribe()
             unsubscribe = null
           }
-          const id = sessionKey
           sessionKey = null
-          sessionIdRef.current = null
-          if (id) {
-            ptyActiveIds.delete(id)
-            postClose(id)
-          }
-        }
-
-        const postClose = (id) => {
-          try {
-            void fetch('/dsh-ssh-manage/pty/close', {
-              method: 'POST',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify({ id }),
-              keepalive: true,
-            })
-          } catch {}
         }
 
         const failSession = (error) => {
@@ -3207,42 +3321,83 @@ window.__ModuleLoader__.load({
             return
           }
           if (removed) return
-          sessionKey = newPtySessionId()
-          sessionIdRef.current = sessionKey
-          ptyActiveIds.add(sessionKey)
-          unsubscribe = subscribePty(sessionKey, (event) => {
-            if (removed) return
+          sessionKey = sessionId
+          const id = sessionKey
+          let synced = false
+          let lastSeq = 0
+          const pendingEvents = []
+
+          const applyOutput = (event) => {
+            const seq = Number(event.seq)
+            if (Number.isFinite(seq)) {
+              if (seq <= lastSeq) return
+              lastSeq = seq
+            }
+            try { term.write(decodeBase64(event.data)) } catch {}
+          }
+
+          const handleEvent = (event) => {
             if (event.kind === 'output') {
-              try { term.write(decodeBase64(event.data)) } catch {}
+              if (!synced) pendingEvents.push(event)
+              else applyOutput(event)
             } else if (event.kind === 'exit') {
+              if (!synced) {
+                pendingEvents.push(event)
+                return
+              }
               finished = true
               setStatus('closed')
               setMessage(t('terminal.exited'))
               teardown()
             } else if (event.kind === 'error') {
+              if (!synced) {
+                pendingEvents.push(event)
+                return
+              }
               finished = true
               setStatus('error')
               setMessage(String(event.message ?? t('terminal.failed')))
               teardown()
             }
+          }
+
+          unsubscribe = subscribePty(id, (event) => {
+            if (removed) return
+            handleEvent(event)
           })
           let dims = { cols: 80, rows: 24 }
           try {
             const proposed = fit?.proposeDimensions?.()
             if (proposed && proposed.cols > 0 && proposed.rows > 0) dims = proposed
           } catch {}
-          const openedId = sessionKey
           try {
-            await ptyPost('/dsh-ssh-manage/pty/open', {
-              id: openedId,
-              host: hostRef.current.host,
-              cols: dims.cols,
-              rows: dims.rows,
-            }, 40_000)
-            if (removed || finished) {
-              postClose(openedId)
+            let value
+            try {
+              value = await ptyPost(PTY_ATTACH_ROUTE, { id, cols: dims.cols, rows: dims.rows }, 15_000)
+            } catch {
+              value = await ptyPost('/dsh-ssh-manage/pty/open', {
+                id,
+                host: hostRef.current.host,
+                cols: dims.cols,
+                rows: dims.rows,
+              }, 40_000)
+            }
+            if (ptyClosedIds.has(id)) {
+              closePtySession(id)
               return
             }
+            if (removed) return
+            if (value && value.output) {
+              try { term.write(decodeBase64(value.output)) } catch {}
+            }
+            const seq = Number(value?.seq)
+            if (Number.isFinite(seq)) lastSeq = seq
+            synced = true
+            for (const event of pendingEvents.splice(0)) {
+              if (finished) break
+              handleEvent(event)
+            }
+            if (finished) return
             opened = true
             setStatus('ready')
             setMessage('')
@@ -4057,7 +4212,7 @@ window.__ModuleLoader__.load({
                     label: t('table.select'),
                   }),
                   h('span', { className: 'ssh-targetName' }, hostName(host)),
-                  h('span', { className: 'ssh-targetAddr' }, hostAddress(host)),
+                  h('span', { className: 'ssh-targetAddr' }, hostTarget(host)),
                   h('span', { className: 'ssh-targetCred' }, h(Badge, { tone: credential.tone }, credential.label)),
                 )
               }),
@@ -4283,8 +4438,13 @@ window.__ModuleLoader__.load({
 .ssh-errorBar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:.5px solid var(--ssh-border);color:var(--ssh-danger);font-size:11.5px;background:color-mix(in srgb,var(--ssh-danger) 7%,var(--ssh-bg))}
 .ssh-errorText{flex:1;min-width:0}
 .ssh-loadingPage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ssh-text-3);font-size:12.5px;padding:40px}
-.ssh-body{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);position:relative;overflow:hidden}
+.ssh-body{flex:1;min-height:0;display:grid;grid-template-columns:var(--ssh-tree-width,300px) minmax(0,1fr);position:relative;overflow:hidden}
 .ssh-body.collapsed{grid-template-columns:0 minmax(0,1fr)}
+.ssh-treeResizer{position:absolute;top:0;bottom:0;left:var(--ssh-tree-width,300px);width:10px;transform:translateX(-5px);z-index:26;cursor:col-resize;touch-action:none;outline:none}
+.ssh-treeResizer::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .12s ease}
+.ssh-treeResizer:hover::after,.ssh-treeResizer:focus-visible::after{background:var(--ssh-brand);box-shadow:0 0 0 1px color-mix(in srgb,var(--ssh-brand) 35%,transparent)}
+.ssh-body.collapsed .ssh-treeResizer{display:none}
+body.ssh-col-resizing,body.ssh-col-resizing *{cursor:col-resize!important;user-select:none!important}
 .ssh-sidebar{display:flex;flex-direction:column;min-height:0;border-right:.5px solid var(--ssh-border);background:var(--ssh-bg)}
 .ssh-body.collapsed .ssh-sidebar{display:none}
 .ssh-sideScrim{display:none}
@@ -4369,8 +4529,8 @@ window.__ModuleLoader__.load({
 .ssh-row:hover .ssh-inlineActions{opacity:1}
 .ssh-miniBtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ssh-text-3);cursor:pointer}
 .ssh-miniBtn:hover{background:var(--ssh-hover);color:var(--ssh-text)}
-.ssh-colInfo{gap:4px;flex-wrap:nowrap;overflow:hidden}
-.ssh-chip{display:inline-flex;align-items:center;height:21px;max-width:100%;padding:0 7px;border-radius:6px;border:.5px solid var(--ssh-border);background:var(--ssh-layer-3);font-size:10.5px;color:var(--ssh-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ssh-colInfo{gap:4px;row-gap:3px;flex-wrap:wrap;align-content:center;overflow:visible}
+.ssh-chip{display:inline-flex;flex:0 0 auto;align-items:center;height:21px;max-width:100%;padding:0 7px;border-radius:6px;border:.5px solid var(--ssh-border);background:var(--ssh-layer-3);font-size:10.5px;color:var(--ssh-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ssh-mutedText{font-size:11.5px;color:var(--ssh-dim)}
 .ssh-colNotes{min-width:0}
 .ssh-noteText{font-size:11.5px;color:var(--ssh-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -4620,6 +4780,7 @@ window.__ModuleLoader__.load({
 .ssh-tree::-webkit-scrollbar-thumb:hover,.ssh-tableScroll::-webkit-scrollbar-thumb:hover,.ssh-details::-webkit-scrollbar-thumb:hover,.ssh-terminalLog::-webkit-scrollbar-thumb:hover,.ssh-fileList::-webkit-scrollbar-thumb:hover,.ssh-page::-webkit-scrollbar-thumb:hover,.ssh-modalBody::-webkit-scrollbar-thumb:hover,.ssh-floating::-webkit-scrollbar-thumb:hover,.ssh-targetList::-webkit-scrollbar-thumb:hover{background:var(--dsw-alias-scrollbar-hover-l1,var(--ssh-border-strong));border:2px solid transparent;background-clip:padding-box}
 @media (max-width: 900px){
 .ssh-body{grid-template-columns:minmax(0,1fr)}
+.ssh-treeResizer{display:none}
 .ssh-sidebar{position:absolute;top:0;bottom:0;left:0;width:290px;z-index:25;display:none;box-shadow:var(--ssh-shadow)}
 .ssh-sidebar.open{display:flex}
 .ssh-body:not(.collapsed) .ssh-sideScrim{display:block;position:absolute;inset:0;z-index:20;background:color-mix(in srgb,var(--ssh-bg) 45%,transparent)}

package/index.js

@@ -15,9 +15,11 @@ const PTY_EVENTS_ROUTE = '/dsh-ssh-manage/pty/events'
 const PTY_OPEN_ROUTE = '/dsh-ssh-manage/pty/open'
 const PTY_INPUT_ROUTE = '/dsh-ssh-manage/pty/input'
 const PTY_RESIZE_ROUTE = '/dsh-ssh-manage/pty/resize'
+const PTY_ATTACH_ROUTE = '/dsh-ssh-manage/pty/attach'
 const PTY_CLOSE_ROUTE = '/dsh-ssh-manage/pty/close'
 const MAX_PTY_SESSIONS = 16
-const PTY_IDLE_MS = 30 * 60 * 1000
+const PTY_BUFFER_BYTES = 256 * 1024
+const PTY_IDLE_MS = 6 * 60 * 60 * 1000
 const MAX_PTY_BUFFER_BYTES = 4 * 1024 * 1024
 const PACKAGE_DIRECTORY = path.dirname(fileURLToPath(import.meta.url))
 const ASSETS = [
@@ -330,11 +332,18 @@ async function openTextSession(paths, payload) {
       try { session.close() } catch {}
       throw new Error('Terminal session already exists')
     }
-    const entry = { id, session, cols, rows, lastActivity: Date.now() }
+    const entry = { id, session, cols, rows, lastActivity: Date.now(), seq: 0, buffer: [], bufferBytes: 0 }
     ptyTextSessions.set(id, entry)
     session.stream.on('data', (chunk) => {
       entry.lastActivity = Date.now()
-      broadcastPty({ kind: 'output', id, data: chunk.toString('base64') })
+      const copy = Buffer.from(chunk)
+      entry.seq += 1
+      entry.buffer.push(copy)
+      entry.bufferBytes += copy.length
+      while (entry.bufferBytes > PTY_BUFFER_BYTES && entry.buffer.length > 0) {
+        entry.bufferBytes -= entry.buffer.shift().length
+      }
+      broadcastPty({ kind: 'output', id, seq: entry.seq, data: copy.toString('base64') })
     })
     session.stream.on('close', () => {
       closeTextSession(id)
@@ -347,7 +356,7 @@ async function openTextSession(paths, payload) {
       closeTextSession(id, false)
       broadcastPty({ kind: 'error', id, message: errorMessage(error) })
     })
-    return { id, cols, rows }
+    return { id, seq: 0, cols, rows, output: '' }
   } finally {
     ptyPendingIds.delete(id)
     ptyOpening -= 1
@@ -424,6 +433,42 @@ function registerPtyHttpRoutes(ctx, paths) {
     'pty open route',
   )
 
+  register(
+    {
+      kind: 'exact',
+      path: PTY_ATTACH_ROUTE,
+      handler: async (req, res) => {
+        if (rejectUnauthenticated(ctx, req, res)) return
+        if (req.method !== 'POST') {
+          res.statusCode = 405
+          res.end()
+          return
+        }
+        const body = (await readJsonBody(req)) ?? {}
+        const id = typeof body.id === 'string' ? body.id : ''
+        const entry = ptyTextSessions.get(id)
+        if (!entry) {
+          sendJson(res, 200, { ok: false, error: { code: 'pty-session-missing', message: 'Terminal session was not found' } })
+          return
+        }
+        try {
+          entry.lastActivity = Date.now()
+          entry.cols = boundedInteger(body.cols, 20, 500, entry.cols)
+          entry.rows = boundedInteger(body.rows, 5, 300, entry.rows)
+          entry.session.stream.setWindow(entry.rows, entry.cols, 0, 0)
+          const output = Buffer.concat(entry.buffer, entry.bufferBytes).toString('base64')
+          sendJson(res, 200, {
+            ok: true,
+            value: { id, seq: entry.seq, cols: entry.cols, rows: entry.rows, output },
+          })
+        } catch (error) {
+          sendJson(res, 200, { ok: false, error: { code: 'pty-attach-failed', message: errorMessage(error) } })
+        }
+      },
+    },
+    'pty attach route',
+  )
+
   for (const [path, action, label] of [
     [PTY_INPUT_ROUTE, 'input', 'pty input route'],
     [PTY_RESIZE_ROUTE, 'resize', 'pty resize route'],
@@ -669,7 +714,7 @@ function registerAssetRoutes(ctx) {
   }
 }
 
-export const __test = { resolveSshPaths, listSshHosts, saveSshHost, deleteSshHost, runAction, managerTool, MAX_BODY_BYTES, PTY_ROUTE, PTY_EVENTS_ROUTE, PTY_OPEN_ROUTE, PTY_INPUT_ROUTE, PTY_RESIZE_ROUTE, PTY_CLOSE_ROUTE, MAX_PTY_SESSIONS, ASSETS, handlePtyUpgrade, ptyTextSessions }
+export const __test = { resolveSshPaths, listSshHosts, saveSshHost, deleteSshHost, runAction, managerTool, MAX_BODY_BYTES, PTY_ROUTE, PTY_EVENTS_ROUTE, PTY_OPEN_ROUTE, PTY_ATTACH_ROUTE, PTY_INPUT_ROUTE, PTY_RESIZE_ROUTE, PTY_CLOSE_ROUTE, MAX_PTY_SESSIONS, PTY_BUFFER_BYTES, ASSETS, handlePtyUpgrade, ptyTextSessions }
 
 export const inject = ['webServer']
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-ssh-manage",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "A DSH sidebar plugin for managing SSH host profiles with a real interactive PTY terminal.",
   "license": "MIT",
   "private": false,