@goodandready/dsh-remote-workspace 0.3.6 → 0.3.8

package/lib/client.js

@@ -117,6 +117,23 @@ window.__ModuleLoader__.load({
       title: 'Remote Workspace',
       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',
 
@@ -256,6 +273,12 @@ window.__ModuleLoader__.load({
       title: '远程开发工作区',
       subtitle: '支持原生 SSH 连接、SFTP 文件访问、3-way 镜像同步与端口转发隧道。',
       status: '就绪',
+      actionFailed: '请求失败。',
+      versionUnknown: '版本未知',
+      statusLoading: '正在检查连接',
+      statusEmpty: '没有活动主机',
+      statusReady: '主机已就绪',
+      statusError: '状态不可用',
 
       tabProfiles: '🖥️ 主机配置',
       tabContainers: '🐳 容器管理',
@@ -1135,237 +1158,31 @@ 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)
-      }
-
-      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)
-      }
-
-      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 })
-          })
-          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
+    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
+      return (
         React.createElement(
           'div',
           { className: 'drw-card' },
@@ -1826,104 +1643,67 @@ 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)
+    function SyncPanel(panel) {
+    const {
+        t,
+        busy,
+        activeProfile,
+        handleSync,
+        syncMsg,
+        autoSync,
+        setAutoSync,
+        reportAction,
+        setActionError,
+      } = panel
+      return (
         activeProfile
           ? React.createElement(
               'div',
               { className: 'drw-card' },
+              React.createElement('div', { className: 'drw-card-title' }, t('syncTitle')),
+              React.createElement('div', { className: 'drw-card-desc' }, t('syncDesc')),
+
               React.createElement(
                 'div',
-                { className: 'drw-card-title' },
-                React.createElement('span', null, t('diagTitle')),
+                { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--dsw-alias-bg-layer-2)', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)', marginBottom: '12px' } },
+                React.createElement(
+                  'div',
+                  { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
+                  React.createElement('span', { style: { fontWeight: 600, fontSize: '13px' } }, t('autoSyncTitle')),
+                  React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('autoSyncDesc'))
+                ),
                 React.createElement(
                   'button',
                   {
                     type: 'button',
-                    className: 'drw-btn',
-                    style: { fontSize: '11px', padding: '3px 9px' },
-                    disabled: busy === 'testing',
-                    onClick: () => handleTest(activeProfile)
+                    className: `drw-btn ${autoSync ? 'drw-btn-primary' : ''}`,
+                    style: { padding: '4px 12px', fontSize: '12px' },
+                    onClick: async () => {
+                      const next = !autoSync
+                      try {
+                        const res = await fetch('/dsh-remote-workspace/watcher/toggle', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ enabled: next })
+                        })
+                        const data = await reportAction(res)
+                        if (data && data.ok) setAutoSync(data.autoSync)
+                      } catch (err) {
+                        setActionError(err && err.message ? err.message : t('actionFailed'))
+                      }
+                    }
                   },
-                  busy === 'testing' ? t('testing') : t('diagProbeBtn')
+                  autoSync ? '⚡ Active (ON)' : '⚪ Off'
                 )
               ),
-              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)
-        activeProfile
-          ? React.createElement(
-              'div',
-              { className: 'drw-card' },
-              React.createElement('div', { className: 'drw-card-title' }, t('syncTitle')),
-              React.createElement('div', { className: 'drw-card-desc' }, t('syncDesc')),
-
-              React.createElement(
-                'div',
-                { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--dsw-alias-bg-layer-2)', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)', marginBottom: '12px' } },
-                React.createElement(
-                  'div',
-                  { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
-                  React.createElement('span', { style: { fontWeight: 600, fontSize: '13px' } }, t('autoSyncTitle')),
-                  React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, t('autoSyncDesc'))
-                ),
-                React.createElement(
-                  'button',
-                  {
-                    type: 'button',
-                    className: `drw-btn ${autoSync ? 'drw-btn-primary' : ''}`,
-                    style: { padding: '4px 12px', fontSize: '12px' },
-                    onClick: async () => {
-                      const next = !autoSync
-                      try {
-                        const res = await fetch('/dsh-remote-workspace/watcher/toggle', {
-                          method: 'POST',
-                          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 */ }
-                    }
-                  },
-                  autoSync ? '⚡ Active (ON)' : '⚪ Off'
-                )
-              ),
-
-              React.createElement(
-                'div',
-                { className: 'drw-row' },
+                { className: 'drw-row' },
                 React.createElement(
                   'button',
                   {
@@ -1958,9 +1738,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,6 +1873,330 @@ 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 [actionError, setActionError] = React.useState('')
+      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)
+
+
+      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 loadState = async () => {
+        try {
+          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))
+            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'))
+        }
+      }
+
+      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)
+          })
+          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)
+
+      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
+        ),
+
+
+        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) {
@@ -2154,8 +2274,8 @@ window.__ModuleLoader__.load({
           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: { 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
@@ -2198,10 +2318,34 @@ window.__ModuleLoader__.load({
       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') {
@@ -2235,11 +2379,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)
@@ -2301,16 +2456,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 })
             },