@goodandready/dsh-remote-workspace 0.3.7 → 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,14 +109,51 @@ 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.',
+      versionUnknown: 'Version unknown',
+      updaterTitle: 'Plugin update',
+      currentVersion: 'Installed version',
+      latestVersion: 'Latest on npm',
+      checkUpdate: 'Check for updates',
+      checking: 'Checking...',
+      updateNow: 'Update now',
+      updating: 'Updating...',
+      upToDate: 'Up to date',
+      updateAvailable: 'Update available',
+      restartRequired: 'The update is installed. Restart DSH to use it.',
+      updateFailed: 'Update failed',
+      statusLoading: 'Checking connection',
+      statusEmpty: 'No active host',
+      statusReady: 'Host ready',
+      statusError: 'Status unavailable',
 
       tabProfiles: '🖥️ Host Profiles',
 
@@ -124,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',
@@ -208,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)',
@@ -254,13 +337,32 @@ window.__ModuleLoader__.load({
 
     const zh = {
       title: '远程开发工作区',
+      navLabel: '远程',
+      wsBack: '返回',
+      wsHosts: '主机',
+      wsTerminal: '终端',
+      wsFiles: '文件',
+      wsDocker: '容器',
+      wsTunnels: '隧道',
+      wsCluster: '集群',
       subtitle: '支持原生 SSH 连接、SFTP 文件访问、3-way 镜像同步与端口转发隧道。',
       status: '就绪',
+      actionFailed: '请求失败。',
+      versionUnknown: '版本未知',
+      statusLoading: '正在检查连接',
+      statusEmpty: '没有活动主机',
+      statusReady: '主机已就绪',
+      statusError: '状态不可用',
 
       tabProfiles: '🖥️ 主机配置',
       tabContainers: '🐳 容器管理',
       tabEnv: '🗃️ 环境变量',
       btnImportSsh: '导入 ~/.ssh/config',
+      importAdded: '已导入 {count} 台主机。',
+      skipWildcard: '通配主机不会导入',
+      skipMatch: '不导入 Match 块',
+      skipDuplicate: '已经导入',
+      skipMissing: '找不到被包含的文件',
       envTitle: '远程环境变量配置 (.env)',
       envKey: '变量名',
       envVal: '变量值',
@@ -356,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: '私钥口令 (可选)',
@@ -694,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)
@@ -879,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',
@@ -910,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
@@ -967,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')
@@ -1004,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' },
@@ -1046,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'))
                   )
                 )
               )
@@ -1135,237 +1364,72 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function SettingsView(props) {
-      const [activeTab, setActiveTab] = React.useState('profiles')
-      const [healthData, setHealthData] = React.useState(null)
-      const [autoSync, setAutoSync] = React.useState(false)
-
-      const t = props.t || (props.locale === 'zh' ? makeT(zh, en) : makeT(en, zh))
-      const [profiles, setProfiles] = React.useState([])
-      const [activeId, setActiveId] = React.useState(null)
-      const [tunnels, setTunnels] = React.useState([])
-      const [editing, setEditing] = React.useState(null)
-      const [busy, setBusy] = React.useState(null)
-      const [testResult, setTestResult] = React.useState(null)
-      const [syncMsg, setSyncMsg] = React.useState(null)
-      const [tunnelMsg, setTunnelMsg] = React.useState(null)
-      const [showPassword, setShowPassword] = React.useState(false)
-
-      // Tunnel creation inputs
-      const [newTunnelLocal, setNewTunnelLocal] = React.useState('3000')
-      const [newTunnelRemote, setNewTunnelRemote] = React.useState('3000')
-
-      // Remote Directory Browser State
-      const [browserOpen, setBrowserOpen] = React.useState(false)
-      const [browserPath, setBrowserPath] = React.useState('/')
-      const [browserEntries, setBrowserEntries] = React.useState([])
-      const [browserLoading, setBrowserLoading] = React.useState(false)
-
-      const loadState = async () => {
-        try {
-          const res = await fetch('/dsh-remote-workspace/state')
-          if (res.ok) {
-            const data = await res.json()
-            if (data.ok) {
-              setProfiles(data.profiles || [])
-              setActiveId(data.activeId || null)
-              setTunnels(data.tunnels || [])
-              setAutoSync(Boolean(data.autoSync))
-              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) { /* best-effort cleanup */ }
-      }
-
-      React.useEffect(() => {
-        ensureCss()
-        loadState()
-      }, [])
-
-      const handleSave = async (profile) => {
-        setBusy('saving')
-        try {
-          const res = await fetch('/dsh-remote-workspace/profiles/save', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(profile)
-          })
-          if (res.ok) {
-            setEditing(null)
-            setBrowserOpen(false)
-            setTestResult(null)
-            await loadState()
-          }
-        } catch (err) { /* best-effort cleanup */ }
-        setBusy(null)
-      }
-
-      const handleDelete = async (id, name) => {
-        if (!confirm(t('delConfirm', { name: name || id }))) return
-        try {
-          const res = await fetch('/dsh-remote-workspace/profiles/delete', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ id })
-          })
-          if (res.ok) {
-            if (editing && editing.id === id) setEditing(null)
-            await loadState()
-          }
-        } catch (err) { /* best-effort cleanup */ }
-      }
-
-      const handleSetActive = async (id) => {
-        try {
-          const res = await fetch('/dsh-remote-workspace/profiles/active', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ id })
-          })
-          if (res.ok) {
-            await loadState()
-          }
-        } catch (err) { /* best-effort cleanup */ }
-      }
-
-      const handleTest = async (prof) => {
-        setBusy('testing')
-        setTestResult(null)
-        try {
-          const res = await fetch('/dsh-remote-workspace/test', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ profile: prof })
-          })
-          const data = await res.json()
-          setTestResult(data)
-        } catch (err) {
-          setTestResult({ ok: false, error: err.message })
-        }
-        setBusy(null)
-      }
 
