@goodandready/dsh-remote-workspace 0.3.7 → 0.3.8

package/README.md

@@ -127,8 +127,10 @@ Four orthogonal, high-leverage tools exposed directly to LLM agents:
 - Designed strictly to DSH UX guidelines and styled after `dsh-clinebot`.
 - **Segmented Auth Switcher**: Clean tabbed toggle between Private Key and Password authentication.
 - **Remote Directory Browser Modal**: Interactive remote file browser with breadcrumb navigation and one-click path selection.
-- **Connection Diagnostic Badge**: Real-time ping testing with visual latency indicators and remote OS display.
-- **Action Triggers**: Quick buttons for directional synchronization and tunnel monitoring.
+- **Connection Diagnostic Badge**: Real-time ping testing with visual latency indicators and remote OS display. The header badge follows `/dsh-remote-workspace/state`: it shows a loading, empty, ready, or unavailable connection instead of a permanent Ready label.
+- **Action Triggers**: Quick buttons for directional synchronization and tunnel monitoring. A failed save, delete, activation, directory browse, or tunnel stop shows the server error in an alert on the card. Test Connection posts the profile fields, including `host`.
+- **Plugin list label**: English `Remote Workspace` or Chinese `远程开发工作区`, taken from the dictionaries already loaded with the card.
+- **Updater version**: the row shows the installed version returned by the status request. Before that response it shows "Version unknown".
 
 ---
 

package/README.ru.md

@@ -127,8 +127,10 @@ graph LR
 - Полноценная интеграция в слот `settings.plugin.item` с ключом `dsh-remote-workspace`.
 - **Сегментированный переключатель авторизации**: Удобное переключение между SSH-ключом и паролем.
 - **Интерактивный браузер удалённых папок**: Модальное окно с навигацией по каталогам и выбором рабочей директории в один клик.
-- **Индикатор статуса и задержки**: Проверка связи с отображением пинга и ОС удалённого узла.
-- **Кнопки действий**: Быстрый запуск синхронизации и контроль туннелей прямо из настроек.
+- **Индикатор статуса и задержки**: Проверка связи с отображением пинга и ОС удалённого узла. Бейдж шапки читает `/dsh-remote-workspace/state` и показывает проверку, отсутствие активного хоста, готовность или недоступность статуса.
+- **Кнопки действий**: Быстрый запуск синхронизации и контроль туннелей прямо из настроек. Ошибка сохранения, удаления, выбора активного профиля, обзора каталога или остановки туннеля показывается в предупреждении на карточке. Проверка соединения отправляет поля профиля, включая `host`.
+- **Подпись в списке плагинов**: английская `Remote Workspace` или китайская `远程开发工作区` из словарей карточки.
+- **Версия в блоке обновления**: строка показывает установленную версию из ответа статуса. Пока ответ не пришёл, показывается нейтральная подпись неизвестной версии.
 
 ---
 

package/README.zh.md

@@ -127,8 +127,10 @@ graph LR
 - 深度适配 `settings.plugin.item` 插槽（Key: `dsh-remote-workspace`）。
 - **分段式认证切换器**：优雅切换私钥认证与密码认证。
 - **远程目录浏览器弹窗**：可视化浏览远程服务器目录树，支持面包屑导航与一键选取。
-- **实时连接状态徽章**：可视化展示连通性、网络延迟以及远程操作系统信息。
-- **快捷动作触发**：一键发起定向文件同步并监控隧道运行状态。
+- **实时连接状态徽章**：可视化展示连通性、网络延迟以及远程操作系统信息。页眉徽章读取 `/dsh-remote-workspace/state`，分别表示正在检查、没有活动主机、主机已就绪或状态不可用，不再固定显示“就绪”。
+- **快捷动作触发**：一键发起定向文件同步并监控隧道运行状态。保存、删除、设为活动、浏览目录或关闭隧道失败时，卡片上的警告会显示服务器返回的错误。连接测试提交的是配置本身，其中包含 `host`。
+- **插件列表名称**：英文为 `Remote Workspace`，中文为 `远程开发工作区`，取自随卡片加载的词典。
+- **更新版本**：该行显示状态接口返回的已安装版本。结果返回前显示“版本未知”。
 
 ---
 

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 })
             },

package/lib/updater-service.js

@@ -31,21 +31,9 @@ function isLoopback(value) {
   )
 }
 
