@goodandready/dsh-remote-workspace 0.2.0 → 0.3.1

package/lib/client.js

@@ -90,6 +90,22 @@ window.__ModuleLoader__.load({
 .drw-modal-dialog{background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:12px;width:100%;max-width:800px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,0.4)}
 .drw-modal-hdr{padding:12px 16px;border-bottom:1px solid var(--dsw-alias-border-l2);display:flex;align-items:center;justify-content:space-between;font-weight:600}
 .drw-modal-body{flex:1;padding:12px 16px;overflow-y:auto}
+
+.drw-health-bar{display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:8px;padding:8px 12px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;font-size:11.5px;font-family:monospace}
+.drw-health-item{display:flex;flex-direction:column;gap:2px}
+.drw-progress{height:6px;background:var(--dsw-alias-bg-layer-1);border-radius:3px;overflow:hidden}
+.drw-progress-fill{height:100%;border-radius:3px;transition:width .2s ease}
+
+.drw-container-row{display:grid;grid-template-columns:2fr 2fr 1.5fr 1.5fr auto;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:12.5px;font-family:monospace}
+.drw-container-row:hover{background:var(--dsw-alias-bg-layer-3)}
+
+.drw-env-table{width:100%;border-collapse:collapse}
+.drw-env-row{display:grid;grid-template-columns:220px 1fr 90px;gap:8px;padding:6px 0;align-items:center;border-bottom:1px solid var(--dsw-alias-border-l2)}
+.drw-alert-badge{padding:4px 8px;border-radius:6px;font-size:11px;font-family:monospace;display:flex;align-items:center;gap:6px}
+.drw-alert-critical{background:rgba(239,68,68,0.15);color:var(--dsw-alias-state-error-primary);border:1px solid rgba(239,68,68,0.4)}
+.drw-alert-warning{background:rgba(245,158,11,0.15);color:var(--dsw-alias-state-warning-primary);border:1px solid rgba(245,158,11,0.4)}
+
+
       `
       document.head.appendChild(style)
     }
@@ -100,6 +116,48 @@ window.__ModuleLoader__.load({
       status: 'Ready',
 
       tabProfiles: '🖥️ Host Profiles',
+
+      tabContainers: '🐳 Containers',
+
+      tabEnv: '🗃️ .env Manager',
+      btnImportSsh: 'Import ~/.ssh/config',
+      envTitle: 'Remote Environment Variables (.env)',
+      envKey: 'Key',
+      envVal: 'Value',
+      envSaveVar: 'Save',
+      envShowVal: 'Show',
+      envHideVal: 'Hide',
+      tarSyncFast: '🚀 Fast Tarball Stream',
+      diagnoseTitle: 'Quick Diagnostics',
+      diagnosePorts: 'Open Ports',
+      diagnoseOom: 'OOM Killer Check',
+      diagnoseDisk: 'Disk Usage',
+      alertLabel: 'Alerts ({count})',
+
+      containersTitle: 'Remote Docker / Podman Engine',
+      containerName: 'Container',
+      containerImage: 'Image',
+      containerStatus: 'Status',
+      containerPorts: 'Ports',
+      btnLogs: 'Logs',
+      btnRestart: 'Restart',
+      btnStop: 'Stop',
+      noContainers: 'No active containers found or Docker daemon not running.',
+      healthCpu: 'CPU: {val}%',
+      healthMem: 'RAM: {val}% ({used}/{total} MB)',
+      healthDisk: 'Disk: {val}%',
+      healthUptime: 'Up: {val}',
+      autoSyncTitle: 'Live Auto-Sync on Save',
+      autoSyncDesc: 'Automatically push modified files to remote workspace on local save.',
+      btnTransfer: 'Copy to Host...',
+      transferTitle: 'Server-to-Server Direct Transfer',
+      transferDestHost: 'Destination Server',
+      transferDestPath: 'Destination File Path',
+      transferBtnExec: 'Transfer Directly',
+      transferSuccess: 'Successfully transferred {bytes} bytes to {host}:{path}',
+      fJumpHost: 'Jump Host (Bastion)',
+      fJumpHostNone: 'Direct Connection (No Jump Host)',
+
       tabTerminal: '⚡ Web Terminal',
       tabExplorer: '📂 File Explorer',
       tabTunnels: '🔗 Port Tunnels',
@@ -191,80 +249,141 @@ window.__ModuleLoader__.load({
       tOpenErr: 'Failed to open tunnel: {err}'
     }
 
-    const ru = {
-      title: 'Удалённое рабочее пространство',
-      subtitle: 'SSH-подключения, доступ к файлам по SFTP, 3-way синхронизация зеркала и проброс портов.',
-      status: 'Готово',
-      badgeOnline: 'Активный хост: {name} ({latency} мс)',
-      badgeOffline: 'Хост не выбран',
-      badgeTunnels: 'Туннелей: {count}',
-      badgeKey: '🔑 Авторизация по ключу',
-      badgePassword: '🔒 Авторизация по паролю',
-      profilesTitle: '🖥️ Профили SSH серверов',
-      profilesDesc: 'Настройка удалённых серверов для запуска команд, SFTP-навигации и синхронизации зеркала.',
-      addBtn: '+ Добавить хост',
-      nameCol: 'Имя',
-      hostCol: 'Хост / Пользователь',
-      portCol: 'Порт',
-      pathCol: 'Удалённый путь',
-      actionsCol: 'Действия',
-      noHosts: 'Удалённые хосты ещё не настроены. Нажмите «+ Добавить хост» для создания подключения.',
-      activeBadge: 'Активен',
-      pinBtn: 'Сделать активным',
-      editBtn: 'Править',
-      delBtn: 'Удалить',
-      delConfirm: 'Удалить профиль хоста «{name}»?',
-      formTitleNew: 'Добавление нового SSH хоста',
-      formTitleEdit: 'Редактирование профиля хоста',
-      fName: 'Название подключения',
-      fHost: 'Хост / IP-адрес',
-      fPort: 'Порт',
-      fUser: 'Имя пользователя',
-      fAuthType: 'Способ авторизации',
-      fAuthKey: 'SSH-ключ',
-      fAuthPass: 'Пароль',
-      fKeyPath: 'Путь к приватному ключу',
-      fKeyPathHint: 'Путь к ~/.ssh/id_rsa или /home/user/.ssh/id_ed25519',
-      fPassphrase: 'Кодовая фраза ключа (если есть)',
-      fPassword: 'Пароль учётной записи',
-      fRemotePath: 'Удалённая папка проекта',
-      fRemotePathHint: 'Абсолютный путь на сервере (например, /home/user/project)',
-      fLocalMirror: 'Локальная папка зеркала',
-      fLocalMirrorHint: 'Локальная папка для быстрого зеркалирования и бесконфликтной 3-way синхронизации',
-      btnBrowse: '📁 Обзор на сервере…',
-      btnSelectThis: 'Выбрать папку',
-      btnTest: '⚡ Проверить связь (Ping)',
-      btnSave: 'Сохранить профиль',
-      btnCancel: 'Отмена',
-      testing: 'Проверка соединения…',
-      saving: 'Сохранение…',
-      testOk: '✅ Соединение успешно! Задержка: {latency} мс | ОС: {os}',
-      testFail: '❌ Ошибка подключения: {err}',
-      diagTitle: '📊 Диагностика активного подключения',
-      diagDesc: 'Телеметрия в реальном времени и состояние подсистемы для выбранного сервера.',
-      diagProbeBtn: '⚡ Опросить сервер',
-      syncTitle: '🔄 Двусторонняя синхронизация зеркала',
-      syncDesc: 'Бесконфликтная 3-way синхронизация файлов между локальным зеркалом и сервером.',
-      pullBtn: '⬇️ Скачать с сервера (Pull)',
-      pushBtn: '⬆️ Загрузить на сервер (Push)',
-      pulling: 'Скачивание файлов…',
-      pushing: 'Загрузка файлов…',
-      syncOk: 'Синхронизация завершена! Обновлено файлов: {count}.',
-      syncConflict: 'Внимание: конфликт изменений в {count} файлах.',
-      syncErr: 'Ошибка синхронизации: {err}',
-      tunnelsTitle: '🔀 SSH-туннели (Port Forwarding)',
-      tunnelsDesc: 'Проброс удалённых портов (базы данных, dev-серверы, API) на локальный компьютер через зашифрованный канал.',
-      tLocalPort: 'Локальный порт',
-      tRemotePort: 'Удалённый порт',
-      tOpenBtn: '+ Открыть туннель',
-      tOpening: 'Открытие…',
-      tStopBtn: 'Закрыть',
-      tNoTunnels: 'Нет активных туннелей проброса портов.',
-      tunnelsColId: 'ID туннеля',
-      tunnelsColRoute: 'Маршрут перенаправления',
-      tunnelsColActions: 'Действия',
-      tOpenOk: 'Туннель запущен: 127.0.0.1:{localPort} -> Remote:{remotePort}',
-      tOpenErr: 'Не удалось запустить туннель: {err}'
+    const zh = {
+      title: '远程开发工作区',
+      subtitle: '支持原生 SSH 连接、SFTP 文件访问、3-way 镜像同步与端口转发隧道。',
+      status: '就绪',
+
+      tabProfiles: '🖥️ 主机配置',
+      tabContainers: '🐳 容器管理',
+      tabEnv: '🗃️ 环境变量',
+      btnImportSsh: '导入 ~/.ssh/config',
+      envTitle: '远程环境变量配置 (.env)',
+      envKey: '变量名',
+      envVal: '变量值',
+      envSaveVar: '保存',
+      envShowVal: '显示',
+      envHideVal: '隐藏',
+      tarSyncFast: '🚀 快速 Tarball 流式同步',
+      diagnoseTitle: '快速诊断',
+      diagnosePorts: '开放端口',
+      diagnoseOom: 'OOM 检查',
+      diagnoseDisk: '磁盘分析',
+      alertLabel: '告警 ({count})',
+
+      containersTitle: '远程 Docker / Podman 引擎',
+      containerName: '容器名',
+      containerImage: '镜像',
+      containerStatus: '运行状态',
+      containerPorts: '端口映射',
+      btnLogs: '日志',
+      btnRestart: '重启',
+      btnStop: '停止',
+      noContainers: '未找到运行中的容器或 Docker 守护进程未启动。',
+      healthCpu: 'CPU: {val}%',
+      healthMem: '内存: {val}% ({used}/{total} MB)',
+      healthDisk: '磁盘: {val}%',
+      healthUptime: '运行: {val}',
+      autoSyncTitle: '保存时自动增量同步',
+      autoSyncDesc: '本地文件保存时，后台自动增量推送到远程对应工作目录。',
+      btnTransfer: '跨主机传输...',
+      transferTitle: '主机间直接流式传输',
+      transferDestHost: '目标主机',
+      transferDestPath: '目标文件路径',
+      transferBtnExec: '立即直传',
+      transferSuccess: '成功传输 {bytes} 字节到 {host}:{path}',
+      fJumpHost: '跳板机 (Bastion)',
+      fJumpHostNone: '直连模式 (无跳板机)',
+
+      tabTerminal: '⚡ 网页终端',
+      tabExplorer: '📂 文件管理',
+      tabTunnels: '🔗 端口隧道',
+      tabSync: '🔄 同步控制台',
+      vaultProtectedBadge: '🛡️ .env 保管库加密保护',
+      termStart: '连接终端',
+      termStop: '断开连接',
+      termClear: '清屏',
+      termPlaceholder: '输入命令后回车 (如 htop, ls, docker ps)...',
+      termConnected: '已连接至主机 {host} 的 PTY 会话 {id}',
+      termDisconnected: '终端已断开。',
+      explorerTitle: '远程文件系统浏览',
+      filePreviewTitle: '文件查看器: {path}',
+      fileSize: '{size} KB',
+      btnSaveFile: '保存文件更改',
+      fileSaved: '文件保存成功。',
+      tunnelTraffic: '下行: {rx} | 上行: {tx}',
+      tunnelUptime: '运行: {sec}秒',
+      openLocalLink: '🌐 打开本地端口',
+      badgeOnline: '当前主机: {name} ({latency} ms)',
+      badgeOffline: '未选定活跃主机',
+      badgeTunnels: '活动隧道: {count}',
+      badgeKey: '🔑 私钥认证',
+      badgePassword: '🔒 密码认证',
+      profilesTitle: '🖥️ 远程 SSH 主机配置',
+      profilesDesc: '配置用于命令执行、SFTP 浏览与后台镜像同步的远程服务器。',
+      addBtn: '+ 添加主机',
+      nameCol: '配置名称',
+      hostCol: '主机 / 用户',
+      portCol: '端口',
+      pathCol: '远程工作区',
+      actionsCol: '操作',
+      noHosts: '暂无配置的主机。点击 "+ 添加主机" 建立首个连接。',
+      activeBadge: '活动中',
+      pinBtn: '设为默认',
+      editBtn: '编辑',
+      delBtn: '删除',
+      delConfirm: '确认删除主机配置 "{name}" 吗？',
+      formTitleNew: '添加新主机配置',
+      formTitleEdit: '编辑主机配置',
+      fName: '配置别名',
+      fHost: '主机名 / IP 地址',
+      fPort: '端口',
+      fUser: '登录用户名',
+      fAuthType: '身份认证方式',
+      fAuthKey: 'SSH 私钥',
+      fAuthPass: '账户密码',
+      fKeyPath: '私钥文件路径',
+      fKeyPathHint: '例如 ~/.ssh/id_rsa 或 /home/user/.ssh/id_ed25519',
+      fPassphrase: '私钥口令 (可选)',
+      fPassword: '登录密码',
+      fRemotePath: '远程项目工作区目录',
+      fRemotePathHint: '服务器上的绝对路径 (例如 /home/user/my-project)',
+      fLocalMirror: '本地镜像同步目录',
+      fLocalMirrorHint: '用于 3-way 差异比对与快速同步的本地镜像路径',
+      btnBrowse: '📁 浏览远程目录...',
+      btnSelectThis: '选择当前目录',
+      btnTest: '⚡ 测试网络连通性 (Ping)',
+      btnSave: '保存配置',
+      btnCancel: '取消',
+      testing: '正在测试连接...',
+      saving: '正在保存...',
+      testOk: '✅ 连接成功！延迟: {latency} ms | 系统: {os}',
+      testFail: '❌ 连接失败: {err}',
+      diagTitle: '📊 实时连接状态诊断',
+      diagDesc: '查看当前选定主机的网络延迟、系统资源及底层服务运行指标。',
+      diagProbeBtn: '⚡ 即时探测',
+      syncTitle: '🔄 双向工作区镜像同步',
+      syncDesc: '基于三方冲突感知的快速差异同步，支持本地与远程端双向推拉。',
+      pullBtn: '⬇️ 拉取至本地 (Pull)',
+      pushBtn: '⬆️ 推送至远程 (Push)',
+      pulling: '正在拉取文件…',
+      pushing: '正在推送文件…',
+      syncOk: '同步完成！共更新 {count} 个文件。',
+      syncConflict: '冲突警告: 检测到 {count} 个文件在两端均有修改。',
+      syncErr: '同步异常: {err}',
+      tunnelsTitle: '🔀 SSH 端口安全隧道',
+      tunnelsDesc: '通过加密 SSH 隧道将远程端口 (如数据库、开发服务、API) 映射至本地访问。',
+      tLocalPort: '本地监听端口',
+      tRemotePort: '远程目标端口',
+      tOpenBtn: '+ 建立隧道',
+      tOpening: '正在建立…',
+      tStopBtn: '关闭',
+      tNoTunnels: '当前没有运行中的端口转发隧道。',
+      tunnelsColId: '隧道标识',
+      tunnelsColRoute: '转发路由',
+      tunnelsColActions: '管理操作',
+      tOpenOk: '隧道已启动: 127.0.0.1:{localPort} -> Remote:{remotePort}',
+      tOpenErr: '启动隧道失败: {err}'
     }
 
     function makeT(dict, fallback) {
@@ -294,6 +413,261 @@ window.__ModuleLoader__.load({
     }
 
 
+
+
+    // --- Sub-component: Remote Environment Tab (New in v0.3.1) ---
+    function EnvTab(props) {
+      const { activeProfile, t } = props
+      const [envEntries, setEnvEntries] = React.useState([])
+      const [loading, setLoading] = React.useState(false)
+      const [visibleKeys, setVisibleKeys] = React.useState({})
+      const [editValues, setEditValues] = React.useState({})
+      const [msg, setMsg] = React.useState('')
+
+      const loadEnv = async () => {
+        if (!activeProfile) return
+        setLoading(true)
+        try {
+          const res = await fetch('/dsh-remote-workspace/env/view', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profileId: activeProfile.id })
+          })
+          const data = await res.json()
+          if (data.ok && Array.isArray(data.entries)) {
+            setEnvEntries(data.entries.filter((e) => e.type === 'var'))
+            const initialEdits = {}
+            data.entries.forEach((e) => {
+              if (e.type === 'var') initialEdits[e.key] = e.value
+            })
+            setEditValues(initialEdits)
+          }
+        } catch (err) {
+          setMsg(`Error loading .env: ${err.message}`)
+        }
+        setLoading(false)
+      }
+
+      React.useEffect(() => {
+        loadEnv()
+      }, [activeProfile?.id])
+
+      const toggleVisible = (key) => {
+        setVisibleKeys((prev) => ({ ...prev, [key]: !prev[key] }))
+      }
+
+      const saveVar = async (key) => {
+        try {
+          const res = await fetch('/dsh-remote-workspace/env/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              profileId: activeProfile.id,
+              key,
+              value: editValues[key] || ''
+            })
+          })
+          const data = await res.json()
+          if (data.ok) {
+            setMsg(`Saved ${key} successfully!`)
+            setTimeout(() => setMsg(''), 3000)
+          }
+        } catch (err) {
+          setMsg(`Save failed: ${err.message}`)
+        }
+      }
+
+      return React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '14px' } },
+        React.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+          React.createElement('div', { style: { fontWeight: 600, fontSize: '14px' } }, t('envTitle')),
+          React.createElement('button', { type: 'button', className: 'drw-btn', onClick: loadEnv, disabled: loading }, loading ? 'Loading...' : '🔄 Refresh')
+        ),
+        msg ? React.createElement('div', { className: 'drw-badge drw-badge-ok' }, msg) : null,
+        React.createElement(
+          'div',
+          { style: { border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '8px', padding: '12px', background: 'var(--dsw-alias-bg-layer-2)' } },
+          envEntries.length === 0
+            ? React.createElement('div', { style: { textAlign: 'center', padding: '16px', color: 'var(--dsw-alias-label-secondary)' } }, 'No variables found in remote .env')
+            : envEntries.map((e) =>
+                React.createElement(
+                  'div',
+                  { key: e.key, className: 'drw-env-row' },
+                  React.createElement('span', { style: { fontWeight: 600, fontFamily: 'monospace', fontSize: '12.5px' } }, e.key),
+                  React.createElement('input', {
+                    type: visibleKeys[e.key] ? 'text' : 'password',
+                    className: 'drw-input',
+                    value: editValues[e.key] !== undefined ? editValues[e.key] : e.value,
+                    onChange: (ev) => {
+                      const val = ev.target.value
+                      setEditValues((prev) => ({ ...prev, [e.key]: val }))
+                    }
+                  }),
+                  React.createElement(
+                    'div',
+                    { style: { display: 'flex', gap: '4px', justifyContent: 'flex-end' } },
+                    React.createElement('button', { type: 'button', className: 'drw-btn', style: { padding: '2px 6px', fontSize: '11px' }, onClick: () => toggleVisible(e.key) }, visibleKeys[e.key] ? t('envHideVal') : t('envShowVal')),
+                    React.createElement('button', { type: 'button', className: 'drw-btn drw-btn-primary', style: { padding: '2px 6px', fontSize: '11px' }, onClick: () => saveVar(e.key) }, t('envSaveVar'))
+                  )
+                )
+              )
+        )
+      )
+    }
+
+    // --- Sub-component: Docker Containers Tab ---
+    function ContainersTab(props) {
+      const { activeProfile, t } = props
+      const [containers, setContainers] = React.useState([])
+      const [loading, setLoading] = React.useState(false)
+      const [logsModal, setLogsModal] = React.useState(null)
+      const [logsContent, setLogsContent] = React.useState('')
+      const [logsLoading, setLogsLoading] = React.useState(false)
+
+      const loadContainers = async () => {
+        if (!activeProfile) return
+        setLoading(true)
+        try {
+          const res = await fetch(`/dsh-remote-workspace/docker/list?profileId=${activeProfile.id}`)
+          const data = await res.json()
+          if (data.ok && Array.isArray(data.containers)) {
+            setContainers(data.containers)
+          } else {
+            setContainers([])
+          }
+        } catch (_) {}
+        setLoading(false)
+      }
+
+      React.useEffect(() => {
+        loadContainers()
+      }, [activeProfile?.id])
+
+      const handleAction = async (containerId, action) => {
+        try {
+          await fetch('/dsh-remote-workspace/docker/action', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profileId: activeProfile.id, containerId, action })
+          })
+          await loadContainers()
+        } catch (_) {}
+      }
+
+      const showLogs = async (containerId, name) => {
+        setLogsModal({ id: containerId, name })
+        setLogsLoading(true)
+        try {
+          const res = await fetch('/dsh-remote-workspace/docker/logs', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profileId: activeProfile.id, containerId, tail: 150 })
+          })
+          const data = await res.json()
+          setLogsContent(data.logs || '[No logs output]')
+        } catch (err) {
+          setLogsContent(`[Error: ${err.message}]`)
+        }
+        setLogsLoading(false)
+      }
+
+      return React.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
+        React.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+          React.createElement('div', { style: { fontWeight: 600, fontSize: '14px' } }, t('containersTitle')),
+          React.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'drw-btn',
+              onClick: loadContainers,
+              disabled: loading
+            },
+            loading ? 'Refreshing...' : '🔄 Refresh'
+          )
+        ),
+        React.createElement(
+          'div',
+          { style: { border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '8px', overflow: 'hidden', background: 'var(--dsw-alias-bg-layer-2)' } },
+          React.createElement(
+            'div',
+            { className: 'drw-container-row', style: { fontWeight: 600, color: 'var(--dsw-alias-label-secondary)', background: 'var(--dsw-alias-bg-layer-1)' } },
+            React.createElement('span', null, t('containerName')),
+            React.createElement('span', null, t('containerImage')),
+            React.createElement('span', null, t('containerStatus')),
+            React.createElement('span', null, t('containerPorts')),
+            React.createElement('span', { style: { textAlign: 'right' } }, t('actionsCol'))
+          ),
+          containers.length === 0
+            ? React.createElement('div', { style: { padding: '24px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary)' } }, t('noContainers'))
+            : containers.map((c) =>
+                React.createElement(
+                  'div',
+                  { key: c.id, className: 'drw-container-row' },
+                  React.createElement(
+                    'div',
+                    { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                    React.createElement('span', { className: `drw-badge ${c.state === 'running' ? 'drw-badge-ok' : 'drw-badge-warn'}` }, c.state),
+                    React.createElement('span', { style: { fontWeight: 600 } }, c.names)
+                  ),
+                  React.createElement('span', { style: { opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, c.image),
+                  React.createElement('span', { style: { fontSize: '11px', opacity: 0.7 } }, c.status),
+                  React.createElement('span', { style: { fontSize: '11px', opacity: 0.7, overflow: 'hidden', textOverflow: 'ellipsis' } }, c.ports || '—'),
+                  React.createElement(
+                    'div',
+                    { style: { display: 'flex', gap: '4px', justifyContent: 'flex-end' } },
+                    React.createElement(
+                      'button',
+                      { type: 'button', className: 'drw-btn', style: { padding: '2px 6px', fontSize: '11px' }, onClick: () => showLogs(c.id, c.names) },
+                      t('btnLogs')
+                    ),
+                    React.createElement(
+                      'button',
+                      { type: 'button', className: 'drw-btn', style: { padding: '2px 6px', fontSize: '11px' }, onClick: () => handleAction(c.id, 'restart') },
+                      t('btnRestart')
+                    ),
+                    c.state === 'running'
+                      ? React.createElement(
+                          'button',
+                          { type: 'button', className: 'drw-btn drw-btn-danger', style: { padding: '2px 6px', fontSize: '11px' }, onClick: () => handleAction(c.id, 'stop') },
+                          t('btnStop')
+                        )
+                      : null
+                  )
+                )
+              )
+        ),
+        // Container Logs Modal
+        logsModal
+          ? React.createElement(
+              'div',
+              { className: 'drw-modal-overlay', onClick: () => setLogsModal(null) },
+              React.createElement(
+                'div',
+                { className: 'drw-modal-dialog', onClick: (e) => e.stopPropagation() },
+                React.createElement(
+                  'div',
+                  { className: 'drw-modal-hdr' },
+                  React.createElement('span', { style: { fontFamily: 'monospace' } }, `Docker Logs: ${logsModal.name} (${logsModal.id})`),
+                  React.createElement('button', { type: 'button', className: 'drw-btn', onClick: () => setLogsModal(null) }, '✕')
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'drw-modal-body' },
+                  React.createElement('pre', { style: { background: '#0d1117', color: '#c9d1d9', padding: '12px', borderRadius: '8px', fontSize: '12px', maxHeight: '420px', overflowY: 'auto', whiteSpace: 'pre-wrap' } }, logsLoading ? 'Fetching logs...' : logsContent)
+                )
+              )
+            )
+          : null
+      )
+    }
+
     // --- Sub-component: Web Terminal Tab ---
     function TerminalTab(props) {
       const { activeProfile, t } = props
@@ -737,8 +1111,10 @@ 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.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
+      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([])
@@ -768,6 +1144,10 @@ window.__ModuleLoader__.load({
               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 (_) {}
@@ -1482,6 +1862,39 @@ window.__ModuleLoader__.load({
               { 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 (_) {}
+                    }
+                  },
+                  autoSync ? '⚡ Active (ON)' : '⚪ Off'
+                )
+              ),
+
               React.createElement(
                 'div',
                 { className: 'drw-row' },
@@ -1641,7 +2054,7 @@ window.__ModuleLoader__.load({
     // Accordion item for Settings -> Plugins section
     function PluginCard(props) {
       const [open, setOpen] = React.useState(false)
-      const t = props.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
+      const t = props.t || (props.locale === 'zh' ? makeT(zh, en) : makeT(en, zh))
 
       React.useEffect(() => {
         ensureCss()
@@ -1731,7 +2144,7 @@ window.__ModuleLoader__.load({
 
     function apply(ctx) {
       if (ctx.locale && typeof ctx.locale.register === 'function') {
-        try { ctx.locale.register(NS, { en, ru }) } catch (_) {}
+        try { ctx.locale.register(NS, { en, zh }) } catch (_) {}
       }
 
       if (ctx.slots && typeof ctx.slots.inject === 'function') {