-      const openDirectoryBrowser = async (initialPath) => {
-        setBrowserOpen(true)
-        const target = initialPath && initialPath.startsWith('/') ? initialPath : '/'
-        await fetchRemoteDir(target)
+    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)
       }
-
-      const fetchRemoteDir = async (dirPath) => {
-        setBrowserLoading(true)
-        try {
-          const res = await fetch('/dsh-remote-workspace/browse', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ profile: editing, remotePath: dirPath })
-          })
-          const data = await res.json()
-          if (data.ok) {
-            setBrowserPath(data.currentPath || dirPath)
-            setBrowserEntries(data.entries || [])
-          }
-        } catch (err) { /* best-effort cleanup */ }
-        setBrowserLoading(false)
+      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 }))
       }
-
-      const handleSync = async (direction) => {
-        setBusy(`sync_${direction}`)
-        setSyncMsg(null)
-        try {
-          const res = await fetch('/dsh-remote-workspace/sync', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ direction })
-          })
-          const data = await res.json()
-          if (data.ok) {
-            const count = (direction === 'push' ? data.pushed?.length : data.pulled?.length) || 0
-            if (data.conflicts && data.conflicts.length > 0) {
-              setSyncMsg({ ok: false, text: t('syncConflict', { count: data.conflicts.length }) })
-            } else {
-              setSyncMsg({ ok: true, text: t('syncOk', { count }) })
-            }
-          } else {
-            setSyncMsg({ ok: false, text: t('syncErr', { err: data.error || 'Unknown error' }) })
-          }
-        } catch (err) {
-          setSyncMsg({ ok: false, text: t('syncErr', { err: err.message }) })
-        }
-        setBusy(null)
+      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 }]
+    }
 
-      const handleStartTunnel = async () => {
-        if (!activeId) return
-        setBusy('tunnel_open')
-        setTunnelMsg(null)
+    function ProfilesPanel(panel) {
+    const {
+        t,
+        editing,
+        setEditing,
+        setTestResult,
+        profiles,
+        activeId,
+        busy,
+        handleSave,
+        testResult,
+        handleTest,
+        handleSetActive,
+        handleDelete,
+        browserOpen,
+        setBrowserOpen,
+        browserPath,
+        browserEntries,
+        browserLoading,
+        openDirectoryBrowser,
+        fetchRemoteDir,
+        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/tunnels/start', {
+          const res = await fetch('/dsh-remote-workspace/profiles/test-group', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              profileId: activeId,
-              localPort: newTunnelLocal,
-              remotePort: newTunnelRemote
-            })
+            body: JSON.stringify({ ids: items.map((item) => item.id) })
           })
           const data = await res.json()
-          if (data.ok) {
-            setTunnelMsg({ ok: true, text: t('tOpenOk', { localPort: newTunnelLocal, remotePort: newTunnelRemote }) })
-            await loadState()
-          } else {
-            setTunnelMsg({ ok: false, text: t('tOpenErr', { err: data.error || 'Failed' }) })
-          }
+          if (data && data.ok) setGroupReport(data.results || [])
         } catch (err) {
-          setTunnelMsg({ ok: false, text: t('tOpenErr', { err: err.message }) })
+          setGroupReport([])
         }
-        setBusy(null)
-      }
-
-      const handleStopTunnel = async (tunnelId) => {
-        try {
-          const res = await fetch('/dsh-remote-workspace/tunnels/stop', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ tunnelId })
-          })
-          if (res.ok) {
-            await loadState()
-          }
-        } catch (err) { /* best-effort cleanup */ }
       }