-function isPrivateLan(value) {
-  const address = value?.toLowerCase().replace(/^\[|\]$/g, '')
-  if (!address) return false
-  const ipv4 = address.startsWith('::ffff:') ? address.slice(7) : address
-  return (
-    ipv4.startsWith('192.168.') ||
-    ipv4.startsWith('10.') ||
-    /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(ipv4)
-  )
-}
-
 export function isTrustedUpdateRequest(request) {
   if (header(request, UPDATE_HEADER) !== '1') return false
-  const remote = request.socket?.remoteAddress
-  if (!isLoopback(remote) && !isPrivateLan(remote)) return false
+  if (!isLoopback(request.socket?.remoteAddress)) return false
   const site = header(request, 'sec-fetch-site')
   if (site !== undefined && site !== 'same-origin') return false
   const origin = header(request, 'origin')
@@ -53,11 +41,8 @@ export function isTrustedUpdateRequest(request) {
   if (origin === undefined || host === undefined) return false
   try {
     const url = new URL(origin)
-    return (
-      (url.protocol === 'http:' || url.protocol === 'https:') &&
-      (isLoopback(url.hostname) || isPrivateLan(url.hostname)) &&
-      url.host === host
-    )
+    return (url.protocol === 'http:' || url.protocol === 'https:')
+      && isLoopback(url.hostname) && url.host === host
   } catch (err) { /* best-effort fallback */
     return false
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-remote-workspace",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Enterprise Remote Workspace Plugin for DeepSeek Harness: SSH2 connection pool, SFTP operations, 3-way conflict-aware mirror sync, port forwarding, and native DSH UI.",
   "type": "module",
   "main": "lib/index.js",
@@ -16,7 +16,6 @@
     "README.md",
     "README.ru.md",
     "README.zh.md",
-    "docs/design/DESIGN.md",
     "LICENSE"
   ],
   "scripts": {

package/docs/design/DESIGN.md

@@ -1,91 +0,0 @@
-# DESIGN.md — dsh-remote-workspace
-
-## Product / Purpose
-- **Назначение**: Полнофункциональный корпоративный плагин удалённой разработки для DeepSeek Harness (DSH). Обеспечивает подключение к удалённым серверам по SSH (ключ / пароль), SFTP-навигацию, 3-way синхронизацию локального зеркала, SSH-туннелирование (port forwarding) и компактный набор инструментов для LLM агента (
-emote_exec, 
-emote_fs, 
-emote_sync, 
-emote_tunnel).
-- **Аудитория**: Разработчики и инженеры, использующие DSH для работы с проектами на VPS, удаленных серверах, облачных инстансах и MiniPC.
-- **Статус**: Стабильный релиз v0.3.3 (One-Click Updater, Cross-Plugin API, Clean Tokens, Modular Routes).
-
-## User Surfaces
-- **Web/UI**: Нативная карточка настроек профилей хостов (settings.plugin.item), удаленный SFTP браузер каталогов, чип статуса подключения в шапке сессии (conversation.session.header.utilities).
-- **DSH UI / settings / slots**:
-  - Карточка плагина: settings.plugin.item для @goodandready/dsh-remote-workspace.
-  - Статусный чип сессии: conversation.session.header.utilities (order: 30).
-  - Запрещённые слоты: settings.section (запрещён стандартом authoring, все настройки только внутри settings.plugin.item).
-- **API маршруты**:
-  - GET /dsh-remote-workspace/state: получение профилей, активного хоста и туннелей.
-  - POST /dsh-remote-workspace/profiles/save: сохранение профиля (с валидацией и сбросом старых соединений).
-  - POST /dsh-remote-workspace/profiles/delete: удаление профиля.
-  - POST /dsh-remote-workspace/profiles/active: переключение активного профиля.
-  - POST /dsh-remote-workspace/test: live-проверка связи (Ping, OS, Latency).
-  - POST /dsh-remote-workspace/browse: чтение содержимого удалённой папки (SFTP).
-  - POST /dsh-remote-workspace/sync: запуск двусторонней 3-way синхронизации зеркала (pull/push).
-  - POST /dsh-remote-workspace/tunnels/start: создание локального SSH-туннеля.
-  - POST /dsh-remote-workspace/tunnels/stop: остановка активного SSH-туннеля.
-- **CLI / Model Tools**:
-  - 
-emote_exec: выполнение команд на сервере.
-  - 
-emote_fs: чтение, атомарная запись, stat, mkdir, remove.
-  - 
-emote_sync: запуск 3-way синхронизации с контролем конфликтов.
-  - 
-emote_tunnel: создание/остановка/листинг туннелей.
-
-## Visual Direction (Единый стиль dsh-clinebot)
-- **Атмосфера**: Премиальный инженерный интерфейс уровня VS Code Remote / Linear. Строгая типографика, плотные функциональные карточки, чистые переходы и отсутствие лишних теней.
-- **Токены ядра DSH**:
-  - Фоны: ar(--dsw-alias-bg-layer-3) (карточки), ar(--dsw-alias-bg-layer-2) (поля ввода, вложенные блоки, таблицы), ar(--dsw-alias-bg-layer-1) (сегменты, подложка).
-  - Границы: ar(--dsw-alias-border-l2).
-  - Текст: ar(--dsw-alias-label-primary), ar(--dsw-alias-label-secondary), ar(--dsw-alias-label-dimmed).
-  - Статусы: ar(--dsw-alias-state-success-primary), ar(--dsw-alias-state-warning-primary), ar(--dsw-alias-state-error-primary), ar(--dsw-alias-state-brand-primary).
-- **Шапка карточки**:
-  - Название плагина, подзаголовок, статусный аккордеонный шеврон.
-  - Статусные пилюли (Badges): Host online / Offline, Active Profile, Active Tunnels count.
-
-## Components And States
-1. **Секция 1: Профили серверов (SSH Profiles)**:
-   - Таблица настроенных машин с бейджами типа аутентификации (🔑 key / 🔒 pwd), меткой активного сервера, кнопками «Сделать активным», «Редактировать», «Удалить».
-   - Пустое состояние: ясное сообщение и кнопка + Добавить хост.
-2. **Секция 2: Интерактивный редактор профиля**:
-   - Название, Хост/IP, Порт, Пользователь.
-   - Сегментированный переключатель авторизации (SSH-ключ vs Пароль).
-   - Поля авторизации: путь к приватному ключу, парольная фраза, либо пароль (маскированный).
-   - Директории: Удалённый каталог проекта (с кнопкой вызова SFTP браузера) и **Локальная папка зеркала** (с подсказкой назначения).
-   - Кнопки: «⚡ Проверить связь (Ping)», «Отмена», «Сохранить».
-   - Результат пинга: отображение Latency: X ms | OS: Y или понятный текст ошибки.
-3. **Секция 3: Диагностика активного подключения**:
-   - Четырёхколоночная сетка метрик активного сервера (Хост, Удалённая папка, Метод авторизации, Статус ядра).
-4. **Секция 4: Синхронизация зеркала (Mirror Sync)**:
-   - Кнопки Pull (Remote -> Local) и Push (Local -> Remote) с индикацией процесса, результатом и предупреждением при конфликтах.
-5. **Секция 5: SSH-туннели (Port Forwarding)**:
-   - Таблица активных туннелей (ID, Локальный порт -> Удалённый порт) с кнопкой закрытия.
-   - Форма создания нового туннеля (Local Port, Remote Port, кнопка «Открыть туннель»).
-
-## Security & Reliability
-- Защита всех мутирующих эндпоинтов проверкой isTrustedSettingsRequest(req) (защита от cross-site атак).
-- Безопасное чтение Cordis сервисов через .get() с fallback.
-- Изоляция жизненного цикла стримов в TunnelService (прослушивание сокетных и потоковых ошибок).
-
-### v0.3.3 Client Architecture Modularization (Refs: #14)
-- Client-side code decomposed into modular ES components under `src/client/`:
-  - `src/client/styles.js` — CSS styling with DSH theme variables
-  - `src/client/locales.js` — English and Chinese translation dictionaries
-  - `src/client/env-editor.js` — Remote .env manager tab component
-  - `src/client/docker.js` — Container inspector tab component
-  - `src/client/terminal.js` — Web terminal tab component
-  - `src/client/file-browser.js` — Remote file explorer tab component
-  - `src/client/settings-view.js` — Profiles, tunnels, and sync settings component
-  - `src/client/updater-section.js` — One-click updater section component
-  - `src/client/plugin-card.js` — Plugin card and status chip components
-  - `src/client/entry.js` — Cordis client plugin apply and slot registration
-- Added native builder `scripts/build-client.mjs` hooked into `prepack` and `npm test`.
-
-### v0.3.6 Model Tools JSON Schema Standardization (Refs: #33)
-- Все 9 инструментов (`remote_exec`, `remote_fs`, `remote_sync`, `remote_tunnel`, `remote_docker`, `remote_service`, `remote_transfer`, `remote_diagnose`, `remote_env`) переведены на компиляцию через `defineTool()` из `@deepseek-ai/dsh-tools`.
-- Параметры инструментов компилируются в строгий JSON Schema с корнем `{ type: 'object', properties: ..., required: [...] }`.
-- Предотвращены ошибки валидации схем в OpenAI-совместимых провайдерах (`Invalid schema: schema must be a JSON Schema of 'type: "object"', got 'type: null'`).
-- Схема вывода стандартизирована с явным `{ type: 'object', additionalProperties: true }`.