@goodandready/dsh-remote-workspace 0.3.8 → 0.3.9

package/lib/client.js

@@ -77,10 +77,10 @@ window.__ModuleLoader__.load({
 .drw-tab-btn.active{background:var(--dsw-alias-bg-layer-4);border-color:var(--dsw-alias-state-brand-primary);color:var(--dsw-alias-state-brand-primary)}
 
 .drw-term-window{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:10px;display:flex;flex-direction:column;height:340px;overflow:hidden;box-shadow:0 4px 14px var(--dsw-alias-border-l1)}
-.drw-term-header{background:var(--dsw-alias-bg-layer-2);padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:12px;color:var(--dsw-alias-label-secondary);font-family:monospace}
-.drw-term-body{flex:1;padding:10px 12px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.45;color:var(--dsw-alias-label-primary);white-space:pre-wrap;word-break:break-all}
+.drw-term-header{background:var(--dsw-alias-bg-layer-2);padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:12px;color:var(--dsw-alias-label-secondary);font-family:var(--drw-terminal-font,monospace)}
+.drw-term-body{flex:1;padding:10px 12px;overflow-y:auto;font-family:var(--drw-terminal-font,ui-monospace,SFMono-Regular,Consolas,monospace);font-size:12.5px;line-height:1.45;color:var(--dsw-alias-label-primary);white-space:pre-wrap;word-break:break-all}
 .drw-term-footer{display:flex;background:var(--dsw-alias-bg-layer-2);border-top:1px solid var(--dsw-alias-border-l2);padding:6px}
-.drw-term-input{flex:1;background:transparent;border:none;color:var(--dsw-alias-link-primary, var(--dsw-alias-label-primary));font-family:monospace;font-size:13px;padding:4px 8px;outline:none}
+.drw-term-input{flex:1;background:transparent;border:none;color:var(--dsw-alias-link-primary, var(--dsw-alias-label-primary));font-family:var(--drw-terminal-font,monospace);font-size:13px;padding:4px 8px;outline:none}
 
 .drw-explorer-box{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-2);padding:12px;display:flex;flex-direction:column;gap:10px}
 .drw-explorer-nav{display:flex;align-items:center;gap:8px;font-family:monospace;font-size:12px;background:var(--dsw-alias-bg-layer-1);padding:6px 10px;border-radius:6px;border:1px solid var(--dsw-alias-border-l2)}
@@ -109,12 +109,32 @@ window.__ModuleLoader__.load({
 .drw-alert-warning{background:var(--dsw-alias-state-warning-bg, var(--dsw-alias-bg-layer-2));color:var(--dsw-alias-state-warning-primary);border:1px solid var(--dsw-alias-state-warning-border, var(--dsw-alias-border-l2))}
 
 
+.drw-ws{min-height:100%;box-sizing:border-box;color:var(--dsw-alias-label-primary)}
+.drw-ws-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;position:sticky;top:0;background:var(--dsw-alias-bg-base,#171717);z-index:2}
+.drw-ws-panel{padding:0 16px 24px}
+.drw-ws-panel[hidden]{display:none!important}
+[data-pane=conversation],[class*=centerCol]{position:relative!important}
+[data-drw-view]{display:none;position:absolute;inset:0;z-index:60;overflow:auto;background:var(--dsw-alias-bg-base,#171717)}
+html[data-drw-active] [data-drw-view]{display:block!important}
+html[data-drw-active] [data-pane=conversation] > *:not([data-drw-view]),html[data-drw-active] [class*=centerCol] > *:not([data-drw-view]){display:none!important}
+.drw-entry-clone{display:flex;align-items:center;gap:8px}
+.drw-entry-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}
+[data-dsh-frame][data-sidebar-collapsed] .drw-entry-label{display:none}
+
       `
       document.head.appendChild(style)
     }
 
     const en = {
       title: 'Remote Workspace',
+      navLabel: 'Remote',
+      wsBack: 'Back',
+      wsHosts: 'Hosts',
+      wsTerminal: 'Terminal',
+      wsFiles: 'Files',
+      wsDocker: 'Containers',
+      wsTunnels: 'Tunnels',
+      wsCluster: 'Cluster',
       subtitle: 'Native SSH connections, SFTP file access, 3-way mirror sync, and port forwarding tunnels.',
       status: 'Ready',
       actionFailed: 'The request failed.',
@@ -141,6 +161,11 @@ window.__ModuleLoader__.load({
 
       tabEnv: '🗃️ .env Manager',
       btnImportSsh: 'Import ~/.ssh/config',
+      importAdded: 'Imported {count} hosts.',
+      skipWildcard: 'pattern is not a single host',
+      skipMatch: 'Match blocks are not imported',
+      skipDuplicate: 'already imported',
+      skipMissing: 'included file was not found',
       envTitle: 'Remote Environment Variables (.env)',
       envKey: 'Key',
       envVal: 'Value',
@@ -225,6 +250,47 @@ window.__ModuleLoader__.load({
       fAuthType: 'Authentication Method',
       fAuthKey: 'SSH Private Key',
       fAuthPass: 'Password',
+      fEnvironment: 'Environment',
+      fLocation: 'Location',
+      fTags: 'Tags',
+      fDescription: 'Description',
+      groupFlat: 'Flat',
+      groupEnvironment: 'By environment',
+      groupTag: 'By tag',
+      groupUngrouped: 'Ungrouped',
+      testGroup: 'Test group',
+      groupOnline: 'online, {latency} ms',
+      groupOffline: 'offline: {err}',
+      tabProfiles: 'Hosts',
+      tabCluster: 'Cluster',
+      tabFiles: 'Files',
+      btnUpload: 'Upload',
+      btnDownload: 'Download',
+      transferProgress: '{name}: {percent}%',
+      transferFailed: 'Transfer failed: {name}',
+      transferCancel: 'Cancel',
+      clusterTitle: 'Run on a group',
+      clusterCommand: 'Command',
+      clusterRun: 'Run',
+      clusterRunning: 'Running...',
+      clusterCount: '{count} hosts configured',
+      clusterOk: 'ok',
+      clusterFail: 'failed',
+      fAuthAgent: 'SSH Agent',
+      authPromptTitle: 'Sign-in code',
+      authPromptCode: 'One-time code',
+      authPromptSubmit: 'Continue',
+      fAuthKeyShort: 'key',
+      fAuthPassShort: 'pwd',
+      fAuthAgentShort: 'agent',
+      fAgentPath: 'Agent socket',
+      fAgentPathHint: 'Empty uses SSH_AUTH_SOCK. Use pageant on Windows.',
+      fJumpHosts: 'Jump hosts',
+      fJumpHostsHint: 'Profile ids in order, separated by commas. The first host is the entry bastion.',
+      fProxyCommand: 'Proxy command',
+      fProxyCommandHint: 'OpenSSH ProxyCommand. Tokens: %h host, %p port, %r user, %n profile name.',
+      fTerminalFont: 'Terminal font',
+      fTerminalFontHint: 'Font family for the terminal. Leave empty to keep the default monospace stack.',
       fKeyPath: 'Private Key Path',
       fKeyPathHint: 'Path to ~/.ssh/id_rsa or /home/user/.ssh/id_ed25519',
       fPassphrase: 'Key Passphrase (optional)',
@@ -271,6 +337,14 @@ window.__ModuleLoader__.load({
 
     const zh = {
       title: '远程开发工作区',
+      navLabel: '远程',
+      wsBack: '返回',
+      wsHosts: '主机',
+      wsTerminal: '终端',
+      wsFiles: '文件',
+      wsDocker: '容器',
+      wsTunnels: '隧道',
+      wsCluster: '集群',
       subtitle: '支持原生 SSH 连接、SFTP 文件访问、3-way 镜像同步与端口转发隧道。',
       status: '就绪',
       actionFailed: '请求失败。',
@@ -284,6 +358,11 @@ window.__ModuleLoader__.load({
       tabContainers: '🐳 容器管理',
       tabEnv: '🗃️ 环境变量',
       btnImportSsh: '导入 ~/.ssh/config',
+      importAdded: '已导入 {count} 台主机。',
+      skipWildcard: '通配主机不会导入',
+      skipMatch: '不导入 Match 块',
+      skipDuplicate: '已经导入',
+      skipMissing: '找不到被包含的文件',
       envTitle: '远程环境变量配置 (.env)',
       envKey: '变量名',
       envVal: '变量值',
@@ -379,6 +458,47 @@ window.__ModuleLoader__.load({
       fAuthType: '身份认证方式',
       fAuthKey: 'SSH 私钥',
       fAuthPass: '账户密码',
+      fEnvironment: '环境',
+      fLocation: '位置',
+      fTags: '标签',
+      fDescription: '说明',
+      groupFlat: '平铺',
+      groupEnvironment: '按环境',
+      groupTag: '按标签',
+      groupUngrouped: '未分组',
+      testGroup: '测试本组',
+      groupOnline: '在线，{latency} 毫秒',
+      groupOffline: '离线：{err}',
+      tabProfiles: '主机',
+      tabCluster: '集群',
+      tabFiles: '文件',
+      btnUpload: '上传',
+      btnDownload: '下载',
+      transferProgress: '{name}：{percent}%',
+      transferFailed: '传输失败：{name}',
+      transferCancel: '取消',
+      clusterTitle: '在一组主机上运行',
+      clusterCommand: '命令',
+      clusterRun: '运行',
+      clusterRunning: '正在运行...',
+      clusterCount: '已配置 {count} 台主机',
+      clusterOk: '成功',
+      clusterFail: '失败',
+      fAuthAgent: 'SSH 代理',
+      authPromptTitle: '登录验证码',
+      authPromptCode: '一次性验证码',
+      authPromptSubmit: '继续',
+      fAuthKeyShort: '密钥',
+      fAuthPassShort: '密码',
+      fAuthAgentShort: '代理',
+      fAgentPath: '代理套接字',
+      fAgentPathHint: '留空则使用 SSH_AUTH_SOCK。Windows 上填写 pageant。',
+      fJumpHosts: '跳板主机',
+      fJumpHostsHint: '按经过顺序填写配置编号，用逗号分隔。第一台是入口堡垒机。',
+      fProxyCommand: '代理命令',
+      fProxyCommandHint: 'OpenSSH ProxyCommand。令牌：%h 主机，%p 端口，%r 用户，%n 配置名称。',
+      fTerminalFont: '终端字体',
+      fTerminalFontHint: '终端使用的字体族。留空则使用默认等宽字体。',
       fKeyPath: '私钥文件路径',
       fKeyPathHint: '例如 ~/.ssh/id_rsa 或 /home/user/.ssh/id_ed25519',
       fPassphrase: '私钥口令 (可选)',
@@ -717,6 +837,13 @@ window.__ModuleLoader__.load({
 
     // --- Sub-component: Web Terminal Tab ---
 
+    function applyTerminalFont(font) {
+      if (typeof document === 'undefined') return
+      const value = String(font || '').trim()
+      if (value) document.documentElement.style.setProperty('--drw-terminal-font', value)
+      else document.documentElement.style.removeProperty('--drw-terminal-font')
+    }
+
     function TerminalTab(props) {
       const { activeProfile, t } = props
       const [connected, setConnected] = React.useState(false)
@@ -902,7 +1029,7 @@ window.__ModuleLoader__.load({
             ? React.createElement(
                 'form',
                 { className: 'drw-term-footer', onSubmit: sendCommand },
-                React.createElement('span', { style: { color: 'var(--dsw-alias-link-primary)', padding: '4px 6px', fontFamily: 'monospace' } }, '$'),
+                React.createElement('span', { style: { color: 'var(--dsw-alias-link-primary)', padding: '4px 6px', fontFamily: 'inherit' } }, '$'),
                 React.createElement('input', {
                   className: 'drw-term-input',
                   type: 'text',
@@ -933,6 +1060,8 @@ window.__ModuleLoader__.load({
       const [editContent, setEditContent] = React.useState('')
       const [previewLoading, setPreviewLoading] = React.useState(false)
       const [saveStatus, setSaveStatus] = React.useState(null)
+      const [transfer, setTransfer] = React.useState(null)
+      const transferAbort = React.useRef(null)
 
       const loadDir = async (dirPath) => {
         if (!activeProfile) return
@@ -990,6 +1119,75 @@ window.__ModuleLoader__.load({
         setPreviewLoading(false)
       }
 
+
+      const filePathFor = (entry) => currentPath.endsWith('/') ? currentPath + entry.filename : currentPath + '/' + entry.filename
+
+      const downloadFile = async (entry, event) => {
+        if (event) event.stopPropagation()
+        if (!activeProfile) return
+        const ctrl = new AbortController()
+        transferAbort.current = () => ctrl.abort()
+        setTransfer({ name: entry.filename, percent: 0 })
+        try {
+          const params = new URLSearchParams({ profileId: activeProfile.id, filePath: filePathFor(entry) })
+          const res = await fetch('/dsh-remote-workspace/file/download?' + params.toString(), { signal: ctrl.signal })
+          if (!res.ok || !res.body) {
+            setTransfer({ name: entry.filename, error: true })
+            return
+          }
+          const total = Number(res.headers.get('content-length')) || 0
+          const reader = res.body.getReader()
+          const chunks = []
+          let loaded = 0
+          while (true) {
+            const step = await reader.read()
+            if (step.done) break
+            chunks.push(step.value)
+            loaded += step.value.length
+            setTransfer({ name: entry.filename, percent: total ? Math.min(100, Math.round((loaded / total) * 100)) : 0 })
+          }
+          const blob = new Blob(chunks)
+          const link = document.createElement('a')
+          link.href = URL.createObjectURL(blob)
+          link.download = entry.filename
+          link.click()
+          URL.revokeObjectURL(link.href)
+          setTransfer(null)
+        } catch (err) {
+          setTransfer({ name: entry.filename, error: err && err.name === 'AbortError' })
+        }
+      }
+
+      const uploadFile = () => {
+        if (!activeProfile) return
+        const input = document.createElement('input')
+        input.type = 'file'
+        input.onchange = () => {
+          const file = input.files && input.files[0]
+          if (!file) return
+          const remotePath = currentPath.endsWith('/') ? currentPath + file.name : currentPath + '/' + file.name
+          const xhr = new XMLHttpRequest()
+          const params = new URLSearchParams({ profileId: activeProfile.id, filePath: remotePath })
+          xhr.open('POST', '/dsh-remote-workspace/file/upload?' + params.toString())
+          transferAbort.current = () => xhr.abort()
+          setTransfer({ name: file.name, percent: 0 })
+          xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable) {
+              setTransfer({ name: file.name, percent: Math.min(100, Math.round((event.loaded / event.total) * 100)) })
+            }
+          }
+          xhr.onload = () => {
+            setTransfer(null)
+            if (xhr.status >= 200 && xhr.status < 300) loadDir(currentPath)
+            else setTransfer({ name: file.name, error: true })
+          }
+          xhr.onerror = () => setTransfer({ name: file.name, error: true })
+          xhr.onabort = () => setTransfer({ name: file.name, error: true })
+          xhr.send(file)
+        }
+        input.click()
+      }
+
       const handleSaveFile = async () => {
         if (!previewFile || !activeProfile) return
         setSaveStatus('saving')
@@ -1027,8 +1225,15 @@ window.__ModuleLoader__.load({
               disabled: loading
             },
             loading ? 'Refreshing...' : '🔄 Refresh'
-          )
+          ),
+          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: uploadFile }, t('btnUpload'))
         ),
+        transfer
+          ? React.createElement('div', { className: 'drw-hint', role: 'status' },
+              transfer.error ? t('transferFailed', { name: transfer.name }) : t('transferProgress', { name: transfer.name, percent: transfer.percent || 0 }),
+              React.createElement('button', { type: 'button', className: 'drw-btn', onClick: () => transferAbort.current && transferAbort.current() }, t('transferCancel'))
+            )
+          : null,
         React.createElement(
           'div',
           { className: 'drw-explorer-nav' },
@@ -1069,7 +1274,8 @@ window.__ModuleLoader__.load({
                     'div',
                     { className: 'drw-file-meta' },
                     e.size !== undefined ? React.createElement('span', null, `${Math.round(e.size / 1024)} KB`) : null,
-                    e.permissions ? React.createElement('span', { style: { opacity: 0.6 } }, e.permissions) : null
+                    e.permissions ? React.createElement('span', { style: { opacity: 0.6 } }, e.permissions) : null,
+                    e.isDirectory ? null : React.createElement('button', { type: 'button', className: 'drw-btn', onClick: (event) => downloadFile(e, event) }, t('btnDownload'))
                   )
                 )
               )
@@ -1158,6 +1364,31 @@ window.__ModuleLoader__.load({
       )
     }
 
+
+    function groupProfiles(list, mode) {
+      const profiles = Array.isArray(list) ? list : []
+      const bucket = (map, key, profile) => {
+        const name = key || 'ungrouped'
+        if (!map.has(name)) map.set(name, [])
+        map.get(name).push(profile)
+      }
+      if (mode === 'environment') {
+        const map = new Map()
+        profiles.forEach((profile) => bucket(map, String(profile.environment || '').trim(), profile))
+        return Array.from(map.entries()).map(([key, items]) => ({ key, items }))
+      }
+      if (mode === 'tag') {
+        const map = new Map()
+        profiles.forEach((profile) => {
+          const tags = Array.isArray(profile.tags) ? profile.tags.map((item) => String(item).trim()).filter(Boolean) : []
+          if (!tags.length) bucket(map, '', profile)
+          else tags.forEach((tag) => bucket(map, tag, profile))
+        })
+        return Array.from(map.entries()).map(([key, items]) => ({ key, items }))
+      }
+      return [{ key: 'all', items: profiles }]
+    }
+
     function ProfilesPanel(panel) {
     const {
         t,
@@ -1182,6 +1413,22 @@ window.__ModuleLoader__.load({
         showPassword,
         setShowPassword,
       } = panel
+      const [groupMode, setGroupMode] = React.useState('flat')
+      const [groupReport, setGroupReport] = React.useState([])
+      const sections = groupProfiles(profiles, groupMode)
+      const testGroup = async (items) => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/profiles/test-group', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ids: items.map((item) => item.id) })
+          })
+          const data = await res.json()
+          if (data && data.ok) setGroupReport(data.results || [])
+        } catch (err) {
+          setGroupReport([])
+        }
+      }
       return (
         React.createElement(
           'div',
@@ -1208,7 +1455,11 @@ window.__ModuleLoader__.load({
                         passphrase: '',
                         password: '',
                         remoteWorkspace: '',
-                        localMirrorPath: ''
+                        localMirrorPath: '',
+                        environment: '',
+                        tags: [],
+                        location: '',
+                        description: ''
                       })
                       setTestResult(null)
                     }
@@ -1286,6 +1537,62 @@ window.__ModuleLoader__.load({
                   )
                 ),
 
+                React.createElement(
+                  'div',
+                  { className: 'drw-field' },
+                  React.createElement('span', { className: 'drw-label' }, t('fJumpHosts')),
+                  React.createElement('input', {
+                    className: 'drw-input',
+                    placeholder: 'bastion-a, bastion-b',
+                    value: editing.jumpHostId || ((editing.jumpHosts || []).join(', ')),
+                    onChange: (e) => {
+                      const raw = e.target.value;
+                      const jumpHosts = raw.split(',').map((item) => item.trim()).filter(Boolean);
+                      setEditing({ ...editing, jumpHostId: raw, jumpHosts });
+                    }
+                  }),
+                  React.createElement('span', { className: 'drw-hint' }, t('fJumpHostsHint'))
+                ),
+
+                React.createElement(
+                  'div',
+                  { className: 'drw-field' },
+                  React.createElement('span', { className: 'drw-label' }, t('fProxyCommand')),
+                  React.createElement('input', {
+                    className: 'drw-input',
+                    placeholder: 'cloudflared access ssh --hostname %h',
+                    value: editing.proxyCommand || '',
+                    onChange: (e) => setEditing({ ...editing, proxyCommand: e.target.value })
+                  }),
+                  React.createElement('span', { className: 'drw-hint' }, t('fProxyCommandHint'))
+                ),
+
+
+                React.createElement(
+                  'div',
+                  { className: 'drw-grid-2' },
+                  React.createElement('div', { className: 'drw-field' },
+                    React.createElement('span', { className: 'drw-label' }, t('fEnvironment')),
+                    React.createElement('input', { className: 'drw-input', value: editing.environment || '', onChange: (e) => setEditing({ ...editing, environment: e.target.value }) })
+                  ),
+                  React.createElement('div', { className: 'drw-field' },
+                    React.createElement('span', { className: 'drw-label' }, t('fLocation')),
+                    React.createElement('input', { className: 'drw-input', value: editing.location || '', onChange: (e) => setEditing({ ...editing, location: e.target.value }) })
+                  ),
+                  React.createElement('div', { className: 'drw-field' },
+                    React.createElement('span', { className: 'drw-label' }, t('fTags')),
+                    React.createElement('input', {
+                      className: 'drw-input',
+                      value: Array.isArray(editing.tags) ? editing.tags.join(', ') : (editing.tags || ''),
+                      onChange: (e) => setEditing({ ...editing, tags: e.target.value.split(',').map((item) => item.trim()).filter(Boolean) })
+                    })
+                  ),
+                  React.createElement('div', { className: 'drw-field' },
+                    React.createElement('span', { className: 'drw-label' }, t('fDescription')),
+                    React.createElement('input', { className: 'drw-input', value: editing.description || '', onChange: (e) => setEditing({ ...editing, description: e.target.value }) })
+                  )
+                ),
+
                 // Auth Method Segmented Switcher (Key vs Password)
                 React.createElement(
                   'div',
@@ -1298,11 +1605,20 @@ window.__ModuleLoader__.load({
                       'button',
                       {
                         type: 'button',
-                        className: `drw-segmented-item ${editing.authType !== 'password' ? 'drw-segmented-item-active' : ''}`,
+                        className: `drw-segmented-item ${editing.authType !== 'password' && editing.authType !== 'agent' ? 'drw-segmented-item-active' : ''}`,
                         onClick: () => setEditing({ ...editing, authType: 'key' })
                       },
                       '🔑 ' + t('fAuthKey')
                     ),
+                    React.createElement(
+                      'button',
+                      {
+                        type: 'button',
+                        className: `drw-segmented-item ${editing.authType === 'agent' ? 'drw-segmented-item-active' : ''}`,
+                        onClick: () => setEditing({ ...editing, authType: 'agent' })
+                      },
+                      t('fAuthAgent')
+                    ),
                     React.createElement(
                       'button',
                       {
@@ -1316,7 +1632,19 @@ window.__ModuleLoader__.load({
                 ),
 
                 // Conditional Auth Inputs
-                editing.authType === 'password'
+                editing.authType === 'agent'
+                  ? React.createElement(
+                      'div',
+                      { className: 'drw-field' },
+                      React.createElement('span', { className: 'drw-label' }, t('fAgentPath')),
+                      React.createElement('input', {
+                        className: 'drw-input',
+                        placeholder: t('fAgentPathHint'),
+                        value: editing.agentPath || '',
+                        onChange: (e) => setEditing({ ...editing, agentPath: e.target.value })
+                      })
+                    )
+                  : editing.authType === 'password'
                   ? React.createElement(
                       'div',
                       { className: 'drw-field' },
@@ -1551,6 +1879,23 @@ window.__ModuleLoader__.load({
               )
             : null,
 
+
+          React.createElement('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px' } },
+            ['flat', 'environment', 'tag'].map((mode) => React.createElement('button', {
+              key: mode,
+              type: 'button',
+              className: groupMode === mode ? 'drw-btn drw-btn-primary' : 'drw-btn',
+              onClick: () => setGroupMode(mode)
+            }, t(mode === 'flat' ? 'groupFlat' : mode === 'environment' ? 'groupEnvironment' : 'groupTag')))
+          ),
+          groupReport.length
+            ? React.createElement('div', { className: 'drw-hint', role: 'status' },
+                groupReport.map((item) => React.createElement('div', { key: item.id + (item.name || '') },
+                  (item.name || item.id) + ': ' + (item.ok ? t('groupOnline', { latency: item.latencyMs || 0 }) : t('groupOffline', { err: item.error || '' }))
+                ))
+              )
+            : null,
+
           // Profiles List Table
           profiles.length > 0
             ? React.createElement(
@@ -1572,7 +1917,17 @@ window.__ModuleLoader__.load({
                 React.createElement(
                   'tbody',
                   null,
-                  profiles.map((p) => {
+                  sections.flatMap((section) => {
+                    const header = groupMode === 'flat' ? [] : [
+                      React.createElement('tr', { key: 'group-' + section.key },
+                        React.createElement('td', { colSpan: 5 },
+                          React.createElement('strong', null, section.key === 'ungrouped' ? t('groupUngrouped') : section.key),
+                          ' ',
+                          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: () => testGroup(section.items) }, t('testGroup'))
+                        )
+                      )
+                    ]
+                    return header.concat(section.items.map((p) => {
                     const isAct = p.id === activeId
                     return React.createElement(
                       'tr',
@@ -1584,7 +1939,7 @@ window.__ModuleLoader__.load({
                         React.createElement(
                           'span',
                           { className: 'drw-badge', style: { marginLeft: '8px' } },
-                          p.authType === 'password' ? '🔒 pwd' : '🔑 key'
+                          p.authType === 'password' ? '🔒 ' + t('fAuthPassShort') : p.authType === 'agent' ? t('fAuthAgentShort') : '🔑 ' + t('fAuthKeyShort')
                         ),
                         isAct
                           ? React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginLeft: '6px' } }, t('activeBadge'))
@@ -1637,6 +1992,7 @@ window.__ModuleLoader__.load({
                         )
                       )
                     )
+                  }))
                   })
                 )
               )
@@ -1873,6 +2229,57 @@ window.__ModuleLoader__.load({
       )
     }
 
+    function ClusterPanel(props) {
+      const t = props.t
+      const profiles = props.profiles || []
+      const [command, setCommand] = React.useState('')
+      const [environment, setEnvironment] = React.useState('')
+      const [tag, setTag] = React.useState('')
+      const [rows, setRows] = React.useState([])
+      const [open, setOpen] = React.useState('')
+      const [running, setRunning] = React.useState(false)
+      const run = async () => {
+        setRunning(true)
+        try {
+          const res = await fetch('/dsh-remote-workspace/cluster', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              command,
+              environment,
+              tags: tag ? [tag] : [],
+              maxWorkers: 8
+            })
+          })
+          const data = await res.json()
+          setRows(data && data.results ? data.results : [])
+        } catch (err) {
+          setRows([])
+        }
+        setRunning(false)
+      }
+      return React.createElement('div', { className: 'drw-card' },
+        React.createElement('div', { className: 'drw-card-title' }, t('clusterTitle')),
+        React.createElement('div', { className: 'drw-grid-2' },
+          React.createElement('input', { className: 'drw-input', placeholder: t('fEnvironment'), value: environment, onChange: (e) => setEnvironment(e.target.value) }),
+          React.createElement('input', { className: 'drw-input', placeholder: t('fTags'), value: tag, onChange: (e) => setTag(e.target.value) })
+        ),
+        React.createElement('div', { style: { display: 'flex', gap: '8px', marginTop: '8px' } },
+          React.createElement('input', { className: 'drw-input', placeholder: t('clusterCommand'), value: command, onChange: (e) => setCommand(e.target.value) }),
+          React.createElement('button', { type: 'button', className: 'drw-btn drw-btn-primary', disabled: running || !command.trim(), onClick: run }, running ? t('clusterRunning') : t('clusterRun'))
+        ),
+        React.createElement('div', { className: 'drw-hint' }, t('clusterCount', { count: profiles.length })),
+        rows.map((row, index) => React.createElement('div', { key: (row.alias || '') + index, className: 'drw-field' },
+          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: () => setOpen(open === String(index) ? '' : String(index)) },
+            (row.alias || row.host) + ' ' + (row.success ? t('clusterOk') : t('clusterFail')) + ' ' + (row.durationMs || 0) + ' ms'
+          ),
+          open === String(index)
+            ? React.createElement('pre', { className: 'drw-term-body' }, row.error || row.stdout || row.stderr || '')
+            : null
+        ))
+      )
+    }
+
     function SettingsView(props) {
       const [activeTab, setActiveTab] = React.useState('profiles')
       const [healthData, setHealthData] = React.useState(null)
@@ -1886,9 +2293,13 @@ window.__ModuleLoader__.load({
       const [busy, setBusy] = React.useState(null)
       const [testResult, setTestResult] = React.useState(null)
       const [actionError, setActionError] = React.useState('')
+      const [authPrompts, setAuthPrompts] = React.useState([])
+      const [authAnswers, setAuthAnswers] = React.useState({})
+      const [importReport, setImportReport] = React.useState(null)
       const [syncMsg, setSyncMsg] = React.useState(null)
       const [tunnelMsg, setTunnelMsg] = React.useState(null)
       const [showPassword, setShowPassword] = React.useState(false)
+      const [terminalFont, setTerminalFont] = React.useState('')
 
       // Tunnel creation inputs
       const [newTunnelLocal, setNewTunnelLocal] = React.useState('3000')
@@ -1915,7 +2326,12 @@ window.__ModuleLoader__.load({
         return text ? null : data
       }
 
-      const loadState = async () => {
+      const loadInFlight = React.useRef(false)
+
+      const loadState = async (force) => {
+        const hidden = typeof document !== 'undefined' && document.hidden
+        if (!force && (hidden || loadInFlight.current)) return
+        loadInFlight.current = true
         try {
           const res = await fetch('/dsh-remote-workspace/state')
           const data = await reportAction(res)
@@ -1924,20 +2340,67 @@ window.__ModuleLoader__.load({
             setActiveId(data.activeId || null)
             setTunnels(data.tunnels || [])
             setAutoSync(Boolean(data.autoSync))
+            setAuthPrompts(data.authPrompts || [])
+            setTerminalFont(data.terminalFontFamily || '')
+            applyTerminalFont(data.terminalFontFamily || '')
             if (data.activeId) {
               fetch(`/dsh-remote-workspace/health?profileId=${data.activeId}`).then(r => r.json()).then(h => { if (h.ok) setHealthData(h.health) }).catch(() => {})
             }
           }
         } catch (err) {
           setActionError(err && err.message ? err.message : t('actionFailed'))
+        } finally {
+          loadInFlight.current = false
         }
       }
 
       React.useEffect(() => {
         ensureCss()
-        loadState()
+        loadState(true)
+        const timer = setInterval(() => loadState(false), 2000)
+        const onVisible = () => {
+          if (typeof document !== 'undefined' && !document.hidden) loadState(true)
+        }
+        if (typeof document !== 'undefined') document.addEventListener('visibilitychange', onVisible)
+        return () => {
+          clearInterval(timer)
+          if (typeof document !== 'undefined') document.removeEventListener('visibilitychange', onVisible)
+        }
       }, [])
 
+
+      const saveTerminalFont = async () => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/terminal/font', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fontFamily: terminalFont })
+          })
+          const data = await reportAction(res)
+          if (data && data.ok) {
+            setTerminalFont(data.terminalFontFamily || '')
+            applyTerminalFont(data.terminalFontFamily || '')
+          }
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
+      const submitAuth = async (prompt) => {
+        const answers = (prompt.prompts || []).map((_, index) => authAnswers[prompt.profileId + ':' + index] || '')
+        try {
+          const res = await fetch('/dsh-remote-workspace/auth/keyboard', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id: prompt.profileId, answers })
+          })
+          const data = await reportAction(res)
+          if (data) await loadState()
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
       const handleSave = async (profile) => {
         setBusy('saving')
         try {
@@ -2102,6 +2565,31 @@ window.__ModuleLoader__.load({
 
       const activeProfile = profiles.find((p) => p.id === activeId)
 
+      const handleImport = async () => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/profiles/import-ssh-config', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: '{}'
+          })
+          const data = await reportAction(res)
+          if (data) {
+            setImportReport(data)
+            await loadState()
+          }
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
+      const skipReason = (reason) => {
+        if (reason === 'wildcard') return t('skipWildcard')
+        if (reason === 'match') return t('skipMatch')
+        if (reason === 'duplicate') return t('skipDuplicate')
+        if (reason === 'missing-include') return t('skipMissing')
+        return reason
+      }
+
       return React.createElement(
         'div',
         { className: 'drw-page' },
@@ -2133,7 +2621,76 @@ window.__ModuleLoader__.load({
         ),
 
 
-        React.createElement(ProfilesPanel, { t, editing, setEditing, setTestResult, profiles, activeId, busy, handleSave, testResult, handleTest, handleSetActive, handleDelete, browserOpen, setBrowserOpen, browserPath, browserEntries, browserLoading, openDirectoryBrowser, fetchRemoteDir, showPassword, setShowPassword }),
+
+        authPrompts.length
+          ? React.createElement(
+              'div',
+              { className: 'drw-card', role: 'dialog', 'aria-label': t('authPromptTitle') },
+              React.createElement('div', { className: 'drw-page-title' }, t('authPromptTitle')),
+              authPrompts.map((prompt) => React.createElement(
+                'div',
+                { key: prompt.profileId, className: 'drw-field' },
+                prompt.instructions
+                  ? React.createElement('span', { className: 'drw-hint' }, prompt.instructions)
+                  : null,
+                (prompt.prompts || []).map((field, index) => React.createElement('input', {
+                  key: index,
+                  className: 'drw-input',
+                  type: field.echo ? 'text' : 'password',
+                  placeholder: field.prompt || t('authPromptCode'),
+                  value: authAnswers[prompt.profileId + ':' + index] || '',
+                  onChange: (e) => setAuthAnswers({ ...authAnswers, [prompt.profileId + ':' + index]: e.target.value })
+                })),
+                React.createElement('button', {
+                  type: 'button',
+                  className: 'drw-btn drw-btn-primary',
+                  onClick: () => submitAuth(prompt)
+                }, t('authPromptSubmit'))
+              ))
+            )
+          : null,
+
+
+        React.createElement(
+          'div',
+          { className: 'drw-card' },
+          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: handleImport }, t('btnImportSsh')),
+          importReport
+            ? React.createElement(
+                'div',
+                { className: 'drw-hint', role: 'status' },
+                t('importAdded', { count: importReport.count || 0 }),
+                (importReport.skipped || []).map((item, index) => React.createElement('div', { key: index }, (item.name || '') + ': ' + skipReason(item.reason)))
+              )
+            : null
+        ),
+
+
+        React.createElement('div', { className: 'drw-card' },
+          React.createElement('label', { className: 'drw-label' }, t('fTerminalFont')),
+          React.createElement('div', { style: { display: 'flex', gap: '8px' } },
+            React.createElement('input', {
+              className: 'drw-input',
+              type: 'text',
+              value: terminalFont,
+              placeholder: 'ui-monospace, Consolas, monospace',
+              onChange: (e) => setTerminalFont(e.target.value)
+            }),
+            React.createElement('button', { type: 'button', className: 'drw-btn', onClick: saveTerminalFont }, t('btnSave'))
+          ),
+          React.createElement('div', { className: 'drw-hint' }, t('fTerminalFontHint'))
+        ),
+
+        React.createElement('div', { style: { display: 'flex', gap: '8px' } },
+          React.createElement('button', { type: 'button', className: activeTab === 'profiles' ? 'drw-btn drw-btn-primary' : 'drw-btn', onClick: () => setActiveTab('profiles') }, t('tabProfiles')),
+          React.createElement('button', { type: 'button', className: activeTab === 'cluster' ? 'drw-btn drw-btn-primary' : 'drw-btn', onClick: () => setActiveTab('cluster') }, t('tabCluster'))
+          , React.createElement('button', { type: 'button', className: activeTab === 'files' ? 'drw-btn drw-btn-primary' : 'drw-btn', onClick: () => setActiveTab('files') }, t('tabFiles'))
+        ),
+        activeTab === 'cluster'
+          ? React.createElement(ClusterPanel, { t, profiles })
+          : activeTab === 'files'
+            ? React.createElement(ExplorerTab, { t, activeProfile })
+            : React.createElement(ProfilesPanel, { t, editing, setEditing, setTestResult, profiles, activeId, busy, handleSave, testResult, handleTest, handleSetActive, handleDelete, browserOpen, setBrowserOpen, browserPath, browserEntries, browserLoading, openDirectoryBrowser, fetchRemoteDir, showPassword, setShowPassword }),
 
 
         // Section 2: Active Connection Diagnostics (ClineBot Card 4 style)
@@ -2445,7 +3002,232 @@ window.__ModuleLoader__.load({
       )
     }
 
+    const DRW_ACTIVE = 'data-drw-active'
+    const DRW_VIEW = 'data-drw-view'
+    const DRW_ENTRY = 'data-drw-entry'
+    const DRW_PANEL = 'remote-workspace'
+    const DRW_ICON = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2"></rect><path d="M8 20h8"></path><path d="M12 16v4"></path></svg>'
+
+    function workspaceTranslator(ctx) {
+      let lang = ''
+      try {
+        lang = ctx && ctx.locale && typeof ctx.locale.getLocale === 'function' ? ctx.locale.getLocale() : ''
+      } catch (err) { lang = '' }
+      if (typeof lang === 'string' && (lang === 'zh' || lang.indexOf('zh') === 0)) return makeT(zh, en)
+      return makeT(en, zh)
+    }
+
+    function WorkspaceScreen(props) {
+      const t = workspaceTranslator(props.ctx)
+      const [tab, setTab] = React.useState('hosts')
+      const [profiles, setProfiles] = React.useState([])
+      const [activeId, setActiveId] = React.useState('')
+      const [tunnels, setTunnels] = React.useState([])
+      const [localPort, setLocalPort] = React.useState('3000')
+      const [remotePort, setRemotePort] = React.useState('3000')
+      const [tunnelMsg, setTunnelMsg] = React.useState(null)
+      const [busy, setBusy] = React.useState(null)
+      const activeProfile = profiles.find((item) => item.id === activeId) || null
+
+      const loadState = async () => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/state')
+          const data = await res.json()
+          if (data && data.ok) {
+            setProfiles(data.profiles || [])
+            setActiveId(data.activeId || '')
+            setTunnels(data.tunnels || [])
+          }
+        } catch (err) { /* state refresh is best effort */ }
+      }
+
+      React.useEffect(() => {
+        ensureCss()
+        loadState()
+      }, [])
+
+      const startTunnel = async () => {
+        if (!activeId) return
+        setBusy('tunnel_open')
+        try {
+          const res = await fetch('/dsh-remote-workspace/tunnels/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profileId: activeId, localPort, remotePort })
+          })
+          const data = await res.json()
+          setTunnelMsg(data && data.ok
+            ? { ok: true, text: t('tOpenOk', { localPort, remotePort }) }
+            : { ok: false, text: t('tOpenErr', { err: (data && data.error) || 'Failed' }) })
+          if (data && data.ok) await loadState()
+        } catch (err) {
+          setTunnelMsg({ ok: false, text: t('tOpenErr', { err: err.message }) })
+        }
+        setBusy(null)
+      }
+
+      const stopTunnel = async (tunnelId) => {
+        setBusy('tunnel_stop')
+        try {
+          await fetch('/dsh-remote-workspace/tunnels/stop', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tunnelId })
+          })
+          await loadState()
+        } catch (err) { /* stop is reported by the next state load */ }
+        setBusy(null)
+      }
+
+      const tabs = [
+        ['hosts', 'wsHosts'],
+        ['terminal', 'wsTerminal'],
+        ['files', 'wsFiles'],
+        ['docker', 'wsDocker'],
+        ['tunnels', 'wsTunnels'],
+        ['cluster', 'wsCluster']
+      ]
+
+      return React.createElement('div', { className: 'drw-ws' },
+        React.createElement('div', { className: 'drw-ws-bar' },
+          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: () => props.onClose && props.onClose() }, t('wsBack')),
+          tabs.map(([id, key]) => React.createElement('button', {
+            key: id,
+            type: 'button',
+            className: tab === id ? 'drw-btn drw-btn-primary' : 'drw-btn',
+            onClick: () => setTab(id)
+          }, t(key)))
+        ),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'hosts' }, React.createElement(SettingsView, props)),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'terminal' }, React.createElement(TerminalTab, { t, activeProfile })),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'files' }, React.createElement(ExplorerTab, { t, activeProfile })),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'docker' }, React.createElement(ContainersTab, { t, activeProfile })),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'tunnels' }, React.createElement(TunnelsPanel, {
+          t, busy, activeProfile, tunnelMsg, tunnels,
+          newTunnelLocal: localPort, setNewTunnelLocal: setLocalPort,
+          newTunnelRemote: remotePort, setNewTunnelRemote: setRemotePort,
+          handleStartTunnel: startTunnel, handleStopTunnel: stopTunnel
+        })),
+        React.createElement('div', { className: 'drw-ws-panel', hidden: tab !== 'cluster' }, React.createElement(ClusterPanel, { t, profiles }))
+      )
+    }
+
+    function createWorkspaceToggle() {
+      let open = false
+      const listeners = new Set()
+      return {
+        isOpen() { return open },
+        set(next) {
+          open = Boolean(next)
+          listeners.forEach((fn) => fn(open))
+        },
+        toggle() { this.set(!open) },
+        subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn) }
+      }
+    }
+
+    function nativeSidebarButton() {
+      const nodes = document.querySelectorAll('button[class*="newSession"]')
+      for (const node of nodes) {
+        if (String(node.className).indexOf('newSessionLabel') === -1) return node
+      }
+      return null
+    }
+
+    function mountRemoteWorkspace(ctx) {
+      if (typeof document === 'undefined') return function () {}
+      ensureCss()
+      const toggle = createWorkspaceToggle()
+      const t = workspaceTranslator(ctx)
+      let entry = null
+      let container = null
+      let root = null
+
+      const placeEntry = () => {
+        if (entry && entry.isConnected) return
+        const target = nativeSidebarButton()
+        if (!target || !target.parentElement) return
+        if (target.parentElement.querySelector('[' + DRW_ENTRY + ']')) return
+        entry = target.cloneNode(true)
+        entry.className = String(target.className) + ' drw-entry-clone'
+        entry.setAttribute(DRW_ENTRY, '')
+        entry.setAttribute('data-dsh-plugin', 'dsh-remote-workspace')
+        entry.setAttribute('aria-label', t('navLabel'))
+        entry.removeAttribute('id')
+        entry.innerHTML = ''
+        const icon = document.createElement('span')
+        icon.className = 'drw-entry-icon'
+        icon.innerHTML = DRW_ICON
+        const label = document.createElement('span')
+        label.className = 'drw-entry-label'
+        label.textContent = t('navLabel')
+        entry.appendChild(icon)
+        entry.appendChild(label)
+        entry.addEventListener('click', (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          toggle.toggle()
+        })
+        target.insertAdjacentElement('afterend', entry)
+      }
+
+      const reactDom = () => {
+        if (typeof window !== 'undefined' && window.ReactDOM) return window.ReactDOM
+        try { return require('react-dom/client') } catch (err) { return null }
+      }
+
+      const placeView = () => {
+        const column = document.querySelector('[data-pane=conversation], [class*=centerCol]')
+        if (!column) return
+        if (!container) {
+          container = document.createElement('div')
+          container.setAttribute(DRW_VIEW, '')
+          container.setAttribute('data-dsh-plugin', 'dsh-remote-workspace')
+          column.appendChild(container)
+          const ReactDOM = reactDom()
+          if (ReactDOM && typeof ReactDOM.createRoot === 'function') {
+            root = ReactDOM.createRoot(container)
+            root.render(React.createElement(WorkspaceScreen, { ctx, onClose: () => toggle.set(false) }))
+          }
+          return
+        }
+        if (container.parentElement !== column) column.appendChild(container)
+      }
+
+      const applyOpen = () => {
+        if (toggle.isOpen()) {
+          document.documentElement.setAttribute(DRW_ACTIVE, '')
+          document.dispatchEvent(new CustomEvent('dsh-panel-activate', { detail: DRW_PANEL }))
+          if (entry) entry.dataset.active = 'true'
+        } else {
+          document.documentElement.removeAttribute(DRW_ACTIVE)
+          if (entry) delete entry.dataset.active
+        }
+      }
+
+      const onOther = (event) => {
+        if (event.detail !== DRW_PANEL && toggle.isOpen()) toggle.set(false)
+      }
+      const observer = new MutationObserver(() => { placeEntry(); placeView() })
+      observer.observe(document.body, { childList: true, subtree: true })
+      document.addEventListener('dsh-panel-activate', onOther)
+      const unsubscribe = toggle.subscribe(applyOpen)
+      placeEntry()
+      placeView()
+
+      return () => {
+        observer.disconnect()
+        document.removeEventListener('dsh-panel-activate', onOther)
+        unsubscribe()
+        document.documentElement.removeAttribute(DRW_ACTIVE)
+        if (root && root.unmount) root.unmount()
+        if (container) container.remove()
+        if (entry) entry.remove()
+      }
+    }
+
     function apply(ctx) {
+      try { mountRemoteWorkspace(ctx) } catch (err) { console.warn('[dsh-remote-workspace] workspace mount skipped', err && err.message) }
       if (ctx.locale && typeof ctx.locale.register === 'function') {
         if (typeof ctx.effect === 'function') {
           ctx.effect(() => ctx.locale.register(NS, { en, zh }), 'dsh-remote-workspace: dictionaries');