-
-      const activeProfile = profiles.find((p) => p.id === activeId)
-
-      return React.createElement(
-        'div',
-        { className: 'drw-page' },
-
-        // Header with Live Badges (ClineBot Style)
-        React.createElement(
-          'div',
-          { className: 'drw-header' },
-          React.createElement(
-            'div',
-            { className: 'drw-header-top' },
-            React.createElement('div', { className: 'drw-page-title' }, '🌐 ' + t('title')),
-            React.createElement(
-              'div',
-              { className: 'drw-header-badges' },
-              activeProfile
-                ? React.createElement('span', { className: 'drw-badge drw-badge-ok' }, t('badgeOnline', { name: activeProfile.name || activeProfile.host, latency: testResult?.latencyMs ?? 15 }))
-                : React.createElement('span', { className: 'drw-badge drw-badge-warn' }, t('badgeOffline')),
-              activeProfile
-                ? React.createElement('span', { className: 'drw-badge' }, activeProfile.authType === 'password' ? t('badgePassword') : t('badgeKey'))
-                : null,
-              React.createElement('span', { className: `drw-badge ${tunnels.length > 0 ? 'drw-badge-ok' : ''}` }, t('badgeTunnels', { count: tunnels.length }))
-            )
-          ),
-          React.createElement('div', { className: 'drw-page-sub' }, t('subtitle'))
-        ),
-
-        // Section 1: SSH Profiles Table & Management
+      return (
         React.createElement(
           'div',
           { className: 'drw-card' },
@@ -1391,7 +1455,11 @@ window.__ModuleLoader__.load({
                         passphrase: '',
                         password: '',
                         remoteWorkspace: '',
-                        localMirrorPath: ''
+                        localMirrorPath: '',
+                        environment: '',
+                        tags: [],
+                        location: '',
+                        description: ''
                       })
                       setTestResult(null)
                     }
@@ -1469,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',
@@ -1481,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',
                       {
@@ -1499,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' },
@@ -1734,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(
@@ -1755,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',
@@ -1767,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'))
@@ -1820,68 +1992,30 @@ window.__ModuleLoader__.load({
                         )
                       )
                     )
+                  }))
                   })
                 )
               )
             : !editing
             ? React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('noHosts'))
             : null
-        ),
-
-        // Section 2: Active Connection Diagnostics (ClineBot Card 4 style)
-        activeProfile
-          ? React.createElement(
-              'div',
-              { className: 'drw-card' },
-              React.createElement(
-                'div',
-                { className: 'drw-card-title' },
-                React.createElement('span', null, t('diagTitle')),
-                React.createElement(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'drw-btn',
-                    style: { fontSize: '11px', padding: '3px 9px' },
-                    disabled: busy === 'testing',
-                    onClick: () => handleTest(activeProfile)
-                  },
-                  busy === 'testing' ? t('testing') : t('diagProbeBtn')
-                )
-              ),
-              React.createElement('div', { className: 'drw-card-desc' }, t('diagDesc')),
-              React.createElement(
-                'div',
-                { className: 'drw-grid-4' },
-                React.createElement(
-                  'div',
-                  { className: 'drw-stat-box' },
-                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.name || activeProfile.host),
-                  React.createElement('div', { className: 'drw-stat-lbl' }, `SSH: ${activeProfile.username}@${activeProfile.host}:${activeProfile.port || 22}`)
-                ),
-                React.createElement(
-                  'div',
-                  { className: 'drw-stat-box' },
-                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.remoteWorkspace || '—'),
-                  React.createElement('div', { className: 'drw-stat-lbl' }, 'Remote Workspace')
-                ),
-                React.createElement(
-                  'div',
-                  { className: 'drw-stat-box' },
-                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.localMirrorPath || '—'),
-                  React.createElement('div', { className: 'drw-stat-lbl' }, 'Local Mirror Path')
-                ),
-                React.createElement(
-                  'div',
-                  { className: 'drw-stat-box' },
-                  React.createElement('div', { className: 'drw-stat-val', style: { color: 'var(--dsw-alias-state-success-primary)' } }, 'Ready ✓'),
-                  React.createElement('div', { className: 'drw-stat-lbl' }, activeProfile.authType === 'password' ? 'Password Auth' : 'SSH Key Auth')
-                )
-              )
-            )
-          : null,
+        )
+      )
+    }
 
-        // Section 3: Mirror Sync (ClineBot Action Card style)
+    function SyncPanel(panel) {
+    const {
+        t,
+        busy,
+        activeProfile,
+        handleSync,
+        syncMsg,
+        autoSync,
+        setAutoSync,
+        reportAction,
+        setActionError,
+      } = panel
+      return (
         activeProfile
           ? React.createElement(
               'div',
@@ -1912,9 +2046,11 @@ window.__ModuleLoader__.load({
                           headers: { 'Content-Type': 'application/json' },
                           body: JSON.stringify({ enabled: next })
                         })
-                        const d = await res.json()
-                        if (d.ok) setAutoSync(d.autoSync)
-                      } catch (err) { /* best-effort cleanup */ }
+                        const data = await reportAction(res)
+                        if (data && data.ok) setAutoSync(data.autoSync)
+                      } catch (err) {
+                        setActionError(err && err.message ? err.message : t('actionFailed'))
+                      }
                     }
                   },
                   autoSync ? '⚡ Active (ON)' : '⚪ Off'
@@ -1958,9 +2094,25 @@ window.__ModuleLoader__.load({
                   )
                 : null
             )
-          : null,
+          : null
+      )
+    }
 
-        // Section 4: SSH Port Forwarding (Tunnels Manager)
+    function TunnelsPanel(panel) {
+    const {
+        t,
+        busy,
+        activeProfile,
+        newTunnelLocal,
+        setNewTunnelLocal,
+        newTunnelRemote,
+        setNewTunnelRemote,
+        handleStartTunnel,
+        tunnelMsg,
+        tunnels,
+        handleStopTunnel,
+      } = panel
+      return (
         React.createElement(
           'div',
           { className: 'drw-card' },
@@ -2077,143 +2229,692 @@ window.__ModuleLoader__.load({
       )
     }
 
-    // Accordion item for Settings -> Plugins section
-
-    function UpdaterSection(props) {
-      const t = props.t || ((k) => k);
-      const [updateStatus, setUpdateStatus] = React.useState(null);
-      const [loading, setLoading] = React.useState(false);
-      const [updating, setUpdating] = React.useState(false);
-      const [msg, setMsg] = React.useState(null);
-
-      const checkUpdate = React.useCallback(async () => {
-        setLoading(true);
-        setMsg(null);
+    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/update', {
-            headers: { accept: 'application/json' },
-            cache: 'no-store'
-          });
-          if (!res.ok) throw new Error('HTTP ' + res.status);
-          const data = await res.json();
-          setUpdateStatus(data);
-        } catch (e) {
-          setMsg({ ok: false, text: (t('updateFailed') || 'Failed: ') + (e?.message || String(e)) });
-        } finally {
-          setLoading(false);
+          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([])
         }
-      }, [t]);
+        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
+        ))
+      )
+    }
 
-      const doUpdate = async () => {
-        setUpdating(true);
-        setMsg(null);
+    function SettingsView(props) {
+      const [activeTab, setActiveTab] = React.useState('profiles')
+      const [healthData, setHealthData] = React.useState(null)
+      const [autoSync, setAutoSync] = React.useState(false)
+
+      const t = props.t || (props.locale === 'zh' ? makeT(zh, en) : makeT(en, zh))
+      const [profiles, setProfiles] = React.useState([])
+      const [activeId, setActiveId] = React.useState(null)
+      const [tunnels, setTunnels] = React.useState([])
+      const [editing, setEditing] = React.useState(null)
+      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')
+      const [newTunnelRemote, setNewTunnelRemote] = React.useState('3000')
+
+      // Remote Directory Browser State
+      const [browserOpen, setBrowserOpen] = React.useState(false)
+      const [browserPath, setBrowserPath] = React.useState('/')
+      const [browserEntries, setBrowserEntries] = React.useState([])
+      const [browserLoading, setBrowserLoading] = React.useState(false)
+
+
+      function actionErrorText(status, data) {
+        if (status >= 200 && status < 300 && data && data.ok !== false) return ''
+        if (data && typeof data.error === 'string' && data.error) return data.error
+        return 'HTTP ' + status
+      }
+
+      const reportAction = async (res) => {
+        let data = null
+        try { data = await res.json() } catch (err) { data = null }
+        const text = actionErrorText(res.status, data)
+        setActionError(text ? ((data && data.error) ? text : t('actionFailed')) : '')
+        return text ? null : data
+      }
+
+      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/update', {
-            method: 'POST',
-            headers: {
-              'x-dsh-plugin-update': '1',
-              'content-type': 'application/json'
+          const res = await fetch('/dsh-remote-workspace/state')
+          const data = await reportAction(res)
+          if (data && data.ok) {
+            setProfiles(data.profiles || [])
+            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(() => {})
             }
-          });
-          const data = await res.json();
-          if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status));
-          setUpdateStatus(data);
-          if (data.restartRequired) {
-            setMsg({ ok: true, text: t('restartRequired') });
           }
-        } catch (e) {
-          setMsg({ ok: false, text: (t('updateFailed') || 'Update failed: ') + (e?.message || String(e)) });
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
         } finally {
-          setUpdating(false);
+          loadInFlight.current = false
         }
-      };
-
-      React.useEffect(() => {
-        checkUpdate();
-      }, [checkUpdate]);
-
-      return React.createElement(
-        'div',
-        {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '10px 14px',
-            marginBottom: '14px',
-            borderRadius: '8px',
-            background: 'var(--dsw-alias-bg-layer-2)',
-            border: '1px solid var(--dsw-alias-border-l2)',
-            fontSize: '13px'
-          }
-        },
-        React.createElement(
-          'div',
-          { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-          React.createElement('span', null, '📦'),
-          React.createElement(
-            'div',
-            null,
-            React.createElement('span', { style: { fontWeight: 500 } }, 'v' + (updateStatus?.currentVersion || '0.3.1')),
-            updateStatus?.latestVersion && updateStatus.latestVersion !== updateStatus.currentVersion
-              ? React.createElement('span', { style: { marginLeft: '8px', color: 'var(--dsw-alias-state-warning-text)' } }, '→ v' + updateStatus.latestVersion)
-              : null,
-            msg
-              ? React.createElement('div', { style: { fontSize: '11px', marginTop: '3px', color: msg.ok ? 'var(--dsw-alias-state-success-text)' : 'var(--dsw-alias-state-error-text)' } }, msg.text)
-              : null
-          )
-        ),
-        React.createElement(
-          'div',
-          { style: { display: 'flex', gap: '8px' } },
-          updateStatus?.updateAvailable
-            ? React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'drw-btn drw-btn-primary',
-                  disabled: updating,
-                  onClick: doUpdate,
-                  style: { fontSize: '12px', padding: '4px 10px' }
-                },
-                updating ? t('updating') : t('updateNow')
-              )
-            : React.createElement(
-                'button',
-                {
-                  type: 'button',
-                  className: 'drw-btn',
-                  disabled: loading,
-                  onClick: checkUpdate,
-                  style: { fontSize: '12px', padding: '4px 10px' }
-                },
-                loading ? t('checking') : (updateStatus?.updateAvailable === false ? t('upToDate') : t('checkUpdate'))
-              )
-        )
-      );
-    }
-
-    function PluginCard(props) {
-      const page = !!(props && props.view === 'page')
-      const [open, setOpen] = React.useState(!!page)
-      const t = props.t || (props.locale === 'zh' ? makeT(zh, en) : makeT(en, zh))
+      }
 
       React.useEffect(() => {
         ensureCss()
+        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)
+        }
       }, [])
 
-      // Row seat (plugins.row.config): the host page draws title/icon/crumb and the
-      // padding, so the summary is a one-liner and the page drops our card chrome.
-      if (props && props.view === 'summary') {
-        return React.createElement('span', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
-      }
 
-      return React.createElement(
-        page ? 'div' : 'li',
-        { className: page ? 'drw-page' : 'drw-card', style: page ? undefined : { listStyle: 'none', marginBottom: '12px' } },
-        React.createElement(
-          'button',
-          {
+      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 {
+          const res = await fetch('/dsh-remote-workspace/profiles/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(profile)
+          })
+          const data = await reportAction(res)
+          if (data) {
+            setEditing(null)
+            setBrowserOpen(false)
+            setTestResult(null)
+            await loadState()
+          }
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+        setBusy(null)
+      }
+
+      const handleDelete = async (id, name) => {
+        if (!confirm(t('delConfirm', { name: name || id }))) return
+        try {
+          const res = await fetch('/dsh-remote-workspace/profiles/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+          })
+          const data = await reportAction(res)
+          if (data) {
+            if (editing && editing.id === id) setEditing(null)
+            await loadState()
+          }
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
+      const handleSetActive = async (id) => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/profiles/active', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+          })
+          const data = await reportAction(res)
+          if (data) await loadState()
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
+      const handleTest = async (prof) => {
+        setBusy('testing')
+        setTestResult(null)
+        try {
+          const res = await fetch('/dsh-remote-workspace/test', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(prof)
+          })
+          const data = await res.json()
+          setTestResult(data)
+        } catch (err) {
+          setTestResult({ ok: false, error: err.message })
+        }
+        setBusy(null)
+      }
+
+      const openDirectoryBrowser = async (initialPath) => {
+        setBrowserOpen(true)
+        const target = initialPath && initialPath.startsWith('/') ? initialPath : '/'
+        await fetchRemoteDir(target)
+      }
+
+      const fetchRemoteDir = async (dirPath) => {
+        setBrowserLoading(true)
+        try {
+          const res = await fetch('/dsh-remote-workspace/browse', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profile: editing, remotePath: dirPath })
+          })
+          const data = await reportAction(res)
+          if (data && data.ok) {
+            setBrowserPath(data.currentPath || dirPath)
+            setBrowserEntries(data.entries || [])
+          }
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+        setBrowserLoading(false)
+      }
+
+      const handleSync = async (direction) => {
+        setBusy(`sync_${direction}`)
+        setSyncMsg(null)
+        try {
+          const res = await fetch('/dsh-remote-workspace/sync', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ direction })
+          })
+          const data = await res.json()
+          if (data.ok) {
+            const count = (direction === 'push' ? data.pushed?.length : data.pulled?.length) || 0
+            if (data.conflicts && data.conflicts.length > 0) {
+              setSyncMsg({ ok: false, text: t('syncConflict', { count: data.conflicts.length }) })
+            } else {
+              setSyncMsg({ ok: true, text: t('syncOk', { count }) })
+            }
+          } else {
+            setSyncMsg({ ok: false, text: t('syncErr', { err: data.error || 'Unknown error' }) })
+          }
+        } catch (err) {
+          setSyncMsg({ ok: false, text: t('syncErr', { err: err.message }) })
+        }
+        setBusy(null)
+      }
+
+      const handleStartTunnel = async () => {
+        if (!activeId) return
+        setBusy('tunnel_open')
+        setTunnelMsg(null)
+        try {
+          const res = await fetch('/dsh-remote-workspace/tunnels/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              profileId: activeId,
+              localPort: newTunnelLocal,
+              remotePort: newTunnelRemote
+            })
+          })
+          const data = await res.json()
+          if (data.ok) {
+            setTunnelMsg({ ok: true, text: t('tOpenOk', { localPort: newTunnelLocal, remotePort: newTunnelRemote }) })
+            await loadState()
+          } else {
+            setTunnelMsg({ ok: false, text: t('tOpenErr', { err: data.error || 'Failed' }) })
+          }
+        } catch (err) {
+          setTunnelMsg({ ok: false, text: t('tOpenErr', { err: err.message }) })
+        }
+        setBusy(null)
+      }
+
+      const handleStopTunnel = async (tunnelId) => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/tunnels/stop', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tunnelId })
+          })
+          const data = await reportAction(res)
+          if (data) await loadState()
+        } catch (err) {
+          setActionError(err && err.message ? err.message : t('actionFailed'))
+        }
+      }
+
+      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' },
+
+        // Header with Live Badges (ClineBot Style)
+        React.createElement(
+          'div',
+          { className: 'drw-header' },
+          React.createElement(
+            'div',
+            { className: 'drw-header-top' },
+            React.createElement('div', { className: 'drw-page-title' }, '🌐 ' + t('title')),
+            React.createElement(
+              'div',
+              { className: 'drw-header-badges' },
+              activeProfile
+                ? React.createElement('span', { className: 'drw-badge drw-badge-ok' }, t('badgeOnline', { name: activeProfile.name || activeProfile.host, latency: testResult?.latencyMs ?? 15 }))
+                : React.createElement('span', { className: 'drw-badge drw-badge-warn' }, t('badgeOffline')),
+              activeProfile
+                ? React.createElement('span', { className: 'drw-badge' }, activeProfile.authType === 'password' ? t('badgePassword') : t('badgeKey'))
+                : null,
+              React.createElement('span', { className: `drw-badge ${tunnels.length > 0 ? 'drw-badge-ok' : ''}` }, t('badgeTunnels', { count: tunnels.length }))
+            )
+          ),
+          React.createElement('div', { className: 'drw-page-sub' }, t('subtitle')),
+          actionError
+            ? React.createElement('div', { className: 'drw-badge drw-badge-err', role: 'alert' }, actionError)
+            : null
+        ),
+
+
+
+        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)
+        activeProfile
+          ? React.createElement(
+              'div',
+              { className: 'drw-card' },
+              React.createElement(
+                'div',
+                { className: 'drw-card-title' },
+                React.createElement('span', null, t('diagTitle')),
+                React.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'drw-btn',
+                    style: { fontSize: '11px', padding: '3px 9px' },
+                    disabled: busy === 'testing',
+                    onClick: () => handleTest(activeProfile)
+                  },
+                  busy === 'testing' ? t('testing') : t('diagProbeBtn')
+                )
+              ),
+              React.createElement('div', { className: 'drw-card-desc' }, t('diagDesc')),
+              React.createElement(
+                'div',
+                { className: 'drw-grid-4' },
+                React.createElement(
+                  'div',
+                  { className: 'drw-stat-box' },
+                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.name || activeProfile.host),
+                  React.createElement('div', { className: 'drw-stat-lbl' }, `SSH: ${activeProfile.username}@${activeProfile.host}:${activeProfile.port || 22}`)
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'drw-stat-box' },
+                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.remoteWorkspace || '—'),
+                  React.createElement('div', { className: 'drw-stat-lbl' }, 'Remote Workspace')
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'drw-stat-box' },
+                  React.createElement('div', { className: 'drw-stat-val' }, activeProfile.localMirrorPath || '—'),
+                  React.createElement('div', { className: 'drw-stat-lbl' }, 'Local Mirror Path')
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'drw-stat-box' },
+                  React.createElement('div', { className: 'drw-stat-val', style: { color: 'var(--dsw-alias-state-success-primary)' } }, 'Ready ✓'),
+                  React.createElement('div', { className: 'drw-stat-lbl' }, activeProfile.authType === 'password' ? 'Password Auth' : 'SSH Key Auth')
+                )
+              )
+            )
+          : null,
+
+
+        React.createElement(SyncPanel, { t, busy, activeProfile, handleSync, syncMsg, autoSync, setAutoSync, reportAction, setActionError }),
+
+        React.createElement(TunnelsPanel, { t, busy, activeProfile, newTunnelLocal, setNewTunnelLocal, newTunnelRemote, setNewTunnelRemote, handleStartTunnel, tunnelMsg, tunnels, handleStopTunnel }),
+
+      )
+    }
+
+    // Accordion item for Settings -> Plugins section
+
+    function UpdaterSection(props) {
+      const t = props.t || ((k) => k);
+      const [updateStatus, setUpdateStatus] = React.useState(null);
+      const [loading, setLoading] = React.useState(false);
+      const [updating, setUpdating] = React.useState(false);
+      const [msg, setMsg] = React.useState(null);
+
+      const checkUpdate = React.useCallback(async () => {
+        setLoading(true);
+        setMsg(null);
+        try {
+          const res = await fetch('/dsh-remote-workspace/update', {
+            headers: { accept: 'application/json' },
+            cache: 'no-store'
+          });
+          if (!res.ok) throw new Error('HTTP ' + res.status);
+          const data = await res.json();
+          setUpdateStatus(data);
+        } catch (e) {
+          setMsg({ ok: false, text: (t('updateFailed') || 'Failed: ') + (e?.message || String(e)) });
+        } finally {
+          setLoading(false);
+        }
+      }, [t]);
+
+      const doUpdate = async () => {
+        setUpdating(true);
+        setMsg(null);
+        try {
+          const res = await fetch('/dsh-remote-workspace/update', {
+            method: 'POST',
+            headers: {
+              'x-dsh-plugin-update': '1',
+              'content-type': 'application/json'
+            }
+          });
+          const data = await res.json();
+          if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status));
+          setUpdateStatus(data);
+          if (data.restartRequired) {
+            setMsg({ ok: true, text: t('restartRequired') });
+          }
+        } catch (e) {
+          setMsg({ ok: false, text: (t('updateFailed') || 'Update failed: ') + (e?.message || String(e)) });
+        } finally {
+          setUpdating(false);
+        }
+      };
+
+      React.useEffect(() => {
+        checkUpdate();
+      }, [checkUpdate]);
+
+      return React.createElement(
+        'div',
+        {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '10px 14px',
+            marginBottom: '14px',
+            borderRadius: '8px',
+            background: 'var(--dsw-alias-bg-layer-2)',
+            border: '1px solid var(--dsw-alias-border-l2)',
+            fontSize: '13px'
+          }
+        },
+        React.createElement(
+          'div',
+          { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+          React.createElement('span', null, '📦'),
+          React.createElement(
+            'div',
+            null,
+            React.createElement('span', { style: { fontWeight: 500 } }, (updateStatus?.currentVersion ? 'v' + updateStatus.currentVersion : t('versionUnknown'))),
+            updateStatus?.updateAvailable
+              ? React.createElement('span', { style: { marginLeft: '8px', color: 'var(--dsw-alias-state-warning-text)' } }, '→ v' + updateStatus.latestVersion)
+              : null,
+            msg
+              ? React.createElement('div', { style: { fontSize: '11px', marginTop: '3px', color: msg.ok ? 'var(--dsw-alias-state-success-text)' : 'var(--dsw-alias-state-error-text)' } }, msg.text)
+              : null
+          )
+        ),
+        React.createElement(
+          'div',
+          { style: { display: 'flex', gap: '8px' } },
+          updateStatus?.updateAvailable
+            ? React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'drw-btn drw-btn-primary',
+                  disabled: updating,
+                  onClick: doUpdate,
+                  style: { fontSize: '12px', padding: '4px 10px' }
+                },
+                updating ? t('updating') : t('updateNow')
+              )
+            : React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'drw-btn',
+                  disabled: loading,
+                  onClick: checkUpdate,
+                  style: { fontSize: '12px', padding: '4px 10px' }
+                },
+                loading ? t('checking') : (updateStatus?.updateAvailable === false ? t('upToDate') : t('checkUpdate'))
+              )
+        )
+      );
+    }
+
+    function PluginCard(props) {
+      const page = !!(props && props.view === 'page')
+      const [open, setOpen] = React.useState(!!page)
+      const t = props.t || (props.locale === 'zh' ? makeT(zh, en) : makeT(en, zh))
+
+      const [conn, setConn] = React.useState('loading')
+
+      React.useEffect(() => {
+        ensureCss()
+      }, [])
+
+      React.useEffect(() => {
+        let cancelled = false
+        fetch('/dsh-remote-workspace/state')
+          .then((res) => {
+            if (!res.ok) throw new Error('HTTP ' + res.status)
+            return res.json()
+          })
+          .then((data) => {
+            if (cancelled) return
+            if (!data || data.ok === false) {
+              setConn('error')
+              return
+            }
+            const active = (data.profiles || []).find((item) => item.id === data.activeId)
+            setConn(active ? 'ready' : 'empty')
+          })
+          .catch(() => {
+            if (!cancelled) setConn('error')
+          })
+        return () => { cancelled = true }
+      }, [])
+
+      // Row seat (plugins.row.config): the host page draws title/icon/crumb and the
+      // padding, so the summary is a one-liner and the page drops our card chrome.
+      if (props && props.view === 'summary') {
+        return React.createElement('span', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
+      }
+
+      return React.createElement(
+        page ? 'div' : 'li',
+        { className: page ? 'drw-page' : 'drw-card', style: page ? undefined : { listStyle: 'none', marginBottom: '12px' } },
+        React.createElement(
+          'button',
+          {
             type: 'button',
             style: {
               background: 'none',
@@ -2235,11 +2936,22 @@ window.__ModuleLoader__.load({
             React.createElement('div', { style: { fontWeight: 600, fontSize: '15px', color: 'var(--dsw-alias-label-primary)' } }, t('title')),
             React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
           ),
-          React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginRight: '14px' } }, t('status')),
+          React.createElement('span', {
+            className: 'drw-badge ' + (
+              conn === 'ready' ? 'drw-badge-ok'
+                : conn === 'error' ? 'drw-badge-err'
+                  : conn === 'empty' ? 'drw-badge-warn' : ''
+            ),
+            style: { marginRight: '14px' }
+          }, t(
+            conn === 'ready' ? 'statusReady'
+              : conn === 'error' ? 'statusError'
+                : conn === 'empty' ? 'statusEmpty' : 'statusLoading'
+          )),
           React.createElement(
             'span',
             { style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .16s' } },
-            React.createElement(FallbackChevron)
+            React.createElement(ChevronIcon || FallbackChevron)
           )
         ),
         (page || open)
@@ -2290,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');
@@ -2301,16 +3238,28 @@ window.__ModuleLoader__.load({
 
       if (ctx.slots && typeof ctx.slots.inject === 'function') {
         // Plugin-list seat (plugins.item) first: the seat the current core
-        // (0.1.6-alpha.2) renders as the plugin's own page with its configuration. The
-        // label is a static string on purpose — it is resolved while the page renders,
-        // and a locale lookup there would take the whole client batch down with it.
+        // (0.1.6-alpha.2) renders as the plugin's own page with its configuration.
+        // The label getter runs during page render. A locale-service lookup there
+        // crashes the client batch, so the title is read from the dictionaries
+        // already loaded in this bundle. English is the result when the active
+        // language cannot be read.
         ctx.slots.inject('plugins.item', () =>
           ctx.slots.register(
             {
               name: 'plugins.item',
               id: ROW_ID,
               order: 60,
-              label: () => 'Remote Workspace',
+              label: () => {
+                try {
+                  const lang = ctx.locale && typeof ctx.locale.getLocale === 'function'
+                    ? ctx.locale.getLocale()
+                    : ''
+                  if (typeof lang === 'string' && (lang === 'zh' || lang.indexOf('zh') === 0)) return zh.title
+                } catch (err) {
+                  return en.title
+                }
+                return en.title
+              },
               locale: NS,
               inject: () => ({ ctx })
             },