@goodandready/dsh-remote-workspace 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/docs/design/DESIGN.md +60 -51
  2. package/docs/plans/findings.md +14 -2
  3. package/docs/plans/progress.md +11 -10
  4. package/docs/plans/task_plan.md +16 -19
  5. package/lib/client.js +1766 -966
  6. package/lib/index.js +79 -18
  7. package/lib/mirror-sync-service.js +73 -16
  8. package/lib/remote-fs-service.js +58 -7
  9. package/lib/routes.js +291 -57
  10. package/lib/ssh-service.js +188 -17
  11. package/lib/tools.js +25 -11
  12. package/lib/tunnel-service.js +85 -32
  13. package/lib/vault-service.js +184 -0
  14. package/package.json +1 -1
package/lib/client.js CHANGED
@@ -1,966 +1,1766 @@
1
- window.__ModuleLoader__.load({
2
- id: '@goodandready/dsh-remote-workspace',
3
- factory: (require) => {
4
- var module = { exports: {} }
5
- var exports = module.exports
6
- const React = require('react')
7
-
8
- const NS = 'dsh-remote-workspace'
9
-
10
- function ensureCss() {
11
- if (typeof document === 'undefined') return
12
- if (document.getElementById('drw-clinebot-style')) return
13
- const style = document.createElement('style')
14
- style.id = 'drw-clinebot-style'
15
- style.dataset.dshPlugin = NS
16
- style.textContent = `
17
- .drw-page{display:flex;flex-direction:column;gap:18px;padding:6px 0 20px;max-width:960px}
18
- .drw-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--dsw-alias-border-l2)}
19
- .drw-page-title{font-size:20px;font-weight:700;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:10px}
20
- .drw-page-sub{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.4}
21
-
22
- .drw-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;list-style:none}
23
- .drw-card-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}
24
- .drw-card-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-4px;line-height:1.4}
25
-
26
- .drw-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
27
- .drw-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:12px}
28
-
29
- .drw-badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500;font-family:monospace}
30
- .drw-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}
31
- .drw-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}
32
- .drw-badge-err{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}
33
-
34
- .drw-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;width:100%;box-sizing:border-box}
35
- .drw-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}
36
- .drw-label{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary);margin-bottom:2px}
37
- .drw-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px}
38
-
39
- .drw-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}
40
- .drw-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
41
- .drw-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
42
- .drw-btn-primary:hover:not(:disabled){opacity:0.9}
43
- .drw-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}
44
- .drw-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.5)}
45
-
46
- .drw-segmented{display:inline-flex;border-radius:8px;padding:2px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);gap:2px}
47
- .drw-segmented-item{appearance:none;border:none;background:none;cursor:pointer;padding:4px 12px;font-size:12px;font-weight:500;border-radius:6px;color:var(--dsw-alias-label-secondary);transition:all .15s ease}
48
- .drw-segmented-item-active{background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,0.08);font-weight:600}
49
-
50
- .drw-table{width:100%;border-collapse:collapse;margin-top:6px}
51
- .drw-table th{text-align:left;font-size:12px;color:var(--dsw-alias-label-secondary);padding:6px 8px;border-bottom:1px solid var(--dsw-alias-border-l2);font-weight:600}
52
- .drw-table td{padding:8px;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:13px;color:var(--dsw-alias-label-primary)}
53
- .drw-table tr:hover{background:var(--dsw-alias-bg-layer-2)}
54
-
55
- .drw-stat-box{padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:3px}
56
- .drw-stat-val{font-size:15px;font-weight:700;color:var(--dsw-alias-label-primary)}
57
- .drw-stat-lbl{font-size:11px;color:var(--dsw-alias-label-secondary)}
58
- .drw-preview{padding:10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--dsw-alias-border-l2)}
59
-
60
- .drw-browser-modal{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-2);padding:12px;display:flex;flex-direction:column;gap:8px;max-height:260px}
61
- .drw-browser-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px;max-height:180px;padding-right:4px}
62
- .drw-browser-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;font-family:monospace}
63
- .drw-browser-item:hover{background:var(--dsw-alias-bg-layer-3)}
64
- `
65
- document.head.appendChild(style)
66
- }
67
-
68
- const en = {
69
- title: 'Remote Workspace',
70
- subtitle: 'Manage SSH connections, SFTP sync, and tunnels',
71
- status: 'Ready',
72
- activeBadge: 'Active',
73
- setActiveBtn: 'Set Active',
74
- pinned: 'Pinned Active Host',
75
- profilesTitle: '🖥️ Remote SSH Profiles',
76
- profilesDesc: 'Configure remote hosts for code execution, SFTP file access, and mirror syncing.',
77
- addBtn: '+ Add Host',
78
- nameCol: 'Name',
79
- hostCol: 'Host / User',
80
- portCol: 'Port',
81
- pathCol: 'Remote Path',
82
- actionsCol: 'Actions',
83
- noHosts: 'No remote hosts configured yet. Click "+ Add Host" to create one.',
84
- formTitleNew: 'Add New Host Profile',
85
- formTitleEdit: 'Edit Host Profile',
86
- fName: 'Profile Name',
87
- fHost: 'Host / IP Address',
88
- fPort: 'Port',
89
- fUser: 'Username',
90
- fAuthType: 'Authentication Method',
91
- fAuthKey: 'SSH Private Key',
92
- fAuthPass: 'Password',
93
- fKeyPath: 'Key Path',
94
- fPassphrase: 'Key Passphrase (optional)',
95
- fPassword: 'Password',
96
- fRemotePath: 'Remote Project Directory',
97
- fRemotePathHint: '(Optional now, can be chosen later while working)',
98
- btnBrowse: '📁 Browse Remote...',
99
- btnSelectThis: 'Select Current Directory',
100
- btnTest: '⚡ Test Connection',
101
- btnSave: 'Save Profile',
102
- btnCancel: 'Cancel',
103
- btnDelete: 'Delete',
104
- testing: 'Testing Connection...',
105
- saving: 'Saving...',
106
- diagTitle: '📊 Active Connection Diagnostics',
107
- diagDesc: 'Live connection probe to the currently selected remote machine.',
108
- syncTitle: '🔄 Mirror Sync & Port Tunnels',
109
- syncDesc: 'Synchronize local workspace mirror or check forwarded background port tunnels.',
110
- pullBtn: '⬇️ Pull from Remote',
111
- pushBtn: '⬆️ Push to Remote',
112
- syncSuccess: 'Sync completed successfully',
113
- syncFailed: 'Sync encountered conflicts or errors: '
114
- }
115
-
116
- const ru = {
117
- title: 'Удалённое рабочее пространство',
118
- subtitle: 'Управление подключениями по SSH, синхронизацией SFTP и туннелями',
119
- status: 'Готово',
120
- activeBadge: 'Активен',
121
- setActiveBtn: 'Сделать активным',
122
- pinned: 'Активный хост',
123
- profilesTitle: '🖥️ Профили SSH серверов',
124
- profilesDesc: 'Настройка удалённых хостов для выполнения команд, SFTP доступа и синхронизации.',
125
- addBtn: '+ Добавить хост',
126
- nameCol: 'Имя',
127
- hostCol: 'Хост / Пользователь',
128
- portCol: 'Порт',
129
- pathCol: 'Удалённый путь',
130
- actionsCol: 'Действия',
131
- noHosts: 'Удалённые хосты ещё не настроены. Нажмите «+ Добавить хост».',
132
- formTitleNew: 'Добавление нового SSH хоста',
133
- formTitleEdit: 'Редактирование профиля хоста',
134
- fName: 'Название подключения',
135
- fHost: 'Хост / IP-адрес',
136
- fPort: 'Порт',
137
- fUser: 'Имя пользователя',
138
- fAuthType: 'Способ авторизации',
139
- fAuthKey: 'SSH-ключ',
140
- fAuthPass: 'Пароль',
141
- fKeyPath: 'Путь к ключу',
142
- fPassphrase: 'Кодовая фраза ключа (если есть)',
143
- fPassword: 'Пароль учетной записи',
144
- fRemotePath: 'Удалённая папка проекта',
145
- fRemotePathHint: '(Не обязательно сейчас — можно выбрать позже при работе)',
146
- btnBrowse: '📁 Выбрать на сервере…',
147
- btnSelectThis: 'Выбрать эту папку',
148
- btnTest: '⚡ Проверить связь (Ping)',
149
- btnSave: 'Сохранить профиль',
150
- btnCancel: 'Отмена',
151
- btnDelete: 'Удалить',
152
- testing: 'Проверка соединения…',
153
- saving: 'Сохранение…',
154
- diagTitle: '📊 Диагностика активного подключения',
155
- diagDesc: 'Проверка доступности и измерение задержки активного сервера.',
156
- syncTitle: '🔄 Синхронизация зеркала и туннели',
157
- syncDesc: 'Ручная синхронизация файлов с удалённым сервером и статус проброса портов.',
158
- pullBtn: '⬇️ Скачать с сервера (Pull)',
159
- pushBtn: '⬆️ Загрузить на сервер (Push)',
160
- syncSuccess: 'Синхронизация успешно выполнена',
161
- syncFailed: 'Ошибка синхронизации: '
162
- }
163
-
164
- function makeT(dict, fallback) {
165
- return function t(key) {
166
- return (dict && dict[key]) || (fallback && fallback[key]) || key
167
- }
168
- }
169
-
170
- function FallbackChevron() {
171
- return React.createElement(
172
- 'svg',
173
- { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
174
- React.createElement('path', {
175
- d: 'M3.5 5.25L7 8.75L10.5 5.25',
176
- stroke: 'currentColor',
177
- strokeWidth: 1.5,
178
- strokeLinecap: 'round',
179
- strokeLinejoin: 'round',
180
- })
181
- )
182
- }
183
-
184
- function SettingsView(props) {
185
- const t = props.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
186
- const [profiles, setProfiles] = React.useState([])
187
- const [activeId, setActiveId] = React.useState(null)
188
- const [editing, setEditing] = React.useState(null) // null or object
189
- const [busy, setBusy] = React.useState(null)
190
- const [testResult, setTestResult] = React.useState(null)
191
- const [syncMsg, setSyncMsg] = React.useState(null)
192
-
193
- // Remote Directory Browser State
194
- const [browserOpen, setBrowserOpen] = React.useState(false)
195
- const [browserPath, setBrowserPath] = React.useState('/')
196
- const [browserEntries, setBrowserEntries] = React.useState([])
197
- const [browserLoading, setBrowserLoading] = React.useState(false)
198
-
199
- const loadState = async () => {
200
- try {
201
- const res = await fetch('/dsh-remote-workspace/state')
202
- if (res.ok) {
203
- const data = await res.json()
204
- if (data.ok) {
205
- setProfiles(data.profiles || [])
206
- setActiveId(data.activeId || null)
207
- }
208
- }
209
- } catch (_) {}
210
- }
211
-
212
- React.useEffect(() => {
213
- ensureCss()
214
- loadState()
215
- }, [])
216
-
217
- const handleSave = async (profile) => {
218
- setBusy('saving')
219
- try {
220
- const res = await fetch('/dsh-remote-workspace/profiles/save', {
221
- method: 'POST',
222
- headers: { 'Content-Type': 'application/json' },
223
- body: JSON.stringify(profile)
224
- })
225
- if (res.ok) {
226
- setEditing(null)
227
- setBrowserOpen(false)
228
- await loadState()
229
- }
230
- } catch (_) {}
231
- setBusy(null)
232
- }
233
-
234
- const handleDelete = async (id) => {
235
- try {
236
- const res = await fetch('/dsh-remote-workspace/profiles/delete', {
237
- method: 'POST',
238
- headers: { 'Content-Type': 'application/json' },
239
- body: JSON.stringify({ id })
240
- })
241
- if (res.ok) {
242
- if (editing && editing.id === id) setEditing(null)
243
- await loadState()
244
- }
245
- } catch (_) {}
246
- }
247
-
248
- const handleSetActive = async (id) => {
249
- try {
250
- const res = await fetch('/dsh-remote-workspace/profiles/active', {
251
- method: 'POST',
252
- headers: { 'Content-Type': 'application/json' },
253
- body: JSON.stringify({ id })
254
- })
255
- if (res.ok) {
256
- await loadState()
257
- }
258
- } catch (_) {}
259
- }
260
-
261
- const handleTest = async (prof) => {
262
- setBusy('testing')
263
- setTestResult(null)
264
- try {
265
- const res = await fetch('/dsh-remote-workspace/test', {
266
- method: 'POST',
267
- headers: { 'Content-Type': 'application/json' },
268
- body: JSON.stringify({ profile: prof })
269
- })
270
- const data = await res.json()
271
- setTestResult(data)
272
- } catch (err) {
273
- setTestResult({ ok: false, error: err.message })
274
- }
275
- setBusy(null)
276
- }
277
-
278
- const openDirectoryBrowser = async (initialPath) => {
279
- setBrowserOpen(true)
280
- const target = initialPath && initialPath.startsWith('/') ? initialPath : '/'
281
- await fetchRemoteDir(target)
282
- }
283
-
284
- const fetchRemoteDir = async (dirPath) => {
285
- setBrowserLoading(true)
286
- try {
287
- const res = await fetch('/dsh-remote-workspace/browse', {
288
- method: 'POST',
289
- headers: { 'Content-Type': 'application/json' },
290
- body: JSON.stringify({ profile: editing, remotePath: dirPath })
291
- })
292
- const data = await res.json()
293
- if (data.ok) {
294
- setBrowserPath(data.currentPath || dirPath)
295
- setBrowserEntries(data.entries || [])
296
- }
297
- } catch (_) {}
298
- setBrowserLoading(false)
299
- }
300
-
301
- const handleSync = async (direction) => {
302
- setBusy(`sync_${direction}`)
303
- setSyncMsg(null)
304
- try {
305
- const res = await fetch('/dsh-remote-workspace/sync', {
306
- method: 'POST',
307
- headers: { 'Content-Type': 'application/json' },
308
- body: JSON.stringify({ profileId: activeId, direction })
309
- })
310
- const data = await res.json()
311
- if (data.ok) {
312
- setSyncMsg({ ok: true, text: t('syncSuccess') })
313
- } else {
314
- setSyncMsg({ ok: false, text: t('syncFailed') + (data.error || 'Conflicts detected') })
315
- }
316
- } catch (err) {
317
- setSyncMsg({ ok: false, text: err.message })
318
- }
319
- setBusy(null)
320
- }
321
-
322
- const activeProfile = profiles.find((p) => p.id === activeId)
323
-
324
- return React.createElement(
325
- 'div',
326
- { className: 'drw-page' },
327
-
328
- // Section 1: Profiles Management (ClineBot style)
329
- React.createElement(
330
- 'div',
331
- { className: 'drw-card' },
332
- React.createElement(
333
- 'div',
334
- { className: 'drw-card-title' },
335
- React.createElement('span', null, t('profilesTitle')),
336
- !editing
337
- ? React.createElement(
338
- 'button',
339
- {
340
- type: 'button',
341
- className: 'drw-btn drw-btn-primary',
342
- onClick: () =>
343
- setEditing({
344
- id: 'prof_' + Math.random().toString(36).substr(2, 9),
345
- name: 'New Server',
346
- host: '',
347
- port: 22,
348
- username: 'root',
349
- authType: 'key',
350
- privateKeyPath: '~/.ssh/id_rsa',
351
- passphrase: '',
352
- password: '',
353
- remoteWorkspace: '',
354
- localMirrorPath: ''
355
- })
356
- },
357
- t('addBtn')
358
- )
359
- : null
360
- ),
361
- React.createElement('div', { className: 'drw-card-desc' }, t('profilesDesc')),
362
-
363
- // Editing Form
364
- editing
365
- ? React.createElement(
366
- 'div',
367
- {
368
- style: {
369
- padding: '14px',
370
- borderRadius: '8px',
371
- background: 'var(--dsw-alias-bg-layer-2)',
372
- border: '1px solid var(--dsw-alias-border-l2)',
373
- display: 'flex',
374
- flexDirection: 'column',
375
- gap: '12px'
376
- }
377
- },
378
- React.createElement('div', { style: { fontWeight: 600, fontSize: '14px' } }, editing.name ? t('formTitleEdit') : t('formTitleNew')),
379
- React.createElement(
380
- 'div',
381
- { className: 'drw-grid-2' },
382
- React.createElement(
383
- 'div',
384
- { className: 'drw-field' },
385
- React.createElement('span', { className: 'drw-label' }, t('fName')),
386
- React.createElement('input', {
387
- className: 'drw-input',
388
- value: editing.name || '',
389
- onChange: (e) => setEditing({ ...editing, name: e.target.value })
390
- })
391
- ),
392
- React.createElement(
393
- 'div',
394
- { className: 'drw-field' },
395
- React.createElement('span', { className: 'drw-label' }, t('fHost')),
396
- React.createElement('input', {
397
- className: 'drw-input',
398
- placeholder: '192.168.1.100 or domain.com',
399
- value: editing.host || '',
400
- onChange: (e) => setEditing({ ...editing, host: e.target.value })
401
- })
402
- ),
403
- React.createElement(
404
- 'div',
405
- { className: 'drw-field' },
406
- React.createElement('span', { className: 'drw-label' }, t('fPort')),
407
- React.createElement('input', {
408
- className: 'drw-input',
409
- type: 'number',
410
- value: editing.port || 22,
411
- onChange: (e) => setEditing({ ...editing, port: parseInt(e.target.value, 10) || 22 })
412
- })
413
- ),
414
- React.createElement(
415
- 'div',
416
- { className: 'drw-field' },
417
- React.createElement('span', { className: 'drw-label' }, t('fUser')),
418
- React.createElement('input', {
419
- className: 'drw-input',
420
- value: editing.username || '',
421
- onChange: (e) => setEditing({ ...editing, username: e.target.value })
422
- })
423
- )
424
- ),
425
-
426
- // Auth Method Segmented Switcher (Key vs Password)
427
- React.createElement(
428
- 'div',
429
- { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
430
- React.createElement('span', { className: 'drw-label' }, t('fAuthType')),
431
- React.createElement(
432
- 'div',
433
- { className: 'drw-segmented' },
434
- React.createElement(
435
- 'button',
436
- {
437
- type: 'button',
438
- className: `drw-segmented-item ${editing.authType !== 'password' ? 'drw-segmented-item-active' : ''}`,
439
- onClick: () => setEditing({ ...editing, authType: 'key' })
440
- },
441
- '🔑 ' + t('fAuthKey')
442
- ),
443
- React.createElement(
444
- 'button',
445
- {
446
- type: 'button',
447
- className: `drw-segmented-item ${editing.authType === 'password' ? 'drw-segmented-item-active' : ''}`,
448
- onClick: () => setEditing({ ...editing, authType: 'password' })
449
- },
450
- '🔒 ' + t('fAuthPass')
451
- )
452
- )
453
- ),
454
-
455
- // Conditional Auth Inputs
456
- editing.authType === 'password'
457
- ? React.createElement(
458
- 'div',
459
- { className: 'drw-field' },
460
- React.createElement('span', { className: 'drw-label' }, t('fPassword')),
461
- React.createElement('input', {
462
- className: 'drw-input',
463
- type: 'password',
464
- placeholder: '••••••••••••',
465
- value: editing.password || '',
466
- onChange: (e) => setEditing({ ...editing, password: e.target.value })
467
- })
468
- )
469
- : React.createElement(
470
- 'div',
471
- { className: 'drw-grid-2' },
472
- React.createElement(
473
- 'div',
474
- { className: 'drw-field' },
475
- React.createElement('span', { className: 'drw-label' }, t('fKeyPath')),
476
- React.createElement('input', {
477
- className: 'drw-input',
478
- placeholder: '~/.ssh/id_rsa or /home/user/.ssh/id_ed25519',
479
- value: editing.privateKeyPath || '',
480
- onChange: (e) => setEditing({ ...editing, privateKeyPath: e.target.value })
481
- })
482
- ),
483
- React.createElement(
484
- 'div',
485
- { className: 'drw-field' },
486
- React.createElement('span', { className: 'drw-label' }, t('fPassphrase')),
487
- React.createElement('input', {
488
- className: 'drw-input',
489
- type: 'password',
490
- placeholder: 'Optional passphrase',
491
- value: editing.passphrase || '',
492
- onChange: (e) => setEditing({ ...editing, passphrase: e.target.value })
493
- })
494
- )
495
- ),
496
-
497
- // Remote Project Directory (Optional, with live server browse)
498
- React.createElement(
499
- 'div',
500
- { style: { display: 'flex', flexDirection: 'column', gap: '4px' } },
501
- React.createElement(
502
- 'div',
503
- { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
504
- React.createElement('span', { className: 'drw-label' }, t('fRemotePath')),
505
- React.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)' } }, t('fRemotePathHint'))
506
- ),
507
- React.createElement(
508
- 'div',
509
- { style: { display: 'flex', gap: '8px' } },
510
- React.createElement('input', {
511
- className: 'drw-input',
512
- placeholder: '/var/www/my-project or ~/projects/app (can leave empty for now)',
513
- value: editing.remoteWorkspace || '',
514
- onChange: (e) => setEditing({ ...editing, remoteWorkspace: e.target.value })
515
- }),
516
- React.createElement(
517
- 'button',
518
- {
519
- type: 'button',
520
- className: 'drw-btn',
521
- disabled: !editing.host,
522
- onClick: () => openDirectoryBrowser(editing.remoteWorkspace || '/')
523
- },
524
- t('btnBrowse')
525
- )
526
- )
527
- ),
528
-
529
- // Remote Directory Browser Modal/Inline Tree
530
- browserOpen
531
- ? React.createElement(
532
- 'div',
533
- { className: 'drw-browser-modal' },
534
- React.createElement(
535
- 'div',
536
- { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
537
- React.createElement('span', { style: { fontSize: '12px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } }, `📂 ${browserPath}`),
538
- React.createElement(
539
- 'div',
540
- { style: { display: 'flex', gap: '6px' } },
541
- React.createElement(
542
- 'button',
543
- {
544
- type: 'button',
545
- className: 'drw-btn drw-btn-primary',
546
- style: { fontSize: '11px', padding: '3px 8px' },
547
- onClick: () => {
548
- setEditing({ ...editing, remoteWorkspace: browserPath })
549
- setBrowserOpen(false)
550
- }
551
- },
552
- t('btnSelectThis')
553
- ),
554
- React.createElement(
555
- 'button',
556
- {
557
- type: 'button',
558
- className: 'drw-btn',
559
- style: { fontSize: '11px', padding: '3px 8px' },
560
- onClick: () => setBrowserOpen(false)
561
- },
562
- '✕'
563
- )
564
- )
565
- ),
566
- React.createElement(
567
- 'div',
568
- { className: 'drw-browser-list' },
569
- browserLoading
570
- ? React.createElement('div', { style: { padding: '8px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, 'Loading directory entries...')
571
- : React.createElement(
572
- React.Fragment,
573
- null,
574
- browserPath !== '/'
575
- ? React.createElement(
576
- 'div',
577
- {
578
- className: 'drw-browser-item',
579
- onClick: () => {
580
- const parent = browserPath.substring(0, browserPath.lastIndexOf('/')) || '/'
581
- fetchRemoteDir(parent)
582
- }
583
- },
584
- '📁 .. (parent directory)'
585
- )
586
- : null,
587
- browserEntries
588
- .filter((e) => e.isDirectory)
589
- .map((e) =>
590
- React.createElement(
591
- 'div',
592
- {
593
- key: e.filename,
594
- className: 'drw-browser-item',
595
- onClick: () => {
596
- const next = browserPath === '/' ? `/${e.filename}` : `${browserPath}/${e.filename}`
597
- fetchRemoteDir(next)
598
- }
599
- },
600
- `📁 ${e.filename}`
601
- )
602
- )
603
- )
604
- )
605
- )
606
- : null,
607
-
608
- // Form Action Buttons
609
- React.createElement(
610
- 'div',
611
- { className: 'drw-row', style: { justifyContent: 'flex-end', marginTop: '6px' } },
612
- React.createElement(
613
- 'button',
614
- {
615
- type: 'button',
616
- className: 'drw-btn',
617
- disabled: !editing.host || !!busy,
618
- onClick: () => handleTest(editing)
619
- },
620
- busy === 'testing' ? t('testing') : t('btnTest')
621
- ),
622
- React.createElement(
623
- 'button',
624
- {
625
- type: 'button',
626
- className: 'drw-btn',
627
- onClick: () => {
628
- setEditing(null)
629
- setBrowserOpen(false)
630
- }
631
- },
632
- t('btnCancel')
633
- ),
634
- React.createElement(
635
- 'button',
636
- {
637
- type: 'button',
638
- className: 'drw-btn drw-btn-primary',
639
- disabled: !editing.host || !!busy,
640
- onClick: () => handleSave(editing)
641
- },
642
- busy === 'saving' ? t('saving') : t('btnSave')
643
- )
644
- ),
645
- testResult
646
- ? React.createElement(
647
- 'div',
648
- {
649
- className: 'drw-preview',
650
- style: {
651
- borderColor: testResult.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)'
652
- }
653
- },
654
- testResult.ok
655
- ? `✅ Connection OK! Latency: ${testResult.latencyMs} ms | OS: ${testResult.remoteOs || 'Unknown'}`
656
- : `❌ Connection Failed: ${testResult.error || 'Connection timed out'}`
657
- )
658
- : null
659
- )
660
- : null,
661
-
662
- // Profiles Table
663
- profiles.length > 0
664
- ? React.createElement(
665
- 'table',
666
- { className: 'drw-table' },
667
- React.createElement(
668
- 'thead',
669
- null,
670
- React.createElement(
671
- 'tr',
672
- null,
673
- React.createElement('th', null, t('nameCol')),
674
- React.createElement('th', null, t('hostCol')),
675
- React.createElement('th', null, t('portCol')),
676
- React.createElement('th', null, t('pathCol')),
677
- React.createElement('th', { style: { textAlign: 'right' } }, t('actionsCol'))
678
- )
679
- ),
680
- React.createElement(
681
- 'tbody',
682
- null,
683
- profiles.map((p) => {
684
- const isAct = p.id === activeId
685
- return React.createElement(
686
- 'tr',
687
- { key: p.id },
688
- React.createElement(
689
- 'td',
690
- null,
691
- React.createElement('span', { style: { fontWeight: 600 } }, p.name),
692
- React.createElement(
693
- 'span',
694
- { className: 'drw-badge', style: { marginLeft: '8px' } },
695
- p.authType === 'password' ? '🔒 pwd' : '🔑 key'
696
- ),
697
- isAct
698
- ? React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginLeft: '6px' } }, t('activeBadge'))
699
- : null
700
- ),
701
- React.createElement('td', null, `${p.username}@${p.host}`),
702
- React.createElement('td', null, p.port || 22),
703
- React.createElement('td', null, p.remoteWorkspace || '— (not set)'),
704
- React.createElement(
705
- 'td',
706
- { style: { textAlign: 'right' } },
707
- React.createElement(
708
- 'div',
709
- { className: 'drw-row', style: { justifyContent: 'flex-end' } },
710
- !isAct
711
- ? React.createElement(
712
- 'button',
713
- {
714
- type: 'button',
715
- className: 'drw-btn',
716
- style: { fontSize: '11px', padding: '3px 8px' },
717
- onClick: () => handleSetActive(p.id)
718
- },
719
- t('setActiveBtn')
720
- )
721
- : null,
722
- React.createElement(
723
- 'button',
724
- {
725
- type: 'button',
726
- className: 'drw-btn',
727
- style: { fontSize: '11px', padding: '3px 8px' },
728
- onClick: () => {
729
- setEditing({ ...p })
730
- setTestResult(null)
731
- setBrowserOpen(false)
732
- }
733
- },
734
- '✏️'
735
- ),
736
- React.createElement(
737
- 'button',
738
- {
739
- type: 'button',
740
- className: 'drw-btn drw-btn-danger',
741
- style: { fontSize: '11px', padding: '3px 8px' },
742
- onClick: () => handleDelete(p.id)
743
- },
744
- '🗑️'
745
- )
746
- )
747
- )
748
- )
749
- })
750
- )
751
- )
752
- : !editing
753
- ? React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('noHosts'))
754
- : null
755
- ),
756
-
757
- // Section 2: Active Connection Diagnostics (ClineBot Card 4 style)
758
- activeProfile
759
- ? React.createElement(
760
- 'div',
761
- { className: 'drw-card' },
762
- React.createElement('div', { className: 'drw-card-title' }, t('diagTitle')),
763
- React.createElement('div', { className: 'drw-card-desc' }, t('diagDesc')),
764
- React.createElement(
765
- 'div',
766
- { className: 'drw-grid-2' },
767
- React.createElement(
768
- 'div',
769
- { className: 'drw-stat-box' },
770
- React.createElement('div', { className: 'drw-stat-val' }, activeProfile.name),
771
- React.createElement('div', { className: 'drw-stat-lbl' }, 'Host: ' + activeProfile.host)
772
- ),
773
- React.createElement(
774
- 'div',
775
- { className: 'drw-stat-box' },
776
- React.createElement('div', { className: 'drw-stat-val' }, activeProfile.remoteWorkspace || '— (select during work)'),
777
- React.createElement('div', { className: 'drw-stat-lbl' }, 'Remote Workspace Directory')
778
- ),
779
- React.createElement(
780
- 'div',
781
- { className: 'drw-stat-box' },
782
- React.createElement('div', { className: 'drw-stat-val' }, activeProfile.authType === 'password' ? 'Password Auth' : 'SSH Key Auth'),
783
- React.createElement('div', { className: 'drw-stat-lbl' }, 'User: ' + activeProfile.username)
784
- ),
785
- React.createElement(
786
- 'div',
787
- { className: 'drw-stat-box' },
788
- React.createElement('div', { className: 'drw-stat-val' }, 'Ready'),
789
- React.createElement('div', { className: 'drw-stat-lbl' }, 'DSH Remote Engine Status')
790
- )
791
- )
792
- )
793
- : null,
794
-
795
- // Section 3: Mirror Sync (ClineBot Action Card style)
796
- activeProfile && activeProfile.remoteWorkspace
797
- ? React.createElement(
798
- 'div',
799
- { className: 'drw-card' },
800
- React.createElement('div', { className: 'drw-card-title' }, t('syncTitle')),
801
- React.createElement('div', { className: 'drw-card-desc' }, t('syncDesc')),
802
- React.createElement(
803
- 'div',
804
- { className: 'drw-row' },
805
- React.createElement(
806
- 'button',
807
- {
808
- type: 'button',
809
- className: 'drw-btn',
810
- disabled: !!busy,
811
- onClick: () => handleSync('pull')
812
- },
813
- busy === 'sync_pull' ? 'Pulling...' : t('pullBtn')
814
- ),
815
- React.createElement(
816
- 'button',
817
- {
818
- type: 'button',
819
- className: 'drw-btn',
820
- disabled: !!busy,
821
- onClick: () => handleSync('push')
822
- },
823
- busy === 'sync_push' ? 'Pushing...' : t('pushBtn')
824
- )
825
- ),
826
- syncMsg
827
- ? React.createElement(
828
- 'div',
829
- {
830
- className: 'drw-preview',
831
- style: {
832
- borderColor: syncMsg.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)'
833
- }
834
- },
835
- syncMsg.text
836
- )
837
- : null
838
- )
839
- : null
840
- )
841
- }
842
-
843
- // Accordion item for Plugins section
844
- function PluginCard(props) {
845
- const [open, setOpen] = React.useState(false)
846
- const t = props.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
847
-
848
- React.useEffect(() => {
849
- ensureCss()
850
- }, [])
851
-
852
- return React.createElement(
853
- 'li',
854
- { className: 'drw-card', style: { listStyle: 'none', marginBottom: '12px' } },
855
- React.createElement(
856
- 'button',
857
- {
858
- type: 'button',
859
- style: {
860
- background: 'none',
861
- border: 'none',
862
- cursor: 'pointer',
863
- display: 'flex',
864
- alignItems: 'center',
865
- width: '100%',
866
- padding: 0,
867
- textAlign: 'left',
868
- },
869
- 'aria-expanded': open,
870
- onClick: () => setOpen((v) => !v),
871
- },
872
- React.createElement('span', { style: { fontSize: '20px', marginRight: '12px' } }, '🌐'),
873
- React.createElement(
874
- 'div',
875
- { style: { flex: 1 } },
876
- React.createElement('div', { style: { fontWeight: 600, fontSize: '15px', color: 'var(--dsw-alias-label-primary)' } }, t('title')),
877
- React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
878
- ),
879
- React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginRight: '14px' } }, t('status')),
880
- React.createElement(
881
- 'span',
882
- { style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .16s' } },
883
- React.createElement(FallbackChevron)
884
- )
885
- ),
886
- open
887
- ? React.createElement('div', { style: { marginTop: '16px', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '16px' } },
888
- React.createElement(SettingsView, props)
889
- )
890
- : null
891
- )
892
- }
893
-
894
- function RemoteWorkspaceChip(props) {
895
- ensureCss()
896
- const [activeHost, setActiveHost] = React.useState(null)
897
-
898
- React.useEffect(() => {
899
- fetch('/dsh-remote-workspace/state')
900
- .then((r) => r.json())
901
- .then((d) => {
902
- if (d.ok && d.activeId && d.profiles) {
903
- const f = d.profiles.find((p) => p.id === d.activeId)
904
- if (f) setActiveHost(f.name || f.host)
905
- }
906
- })
907
- .catch(() => {})
908
- }, [])
909
-
910
- return React.createElement(
911
- 'div',
912
- {
913
- style: {
914
- display: 'flex',
915
- alignItems: 'center',
916
- gap: '6px',
917
- padding: '2px 8px',
918
- fontSize: '11px',
919
- fontFamily: 'monospace',
920
- borderRadius: '999px',
921
- border: '1px solid var(--dsw-alias-border-l2)',
922
- background: 'var(--dsw-alias-bg-layer-1)',
923
- color: activeHost ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-secondary)',
924
- cursor: 'pointer'
925
- }
926
- },
927
- React.createElement('span', null, '🌐'),
928
- React.createElement('span', null, activeHost ? `SSH: ${activeHost}` : 'SSH: Local')
929
- )
930
- }
931
-
932
- function apply(ctx) {
933
- if (ctx.locale && typeof ctx.locale.register === 'function') {
934
- try { ctx.locale.register(NS, { en, ru }) } catch (_) {}
935
- }
936
-
937
- if (ctx.slots && typeof ctx.slots.inject === 'function') {
938
- ctx.slots.inject('settings.plugin.item', () =>
939
- ctx.slots.register(
940
- {
941
- name: 'settings.plugin.item',
942
- key: NS,
943
- locale: NS,
944
- inject: () => ({ ctx })
945
- },
946
- (props) => React.createElement(PluginCard, Object.assign({}, props, { ctx }))
947
- )
948
- )
949
-
950
- ctx.slots.inject('conversation.session.header.utilities', () =>
951
- ctx.slots.register(
952
- {
953
- name: 'conversation.session.header.utilities',
954
- id: '@goodandready/dsh-remote-workspace',
955
- order: 30
956
- },
957
- (props) => React.createElement(RemoteWorkspaceChip, props)
958
- )
959
- )
960
- }
961
- }
962
-
963
- module.exports = { apply, inject: ['slots', 'locale', 'settingsScope'] }
964
- return module.exports
965
- }
966
- })
1
+ // Remote Workspace Settings Card (settings.plugin.item) & Session Utility Chip.
2
+ window.__ModuleLoader__.load({
3
+ id: '@goodandready/dsh-remote-workspace',
4
+ factory: (require) => {
5
+ var module = { exports: {} }
6
+ var exports = module.exports
7
+ const React = require('react')
8
+
9
+ const NS = 'dsh-remote-workspace'
10
+
11
+ function ensureCss() {
12
+ if (typeof document === 'undefined') return
13
+ if (document.getElementById('drw-clinebot-full-css')) return
14
+ const style = document.createElement('style')
15
+ style.id = 'drw-clinebot-full-css'
16
+ style.dataset.dshPlugin = NS
17
+ style.textContent = `
18
+ .drw-page{display:flex;flex-direction:column;gap:18px;padding:6px 0 24px;max-width:960px}
19
+ .drw-header{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--dsw-alias-border-l2)}
20
+ .drw-header-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
21
+ .drw-page-title{font-size:20px;font-weight:700;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:10px}
22
+ .drw-page-sub{font-size:13px;color:var(--dsw-alias-label-secondary);line-height:1.5}
23
+ .drw-header-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
24
+
25
+ .drw-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:14px;list-style:none}
26
+ .drw-card-title{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:space-between}
27
+ .drw-card-desc{font-size:13px;color:var(--dsw-alias-label-secondary);margin-top:-6px;line-height:1.4}
28
+
29
+ .drw-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
30
+ .drw-grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:12px}
31
+ .drw-grid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));gap:10px}
32
+
33
+ .drw-badge{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500;font-family:monospace}
34
+ .drw-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}
35
+ .drw-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}
36
+ .drw-badge-err{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}
37
+
38
+ .drw-input{height:34px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 10px;font-size:13px;width:100%;box-sizing:border-box}
39
+ .drw-input:focus{outline:none;border-color:var(--dsw-alias-state-brand-primary)}
40
+ .drw-label{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary);margin-bottom:2px}
41
+ .drw-hint{font-size:11px;color:var(--dsw-alias-label-dimmed, var(--dsw-alias-label-secondary));line-height:1.3}
42
+ .drw-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px}
43
+
44
+ .drw-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}
45
+ .drw-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
46
+ .drw-btn:disabled{opacity:0.6;cursor:not-allowed}
47
+ .drw-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
48
+ .drw-btn-primary:hover:not(:disabled){opacity:0.9}
49
+ .drw-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:rgba(239,68,68,0.3)}
50
+ .drw-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.5)}
51
+
52
+ .drw-segmented{display:inline-flex;border-radius:8px;padding:2px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);gap:2px}
53
+ .drw-segmented-item{appearance:none;border:none;background:none;cursor:pointer;padding:5px 12px;font-size:12px;font-weight:500;border-radius:6px;color:var(--dsw-alias-label-secondary);transition:all .15s ease}
54
+ .drw-segmented-item-active{background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,0.08);font-weight:600}
55
+
56
+ .drw-table{width:100%;border-collapse:collapse;margin-top:4px}
57
+ .drw-table th{text-align:left;font-size:12px;color:var(--dsw-alias-label-secondary);padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-weight:600}
58
+ .drw-table td{padding:9px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);font-size:13px;color:var(--dsw-alias-label-primary)}
59
+ .drw-table tr:hover{background:var(--dsw-alias-bg-layer-2)}
60
+
61
+ .drw-stat-box{padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:3px}
62
+ .drw-stat-val{font-size:14px;font-weight:700;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
63
+ .drw-stat-lbl{font-size:11px;color:var(--dsw-alias-label-secondary)}
64
+ .drw-preview{padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--dsw-alias-border-l2);line-height:1.4}
65
+
66
+ .drw-browser-modal{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-2);padding:12px;display:flex;flex-direction:column;gap:8px;max-height:280px}
67
+ .drw-browser-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px;max-height:190px;padding-right:4px}
68
+ .drw-browser-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;font-family:monospace}
69
+ .drw-browser-item:hover{background:var(--dsw-alias-bg-layer-3)}
70
+
71
+ .drw-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dsw-alias-border-l2);padding-bottom:10px;margin-bottom:14px;overflow-x:auto}
72
+ .drw-tab-btn{appearance:none;border:1px solid transparent;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
73
+ .drw-tab-btn:hover{background:var(--dsw-alias-bg-layer-4);color:var(--dsw-alias-label-primary)}
74
+ .drw-tab-btn.active{background:var(--dsw-alias-bg-layer-4);border-color:var(--dsw-alias-state-brand-primary);color:var(--dsw-alias-state-brand-primary)}
75
+
76
+ .drw-term-window{background:#0d1117;border:1px solid #30363d;border-radius:10px;display:flex;flex-direction:column;height:340px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.25)}
77
+ .drw-term-header{background:#161b22;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #30363d;font-size:12px;color:#8b949e;font-family:monospace}
78
+ .drw-term-body{flex:1;padding:10px 12px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.45;color:#c9d1d9;white-space:pre-wrap;word-break:break-all}
79
+ .drw-term-footer{display:flex;background:#161b22;border-top:1px solid #30363d;padding:6px}
80
+ .drw-term-input{flex:1;background:transparent;border:none;color:#58a6ff;font-family:monospace;font-size:13px;padding:4px 8px;outline:none}
81
+
82
+ .drw-explorer-box{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-2);padding:12px;display:flex;flex-direction:column;gap:10px}
83
+ .drw-explorer-nav{display:flex;align-items:center;gap:8px;font-family:monospace;font-size:12px;background:var(--dsw-alias-bg-layer-1);padding:6px 10px;border-radius:6px;border:1px solid var(--dsw-alias-border-l2)}
84
+ .drw-file-list{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto}
85
+ .drw-file-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;font-family:monospace;transition:background .1s ease}
86
+ .drw-file-row:hover{background:var(--dsw-alias-bg-layer-3)}
87
+ .drw-file-meta{display:flex;align-items:center;gap:12px;color:var(--dsw-alias-label-secondary);font-size:11.5px}
88
+
89
+ .drw-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
90
+ .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)}
91
+ .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}
92
+ .drw-modal-body{flex:1;padding:12px 16px;overflow-y:auto}
93
+ `
94
+ document.head.appendChild(style)
95
+ }
96
+
97
+ const en = {
98
+ title: 'Remote Workspace',
99
+ subtitle: 'Native SSH connections, SFTP file access, 3-way mirror sync, and port forwarding tunnels.',
100
+ status: 'Ready',
101
+
102
+ tabProfiles: '🖥️ Host Profiles',
103
+ tabTerminal: '⚡ Web Terminal',
104
+ tabExplorer: '📂 File Explorer',
105
+ tabTunnels: '🔗 Port Tunnels',
106
+ tabSync: '🔄 Sync Station',
107
+ vaultProtectedBadge: '🛡️ .env Vault Protected',
108
+ termStart: 'Connect Terminal',
109
+ termStop: 'Disconnect',
110
+ termClear: 'Clear',
111
+ termPlaceholder: 'Type command and press Enter (e.g. htop, ls, docker ps)...',
112
+ termConnected: 'Connected to PTY session {id} on {host}',
113
+ termDisconnected: 'Terminal disconnected.',
114
+ explorerTitle: 'Remote Filesystem Explorer',
115
+ filePreviewTitle: 'File Viewer: {path}',
116
+ fileSize: '{size} KB',
117
+ btnSaveFile: 'Save Changes',
118
+ fileSaved: 'File saved successfully.',
119
+ tunnelTraffic: 'RX: {rx} | TX: {tx}',
120
+ tunnelUptime: 'Up: {sec}s',
121
+ openLocalLink: '🌐 Open Local Port',
122
+ badgeOnline: 'Active Host: {name} ({latency} ms)',
123
+ badgeOffline: 'No active host',
124
+ badgeTunnels: 'Tunnels: {count}',
125
+ badgeKey: '🔑 Key Auth',
126
+ badgePassword: '🔒 Password Auth',
127
+ profilesTitle: '🖥️ Remote SSH Profiles',
128
+ profilesDesc: 'Configure remote machines for code execution, SFTP browsing, and background mirror sync.',
129
+ addBtn: '+ Add Host',
130
+ nameCol: 'Name',
131
+ hostCol: 'Host / User',
132
+ portCol: 'Port',
133
+ pathCol: 'Remote Workspace',
134
+ actionsCol: 'Actions',
135
+ noHosts: 'No remote hosts configured yet. Click "+ Add Host" to create your first connection.',
136
+ activeBadge: 'Active',
137
+ pinBtn: 'Pin Active',
138
+ editBtn: 'Edit',
139
+ delBtn: 'Delete',
140
+ delConfirm: 'Delete host profile "{name}"?',
141
+ formTitleNew: 'Add New Host Profile',
142
+ formTitleEdit: 'Edit Host Profile',
143
+ fName: 'Profile Name',
144
+ fHost: 'Host / IP Address',
145
+ fPort: 'Port',
146
+ fUser: 'Username',
147
+ fAuthType: 'Authentication Method',
148
+ fAuthKey: 'SSH Private Key',
149
+ fAuthPass: 'Password',
150
+ fKeyPath: 'Private Key Path',
151
+ fKeyPathHint: 'Path to ~/.ssh/id_rsa or /home/user/.ssh/id_ed25519',
152
+ fPassphrase: 'Key Passphrase (optional)',
153
+ fPassword: 'Account Password',
154
+ fRemotePath: 'Remote Workspace Directory',
155
+ fRemotePathHint: 'Absolute path on the server (e.g. /home/user/my-project)',
156
+ fLocalMirror: 'Local Mirror Directory',
157
+ fLocalMirrorHint: 'Local directory where files are mirrored for fast 3-way synchronization',
158
+ btnBrowse: '📁 Browse Remote...',
159
+ btnSelectThis: 'Select Directory',
160
+ btnTest: '⚡ Test Connection (Ping)',
161
+ btnSave: 'Save Profile',
162
+ btnCancel: 'Cancel',
163
+ testing: 'Testing Connection...',
164
+ saving: 'Saving...',
165
+ testOk: '✅ Connection OK! Latency: {latency} ms | OS: {os}',
166
+ testFail: '❌ Connection Failed: {err}',
167
+ diagTitle: '📊 Active Connection Diagnostics',
168
+ diagDesc: 'Real-time telemetry and engine status for the currently selected remote machine.',
169
+ diagProbeBtn: '⚡ Quick Probe',
170
+ syncTitle: '🔄 Two-Way Workspace Mirror Sync',
171
+ syncDesc: 'Fast 3-way conflict-aware file synchronization between local mirror and remote server.',
172
+ pullBtn: '⬇️ Pull from Remote',
173
+ pushBtn: '⬆️ Push to Remote',
174
+ pulling: 'Pulling files…',
175
+ pushing: 'Pushing files…',
176
+ syncOk: 'Sync completed! Updated {count} file(s).',
177
+ syncConflict: 'Conflict warning: {count} file(s) modified on both sides.',
178
+ syncErr: 'Sync error: {err}',
179
+ tunnelsTitle: '🔀 SSH Port Forwarding (Tunnels)',
180
+ tunnelsDesc: 'Forward remote ports (e.g. databases, web servers, APIs) to your local machine via encrypted SSH tunnels.',
181
+ tLocalPort: 'Local Port',
182
+ tRemotePort: 'Remote Port',
183
+ tOpenBtn: '+ Open Tunnel',
184
+ tOpening: 'Opening…',
185
+ tStopBtn: 'Stop',
186
+ tNoTunnels: 'No active port forwarding tunnels.',
187
+ tunnelsColId: 'Tunnel ID',
188
+ tunnelsColRoute: 'Forwarding Route',
189
+ tunnelsColActions: 'Actions',
190
+ tOpenOk: 'Tunnel opened: 127.0.0.1:{localPort} -> Remote:{remotePort}',
191
+ tOpenErr: 'Failed to open tunnel: {err}'
192
+ }
193
+
194
+ const ru = {
195
+ title: 'Удалённое рабочее пространство',
196
+ subtitle: 'SSH-подключения, доступ к файлам по SFTP, 3-way синхронизация зеркала и проброс портов.',
197
+ status: 'Готово',
198
+ badgeOnline: 'Активный хост: {name} ({latency} мс)',
199
+ badgeOffline: 'Хост не выбран',
200
+ badgeTunnels: 'Туннелей: {count}',
201
+ badgeKey: '🔑 Авторизация по ключу',
202
+ badgePassword: '🔒 Авторизация по паролю',
203
+ profilesTitle: '🖥️ Профили SSH серверов',
204
+ profilesDesc: 'Настройка удалённых серверов для запуска команд, SFTP-навигации и синхронизации зеркала.',
205
+ addBtn: '+ Добавить хост',
206
+ nameCol: 'Имя',
207
+ hostCol: 'Хост / Пользователь',
208
+ portCol: 'Порт',
209
+ pathCol: 'Удалённый путь',
210
+ actionsCol: 'Действия',
211
+ noHosts: 'Удалённые хосты ещё не настроены. Нажмите «+ Добавить хост» для создания подключения.',
212
+ activeBadge: 'Активен',
213
+ pinBtn: 'Сделать активным',
214
+ editBtn: 'Править',
215
+ delBtn: 'Удалить',
216
+ delConfirm: 'Удалить профиль хоста «{name}»?',
217
+ formTitleNew: 'Добавление нового SSH хоста',
218
+ formTitleEdit: 'Редактирование профиля хоста',
219
+ fName: 'Название подключения',
220
+ fHost: 'Хост / IP-адрес',
221
+ fPort: 'Порт',
222
+ fUser: 'Имя пользователя',
223
+ fAuthType: 'Способ авторизации',
224
+ fAuthKey: 'SSH-ключ',
225
+ fAuthPass: 'Пароль',
226
+ fKeyPath: 'Путь к приватному ключу',
227
+ fKeyPathHint: 'Путь к ~/.ssh/id_rsa или /home/user/.ssh/id_ed25519',
228
+ fPassphrase: 'Кодовая фраза ключа (если есть)',
229
+ fPassword: 'Пароль учётной записи',
230
+ fRemotePath: 'Удалённая папка проекта',
231
+ fRemotePathHint: 'Абсолютный путь на сервере (например, /home/user/project)',
232
+ fLocalMirror: 'Локальная папка зеркала',
233
+ fLocalMirrorHint: 'Локальная папка для быстрого зеркалирования и бесконфликтной 3-way синхронизации',
234
+ btnBrowse: '📁 Обзор на сервере…',
235
+ btnSelectThis: 'Выбрать папку',
236
+ btnTest: '⚡ Проверить связь (Ping)',
237
+ btnSave: 'Сохранить профиль',
238
+ btnCancel: 'Отмена',
239
+ testing: 'Проверка соединения…',
240
+ saving: 'Сохранение…',
241
+ testOk: '✅ Соединение успешно! Задержка: {latency} мс | ОС: {os}',
242
+ testFail: '❌ Ошибка подключения: {err}',
243
+ diagTitle: '📊 Диагностика активного подключения',
244
+ diagDesc: 'Телеметрия в реальном времени и состояние подсистемы для выбранного сервера.',
245
+ diagProbeBtn: '⚡ Опросить сервер',
246
+ syncTitle: '🔄 Двусторонняя синхронизация зеркала',
247
+ syncDesc: 'Бесконфликтная 3-way синхронизация файлов между локальным зеркалом и сервером.',
248
+ pullBtn: '⬇️ Скачать с сервера (Pull)',
249
+ pushBtn: '⬆️ Загрузить на сервер (Push)',
250
+ pulling: 'Скачивание файлов…',
251
+ pushing: 'Загрузка файлов…',
252
+ syncOk: 'Синхронизация завершена! Обновлено файлов: {count}.',
253
+ syncConflict: 'Внимание: конфликт изменений в {count} файлах.',
254
+ syncErr: 'Ошибка синхронизации: {err}',
255
+ tunnelsTitle: '🔀 SSH-туннели (Port Forwarding)',
256
+ tunnelsDesc: 'Проброс удалённых портов (базы данных, dev-серверы, API) на локальный компьютер через зашифрованный канал.',
257
+ tLocalPort: 'Локальный порт',
258
+ tRemotePort: 'Удалённый порт',
259
+ tOpenBtn: '+ Открыть туннель',
260
+ tOpening: 'Открытие…',
261
+ tStopBtn: 'Закрыть',
262
+ tNoTunnels: 'Нет активных туннелей проброса портов.',
263
+ tunnelsColId: 'ID туннеля',
264
+ tunnelsColRoute: 'Маршрут перенаправления',
265
+ tunnelsColActions: 'Действия',
266
+ tOpenOk: 'Туннель запущен: 127.0.0.1:{localPort} -> Remote:{remotePort}',
267
+ tOpenErr: 'Не удалось запустить туннель: {err}'
268
+ }
269
+
270
+ function makeT(dict, fallback) {
271
+ return function t(key, vars) {
272
+ let val = (dict && dict[key]) || (fallback && fallback[key]) || key
273
+ if (vars && typeof val === 'string') {
274
+ for (const k of Object.keys(vars)) {
275
+ val = val.replace(new RegExp('\\{' + k + '\\}', 'g'), String(vars[k]))
276
+ }
277
+ }
278
+ return val
279
+ }
280
+ }
281
+
282
+ function FallbackChevron() {
283
+ return React.createElement(
284
+ 'svg',
285
+ { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', 'aria-hidden': true },
286
+ React.createElement('path', {
287
+ d: 'M3.5 5.25L7 8.75L10.5 5.25',
288
+ stroke: 'currentColor',
289
+ strokeWidth: 1.5,
290
+ strokeLinecap: 'round',
291
+ strokeLinejoin: 'round',
292
+ })
293
+ )
294
+ }
295
+
296
+
297
+ // --- Sub-component: Web Terminal Tab ---
298
+ function TerminalTab(props) {
299
+ const { activeProfile, t } = props
300
+ const [connected, setConnected] = React.useState(false)
301
+ const [sessionId, setSessionId] = React.useState(null)
302
+ const [output, setOutput] = React.useState('')
303
+ const [cmdInput, setCmdInput] = React.useState('')
304
+ const [loading, setLoading] = React.useState(false)
305
+ const termEndRef = React.useRef(null)
306
+ const evtSourceRef = React.useRef(null)
307
+
308
+ React.useEffect(() => {
309
+ if (termEndRef.current) {
310
+ termEndRef.current.scrollIntoView({ behavior: 'smooth' })
311
+ }
312
+ }, [output])
313
+
314
+ React.useEffect(() => {
315
+ return () => {
316
+ if (evtSourceRef.current) {
317
+ evtSourceRef.current.close()
318
+ }
319
+ }
320
+ }, [])
321
+
322
+ const handleConnect = async () => {
323
+ if (!activeProfile) return
324
+ setLoading(true)
325
+ try {
326
+ const res = await fetch('/dsh-remote-workspace/terminal/create', {
327
+ method: 'POST',
328
+ headers: { 'Content-Type': 'application/json' },
329
+ body: JSON.stringify({ profileId: activeProfile.id, cols: 80, rows: 24 })
330
+ })
331
+ const data = await res.json()
332
+ if (data.ok && data.sessionId) {
333
+ setSessionId(data.sessionId)
334
+ setConnected(true)
335
+ setOutput((prev) => prev + `\n[+] ` + t('termConnected', { id: data.sessionId, host: activeProfile.host }) + `\n`)
336
+
337
+ // Connect SSE stream
338
+ const es = new EventSource(`/dsh-remote-workspace/terminal/stream?sessionId=${data.sessionId}`)
339
+ evtSourceRef.current = es
340
+ es.onmessage = (e) => {
341
+ try {
342
+ const parsed = JSON.parse(e.data)
343
+ if (parsed.chunk) {
344
+ setOutput((p) => p + parsed.chunk)
345
+ }
346
+ } catch (_) {}
347
+ }
348
+ es.onerror = () => {
349
+ setOutput((p) => p + `\n[-] ` + t('termDisconnected') + `\n`)
350
+ setConnected(false)
351
+ es.close()
352
+ }
353
+ }
354
+ } catch (err) {
355
+ setOutput((p) => p + `\n[!] Connection error: ${err.message}\n`)
356
+ }
357
+ setLoading(false)
358
+ }
359
+
360
+ const handleDisconnect = async () => {
361
+ if (sessionId) {
362
+ try {
363
+ await fetch('/dsh-remote-workspace/terminal/close', {
364
+ method: 'POST',
365
+ headers: { 'Content-Type': 'application/json' },
366
+ body: JSON.stringify({ sessionId })
367
+ })
368
+ } catch (_) {}
369
+ }
370
+ if (evtSourceRef.current) {
371
+ evtSourceRef.current.close()
372
+ }
373
+ setConnected(false)
374
+ setSessionId(null)
375
+ setOutput((p) => p + `\n[-] ` + t('termDisconnected') + `\n`)
376
+ }
377
+
378
+ const sendCommand = async (e) => {
379
+ if (e) e.preventDefault()
380
+ if (!cmdInput || !sessionId) return
381
+ const toSend = cmdInput + '\n'
382
+ setCmdInput('')
383
+ try {
384
+ await fetch('/dsh-remote-workspace/terminal/input', {
385
+ method: 'POST',
386
+ headers: { 'Content-Type': 'application/json' },
387
+ body: JSON.stringify({ sessionId, data: toSend })
388
+ })
389
+ } catch (_) {}
390
+ }
391
+
392
+ const sendCtrlC = async () => {
393
+ if (!sessionId) return
394
+ try {
395
+ await fetch('/dsh-remote-workspace/terminal/input', {
396
+ method: 'POST',
397
+ headers: { 'Content-Type': 'application/json' },
398
+ body: JSON.stringify({ sessionId, data: '\x03' })
399
+ })
400
+ } catch (_) {}
401
+ }
402
+
403
+ return React.createElement(
404
+ 'div',
405
+ { style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
406
+ React.createElement(
407
+ 'div',
408
+ { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '8px' } },
409
+ React.createElement(
410
+ 'div',
411
+ { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
412
+ React.createElement('span', { style: { fontWeight: 600, fontSize: '14px' } }, 'SSH PTY Shell:'),
413
+ React.createElement(
414
+ 'span',
415
+ { className: `drw-badge ${connected ? 'drw-badge-ok' : 'drw-badge-warn'}` },
416
+ connected ? `🟢 Online (${activeProfile?.host})` : '⚪ Idle'
417
+ )
418
+ ),
419
+ React.createElement(
420
+ 'div',
421
+ { style: { display: 'flex', gap: '8px' } },
422
+ !connected
423
+ ? React.createElement(
424
+ 'button',
425
+ {
426
+ type: 'button',
427
+ className: 'drw-btn drw-btn-primary',
428
+ disabled: !activeProfile || loading,
429
+ onClick: handleConnect
430
+ },
431
+ loading ? 'Connecting...' : t('termStart')
432
+ )
433
+ : React.createElement(
434
+ 'button',
435
+ {
436
+ type: 'button',
437
+ className: 'drw-btn drw-btn-danger',
438
+ onClick: handleDisconnect
439
+ },
440
+ t('termStop')
441
+ ),
442
+ connected
443
+ ? React.createElement(
444
+ 'button',
445
+ {
446
+ type: 'button',
447
+ className: 'drw-btn',
448
+ onClick: sendCtrlC
449
+ },
450
+ 'Ctrl+C'
451
+ )
452
+ : null,
453
+ React.createElement(
454
+ 'button',
455
+ {
456
+ type: 'button',
457
+ className: 'drw-btn',
458
+ onClick: () => setOutput('')
459
+ },
460
+ t('termClear')
461
+ )
462
+ )
463
+ ),
464
+ React.createElement(
465
+ 'div',
466
+ { className: 'drw-term-window' },
467
+ React.createElement(
468
+ 'div',
469
+ { className: 'drw-term-header' },
470
+ React.createElement('span', null, `terminal ~ ${activeProfile?.username || 'user'}@${activeProfile?.host || 'remote'}`),
471
+ React.createElement('span', null, connected ? `Session: ${sessionId}` : 'Offline')
472
+ ),
473
+ React.createElement(
474
+ 'div',
475
+ { className: 'drw-term-body' },
476
+ output || (activeProfile ? `[i] Ready to connect to ${activeProfile.username || 'root'}@${activeProfile.host}. Click 'Connect Terminal'.` : `[!] No active host profile selected. Configure and activate a profile first.`),
477
+ React.createElement('div', { ref: termEndRef })
478
+ ),
479
+ connected
480
+ ? React.createElement(
481
+ 'form',
482
+ { className: 'drw-term-footer', onSubmit: sendCommand },
483
+ React.createElement('span', { style: { color: '#38bdf8', padding: '4px 6px', fontFamily: 'monospace' } }, '$'),
484
+ React.createElement('input', {
485
+ className: 'drw-term-input',
486
+ type: 'text',
487
+ placeholder: t('termPlaceholder'),
488
+ value: cmdInput,
489
+ onChange: (e) => setCmdInput(e.target.value)
490
+ }),
491
+ React.createElement(
492
+ 'button',
493
+ { type: 'submit', className: 'drw-btn', style: { padding: '2px 8px', fontSize: '11px' } },
494
+ 'Send ↵'
495
+ )
496
+ )
497
+ : null
498
+ )
499
+ )
500
+ }
501
+
502
+ // --- Sub-component: Remote File Explorer Tab ---
503
+ function ExplorerTab(props) {
504
+ const { activeProfile, t } = props
505
+ const [currentPath, setCurrentPath] = React.useState(activeProfile?.remoteWorkspace || '/')
506
+ const [entries, setEntries] = React.useState([])
507
+ const [loading, setLoading] = React.useState(false)
508
+ const [previewFile, setPreviewFile] = React.useState(null)
509
+ const [previewContent, setPreviewContent] = React.useState('')
510
+ const [editContent, setEditContent] = React.useState('')
511
+ const [previewLoading, setPreviewLoading] = React.useState(false)
512
+ const [saveStatus, setSaveStatus] = React.useState(null)
513
+
514
+ const loadDir = async (dirPath) => {
515
+ if (!activeProfile) return
516
+ setLoading(true)
517
+ try {
518
+ const res = await fetch('/dsh-remote-workspace/browse', {
519
+ method: 'POST',
520
+ headers: { 'Content-Type': 'application/json' },
521
+ body: JSON.stringify({ profileId: activeProfile.id, remotePath: dirPath })
522
+ })
523
+ const data = await res.json()
524
+ if (data.ok && Array.isArray(data.entries)) {
525
+ setCurrentPath(dirPath)
526
+ setEntries(data.entries)
527
+ }
528
+ } catch (_) {}
529
+ setLoading(false)
530
+ }
531
+
532
+ React.useEffect(() => {
533
+ if (activeProfile) {
534
+ loadDir(activeProfile.remoteWorkspace || '/')
535
+ }
536
+ }, [activeProfile?.id])
537
+
538
+ const handleNavUp = () => {
539
+ const parts = currentPath.split('/').filter(Boolean)
540
+ parts.pop()
541
+ const parent = '/' + parts.join('/')
542
+ loadDir(parent || '/')
543
+ }
544
+
545
+ const openFile = async (entry) => {
546
+ const filePath = currentPath.endsWith('/') ? currentPath + entry.filename : currentPath + '/' + entry.filename
547
+ setPreviewLoading(true)
548
+ setPreviewFile(filePath)
549
+ setSaveStatus(null)
550
+ try {
551
+ const res = await fetch('/dsh-remote-workspace/file/view', {
552
+ method: 'POST',
553
+ headers: { 'Content-Type': 'application/json' },
554
+ body: JSON.stringify({ profileId: activeProfile.id, filePath })
555
+ })
556
+ const data = await res.json()
557
+ if (data.ok) {
558
+ setPreviewContent(data.content)
559
+ setEditContent(data.content)
560
+ } else {
561
+ setPreviewContent(`[Error loading file: ${data.error || 'Failed'}]`)
562
+ setEditContent('')
563
+ }
564
+ } catch (err) {
565
+ setPreviewContent(`[Error: ${err.message}]`)
566
+ }
567
+ setPreviewLoading(false)
568
+ }
569
+
570
+ const handleSaveFile = async () => {
571
+ if (!previewFile || !activeProfile) return
572
+ setSaveStatus('saving')
573
+ try {
574
+ const res = await fetch('/dsh-remote-workspace/file/save', {
575
+ method: 'POST',
576
+ headers: { 'Content-Type': 'application/json' },
577
+ body: JSON.stringify({ profileId: activeProfile.id, filePath: previewFile, content: editContent })
578
+ })
579
+ const data = await res.json()
580
+ if (data.ok) {
581
+ setSaveStatus('saved')
582
+ setPreviewContent(editContent)
583
+ } else {
584
+ setSaveStatus('error')
585
+ }
586
+ } catch (_) {
587
+ setSaveStatus('error')
588
+ }
589
+ }
590
+
591
+ return React.createElement(
592
+ 'div',
593
+ { className: 'drw-explorer-box' },
594
+ React.createElement(
595
+ 'div',
596
+ { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
597
+ React.createElement('div', { style: { fontWeight: 600, fontSize: '14px' } }, t('explorerTitle')),
598
+ React.createElement(
599
+ 'button',
600
+ {
601
+ type: 'button',
602
+ className: 'drw-btn',
603
+ onClick: () => loadDir(currentPath),
604
+ disabled: loading
605
+ },
606
+ loading ? 'Refreshing...' : '🔄 Refresh'
607
+ )
608
+ ),
609
+ React.createElement(
610
+ 'div',
611
+ { className: 'drw-explorer-nav' },
612
+ React.createElement(
613
+ 'button',
614
+ {
615
+ type: 'button',
616
+ className: 'drw-btn',
617
+ style: { padding: '2px 8px', fontSize: '11px' },
618
+ onClick: handleNavUp,
619
+ disabled: currentPath === '/' || loading
620
+ },
621
+ '⬆️ Up'
622
+ ),
623
+ React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, 'Path:'),
624
+ React.createElement('span', { style: { fontWeight: 600, color: 'var(--dsw-alias-state-brand-primary)' } }, currentPath)
625
+ ),
626
+ React.createElement(
627
+ 'div',
628
+ { className: 'drw-file-list' },
629
+ entries.length === 0
630
+ ? React.createElement('div', { style: { padding: '16px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary)' } }, loading ? 'Reading directory...' : 'Directory is empty.')
631
+ : entries.map((e) =>
632
+ React.createElement(
633
+ 'div',
634
+ {
635
+ key: e.filename,
636
+ className: 'drw-file-row',
637
+ onClick: () => (e.isDirectory ? loadDir(currentPath.endsWith('/') ? currentPath + e.filename : currentPath + '/' + e.filename) : openFile(e))
638
+ },
639
+ React.createElement(
640
+ 'div',
641
+ { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
642
+ React.createElement('span', null, e.isDirectory ? '📁' : '📄'),
643
+ React.createElement('span', { style: { fontWeight: e.isDirectory ? 600 : 400 } }, e.filename)
644
+ ),
645
+ React.createElement(
646
+ 'div',
647
+ { className: 'drw-file-meta' },
648
+ e.size !== undefined ? React.createElement('span', null, `${Math.round(e.size / 1024)} KB`) : null,
649
+ e.permissions ? React.createElement('span', { style: { opacity: 0.6 } }, e.permissions) : null
650
+ )
651
+ )
652
+ )
653
+ ),
654
+ // File Preview / Edit Modal
655
+ previewFile
656
+ ? React.createElement(
657
+ 'div',
658
+ { className: 'drw-modal-overlay', onClick: () => setPreviewFile(null) },
659
+ React.createElement(
660
+ 'div',
661
+ { className: 'drw-modal-dialog', onClick: (e) => e.stopPropagation() },
662
+ React.createElement(
663
+ 'div',
664
+ { className: 'drw-modal-hdr' },
665
+ React.createElement('span', { style: { fontFamily: 'monospace' } }, t('filePreviewTitle', { path: previewFile })),
666
+ React.createElement(
667
+ 'button',
668
+ {
669
+ type: 'button',
670
+ className: 'drw-btn',
671
+ style: { padding: '2px 8px' },
672
+ onClick: () => setPreviewFile(null)
673
+ },
674
+ '✕'
675
+ )
676
+ ),
677
+ React.createElement(
678
+ 'div',
679
+ { className: 'drw-modal-body', style: { display: 'flex', flexDirection: 'column', gap: '10px' } },
680
+ previewLoading
681
+ ? React.createElement('div', { style: { padding: '20px', textAlign: 'center' } }, 'Loading content...')
682
+ : React.createElement('textarea', {
683
+ style: {
684
+ width: '100%',
685
+ height: '320px',
686
+ background: '#0d1117',
687
+ color: '#c9d1d9',
688
+ fontFamily: 'monospace',
689
+ fontSize: '12px',
690
+ padding: '10px',
691
+ border: '1px solid #30363d',
692
+ borderRadius: '8px',
693
+ resize: 'vertical',
694
+ boxSizing: 'border-box'
695
+ },
696
+ value: editContent,
697
+ onChange: (e) => setEditContent(e.target.value)
698
+ }),
699
+ React.createElement(
700
+ 'div',
701
+ { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
702
+ React.createElement(
703
+ 'span',
704
+ { style: { fontSize: '12px', color: saveStatus === 'saved' ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-secondary)' } },
705
+ saveStatus === 'saved' ? t('fileSaved') : saveStatus === 'error' ? 'Error saving file.' : ''
706
+ ),
707
+ React.createElement(
708
+ 'div',
709
+ { style: { display: 'flex', gap: '8px' } },
710
+ React.createElement(
711
+ 'button',
712
+ {
713
+ type: 'button',
714
+ className: 'drw-btn',
715
+ onClick: () => setPreviewFile(null)
716
+ },
717
+ 'Close'
718
+ ),
719
+ React.createElement(
720
+ 'button',
721
+ {
722
+ type: 'button',
723
+ className: 'drw-btn drw-btn-primary',
724
+ onClick: handleSaveFile,
725
+ disabled: saveStatus === 'saving'
726
+ },
727
+ saveStatus === 'saving' ? 'Saving...' : t('btnSaveFile')
728
+ )
729
+ )
730
+ )
731
+ )
732
+ )
733
+ )
734
+ : null
735
+ )
736
+ }
737
+
738
+ function SettingsView(props) {
739
+ const [activeTab, setActiveTab] = React.useState('profiles')
740
+
741
+ const t = props.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
742
+ const [profiles, setProfiles] = React.useState([])
743
+ const [activeId, setActiveId] = React.useState(null)
744
+ const [tunnels, setTunnels] = React.useState([])
745
+ const [editing, setEditing] = React.useState(null)
746
+ const [busy, setBusy] = React.useState(null)
747
+ const [testResult, setTestResult] = React.useState(null)
748
+ const [syncMsg, setSyncMsg] = React.useState(null)
749
+ const [tunnelMsg, setTunnelMsg] = React.useState(null)
750
+ const [showPassword, setShowPassword] = React.useState(false)
751
+
752
+ // Tunnel creation inputs
753
+ const [newTunnelLocal, setNewTunnelLocal] = React.useState('3000')
754
+ const [newTunnelRemote, setNewTunnelRemote] = React.useState('3000')
755
+
756
+ // Remote Directory Browser State
757
+ const [browserOpen, setBrowserOpen] = React.useState(false)
758
+ const [browserPath, setBrowserPath] = React.useState('/')
759
+ const [browserEntries, setBrowserEntries] = React.useState([])
760
+ const [browserLoading, setBrowserLoading] = React.useState(false)
761
+
762
+ const loadState = async () => {
763
+ try {
764
+ const res = await fetch('/dsh-remote-workspace/state')
765
+ if (res.ok) {
766
+ const data = await res.json()
767
+ if (data.ok) {
768
+ setProfiles(data.profiles || [])
769
+ setActiveId(data.activeId || null)
770
+ setTunnels(data.tunnels || [])
771
+ }
772
+ }
773
+ } catch (_) {}
774
+ }
775
+
776
+ React.useEffect(() => {
777
+ ensureCss()
778
+ loadState()
779
+ }, [])
780
+
781
+ const handleSave = async (profile) => {
782
+ setBusy('saving')
783
+ try {
784
+ const res = await fetch('/dsh-remote-workspace/profiles/save', {
785
+ method: 'POST',
786
+ headers: { 'Content-Type': 'application/json' },
787
+ body: JSON.stringify(profile)
788
+ })
789
+ if (res.ok) {
790
+ setEditing(null)
791
+ setBrowserOpen(false)
792
+ setTestResult(null)
793
+ await loadState()
794
+ }
795
+ } catch (_) {}
796
+ setBusy(null)
797
+ }
798
+
799
+ const handleDelete = async (id, name) => {
800
+ if (!confirm(t('delConfirm', { name: name || id }))) return
801
+ try {
802
+ const res = await fetch('/dsh-remote-workspace/profiles/delete', {
803
+ method: 'POST',
804
+ headers: { 'Content-Type': 'application/json' },
805
+ body: JSON.stringify({ id })
806
+ })
807
+ if (res.ok) {
808
+ if (editing && editing.id === id) setEditing(null)
809
+ await loadState()
810
+ }
811
+ } catch (_) {}
812
+ }
813
+
814
+ const handleSetActive = async (id) => {
815
+ try {
816
+ const res = await fetch('/dsh-remote-workspace/profiles/active', {
817
+ method: 'POST',
818
+ headers: { 'Content-Type': 'application/json' },
819
+ body: JSON.stringify({ id })
820
+ })
821
+ if (res.ok) {
822
+ await loadState()
823
+ }
824
+ } catch (_) {}
825
+ }
826
+
827
+ const handleTest = async (prof) => {
828
+ setBusy('testing')
829
+ setTestResult(null)
830
+ try {
831
+ const res = await fetch('/dsh-remote-workspace/test', {
832
+ method: 'POST',
833
+ headers: { 'Content-Type': 'application/json' },
834
+ body: JSON.stringify({ profile: prof })
835
+ })
836
+ const data = await res.json()
837
+ setTestResult(data)
838
+ } catch (err) {
839
+ setTestResult({ ok: false, error: err.message })
840
+ }
841
+ setBusy(null)
842
+ }
843
+
844
+ const openDirectoryBrowser = async (initialPath) => {
845
+ setBrowserOpen(true)
846
+ const target = initialPath && initialPath.startsWith('/') ? initialPath : '/'
847
+ await fetchRemoteDir(target)
848
+ }
849
+
850
+ const fetchRemoteDir = async (dirPath) => {
851
+ setBrowserLoading(true)
852
+ try {
853
+ const res = await fetch('/dsh-remote-workspace/browse', {
854
+ method: 'POST',
855
+ headers: { 'Content-Type': 'application/json' },
856
+ body: JSON.stringify({ profile: editing, remotePath: dirPath })
857
+ })
858
+ const data = await res.json()
859
+ if (data.ok) {
860
+ setBrowserPath(data.currentPath || dirPath)
861
+ setBrowserEntries(data.entries || [])
862
+ }
863
+ } catch (_) {}
864
+ setBrowserLoading(false)
865
+ }
866
+
867
+ const handleSync = async (direction) => {
868
+ setBusy(`sync_${direction}`)
869
+ setSyncMsg(null)
870
+ try {
871
+ const res = await fetch('/dsh-remote-workspace/sync', {
872
+ method: 'POST',
873
+ headers: { 'Content-Type': 'application/json' },
874
+ body: JSON.stringify({ direction })
875
+ })
876
+ const data = await res.json()
877
+ if (data.ok) {
878
+ const count = (direction === 'push' ? data.pushed?.length : data.pulled?.length) || 0
879
+ if (data.conflicts && data.conflicts.length > 0) {
880
+ setSyncMsg({ ok: false, text: t('syncConflict', { count: data.conflicts.length }) })
881
+ } else {
882
+ setSyncMsg({ ok: true, text: t('syncOk', { count }) })
883
+ }
884
+ } else {
885
+ setSyncMsg({ ok: false, text: t('syncErr', { err: data.error || 'Unknown error' }) })
886
+ }
887
+ } catch (err) {
888
+ setSyncMsg({ ok: false, text: t('syncErr', { err: err.message }) })
889
+ }
890
+ setBusy(null)
891
+ }
892
+
893
+ const handleStartTunnel = async () => {
894
+ if (!activeId) return
895
+ setBusy('tunnel_open')
896
+ setTunnelMsg(null)
897
+ try {
898
+ const res = await fetch('/dsh-remote-workspace/tunnels/start', {
899
+ method: 'POST',
900
+ headers: { 'Content-Type': 'application/json' },
901
+ body: JSON.stringify({
902
+ profileId: activeId,
903
+ localPort: newTunnelLocal,
904
+ remotePort: newTunnelRemote
905
+ })
906
+ })
907
+ const data = await res.json()
908
+ if (data.ok) {
909
+ setTunnelMsg({ ok: true, text: t('tOpenOk', { localPort: newTunnelLocal, remotePort: newTunnelRemote }) })
910
+ await loadState()
911
+ } else {
912
+ setTunnelMsg({ ok: false, text: t('tOpenErr', { err: data.error || 'Failed' }) })
913
+ }
914
+ } catch (err) {
915
+ setTunnelMsg({ ok: false, text: t('tOpenErr', { err: err.message }) })
916
+ }
917
+ setBusy(null)
918
+ }
919
+
920
+ const handleStopTunnel = async (tunnelId) => {
921
+ try {
922
+ const res = await fetch('/dsh-remote-workspace/tunnels/stop', {
923
+ method: 'POST',
924
+ headers: { 'Content-Type': 'application/json' },
925
+ body: JSON.stringify({ tunnelId })
926
+ })
927
+ if (res.ok) {
928
+ await loadState()
929
+ }
930
+ } catch (_) {}
931
+ }
932
+
933
+ const activeProfile = profiles.find((p) => p.id === activeId)
934
+
935
+ return React.createElement(
936
+ 'div',
937
+ { className: 'drw-page' },
938
+
939
+ // Header with Live Badges (ClineBot Style)
940
+ React.createElement(
941
+ 'div',
942
+ { className: 'drw-header' },
943
+ React.createElement(
944
+ 'div',
945
+ { className: 'drw-header-top' },
946
+ React.createElement('div', { className: 'drw-page-title' }, '🌐 ' + t('title')),
947
+ React.createElement(
948
+ 'div',
949
+ { className: 'drw-header-badges' },
950
+ activeProfile
951
+ ? React.createElement('span', { className: 'drw-badge drw-badge-ok' }, t('badgeOnline', { name: activeProfile.name || activeProfile.host, latency: testResult?.latencyMs ?? 15 }))
952
+ : React.createElement('span', { className: 'drw-badge drw-badge-warn' }, t('badgeOffline')),
953
+ activeProfile
954
+ ? React.createElement('span', { className: 'drw-badge' }, activeProfile.authType === 'password' ? t('badgePassword') : t('badgeKey'))
955
+ : null,
956
+ React.createElement('span', { className: `drw-badge ${tunnels.length > 0 ? 'drw-badge-ok' : ''}` }, t('badgeTunnels', { count: tunnels.length }))
957
+ )
958
+ ),
959
+ React.createElement('div', { className: 'drw-page-sub' }, t('subtitle'))
960
+ ),
961
+
962
+ // Section 1: SSH Profiles Table & Management
963
+ React.createElement(
964
+ 'div',
965
+ { className: 'drw-card' },
966
+ React.createElement(
967
+ 'div',
968
+ { className: 'drw-card-title' },
969
+ React.createElement('span', null, t('profilesTitle')),
970
+ !editing
971
+ ? React.createElement(
972
+ 'button',
973
+ {
974
+ type: 'button',
975
+ className: 'drw-btn drw-btn-primary',
976
+ onClick: () => {
977
+ setEditing({
978
+ id: 'prof_' + Math.random().toString(36).substr(2, 9),
979
+ name: 'New Server',
980
+ host: '',
981
+ port: 22,
982
+ username: 'root',
983
+ authType: 'key',
984
+ privateKeyPath: '~/.ssh/id_rsa',
985
+ passphrase: '',
986
+ password: '',
987
+ remoteWorkspace: '',
988
+ localMirrorPath: ''
989
+ })
990
+ setTestResult(null)
991
+ }
992
+ },
993
+ t('addBtn')
994
+ )
995
+ : null
996
+ ),
997
+ React.createElement('div', { className: 'drw-card-desc' }, t('profilesDesc')),
998
+
999
+ // Interactive Editing Form
1000
+ editing
1001
+ ? React.createElement(
1002
+ 'div',
1003
+ {
1004
+ style: {
1005
+ padding: '16px',
1006
+ borderRadius: '10px',
1007
+ background: 'var(--dsw-alias-bg-layer-2)',
1008
+ border: '1px solid var(--dsw-alias-border-l2)',
1009
+ display: 'flex',
1010
+ flexDirection: 'column',
1011
+ gap: '14px'
1012
+ }
1013
+ },
1014
+ React.createElement(
1015
+ 'div',
1016
+ { style: { fontWeight: 600, fontSize: '14px', color: 'var(--dsw-alias-label-primary)' } },
1017
+ editing.name ? t('formTitleEdit') : t('formTitleNew')
1018
+ ),
1019
+ React.createElement(
1020
+ 'div',
1021
+ { className: 'drw-grid-2' },
1022
+ React.createElement(
1023
+ 'div',
1024
+ { className: 'drw-field' },
1025
+ React.createElement('span', { className: 'drw-label' }, t('fName')),
1026
+ React.createElement('input', {
1027
+ className: 'drw-input',
1028
+ value: editing.name || '',
1029
+ onChange: (e) => setEditing({ ...editing, name: e.target.value })
1030
+ })
1031
+ ),
1032
+ React.createElement(
1033
+ 'div',
1034
+ { className: 'drw-field' },
1035
+ React.createElement('span', { className: 'drw-label' }, t('fHost')),
1036
+ React.createElement('input', {
1037
+ className: 'drw-input',
1038
+ placeholder: '192.168.1.100 or server.domain.com',
1039
+ value: editing.host || '',
1040
+ onChange: (e) => setEditing({ ...editing, host: e.target.value })
1041
+ })
1042
+ ),
1043
+ React.createElement(
1044
+ 'div',
1045
+ { className: 'drw-field' },
1046
+ React.createElement('span', { className: 'drw-label' }, t('fPort')),
1047
+ React.createElement('input', {
1048
+ className: 'drw-input',
1049
+ type: 'number',
1050
+ value: editing.port || 22,
1051
+ onChange: (e) => setEditing({ ...editing, port: parseInt(e.target.value, 10) || 22 })
1052
+ })
1053
+ ),
1054
+ React.createElement(
1055
+ 'div',
1056
+ { className: 'drw-field' },
1057
+ React.createElement('span', { className: 'drw-label' }, t('fUser')),
1058
+ React.createElement('input', {
1059
+ className: 'drw-input',
1060
+ value: editing.username || '',
1061
+ onChange: (e) => setEditing({ ...editing, username: e.target.value })
1062
+ })
1063
+ )
1064
+ ),
1065
+
1066
+ // Auth Method Segmented Switcher (Key vs Password)
1067
+ React.createElement(
1068
+ 'div',
1069
+ { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
1070
+ React.createElement('span', { className: 'drw-label' }, t('fAuthType')),
1071
+ React.createElement(
1072
+ 'div',
1073
+ { className: 'drw-segmented' },
1074
+ React.createElement(
1075
+ 'button',
1076
+ {
1077
+ type: 'button',
1078
+ className: `drw-segmented-item ${editing.authType !== 'password' ? 'drw-segmented-item-active' : ''}`,
1079
+ onClick: () => setEditing({ ...editing, authType: 'key' })
1080
+ },
1081
+ '🔑 ' + t('fAuthKey')
1082
+ ),
1083
+ React.createElement(
1084
+ 'button',
1085
+ {
1086
+ type: 'button',
1087
+ className: `drw-segmented-item ${editing.authType === 'password' ? 'drw-segmented-item-active' : ''}`,
1088
+ onClick: () => setEditing({ ...editing, authType: 'password' })
1089
+ },
1090
+ '🔒 ' + t('fAuthPass')
1091
+ )
1092
+ )
1093
+ ),
1094
+
1095
+ // Conditional Auth Inputs
1096
+ editing.authType === 'password'
1097
+ ? React.createElement(
1098
+ 'div',
1099
+ { className: 'drw-field' },
1100
+ React.createElement('span', { className: 'drw-label' }, t('fPassword')),
1101
+ React.createElement(
1102
+ 'div',
1103
+ { style: { display: 'flex', gap: '8px' } },
1104
+ React.createElement('input', {
1105
+ className: 'drw-input',
1106
+ type: showPassword ? 'text' : 'password',
1107
+ placeholder: '••••••••••••',
1108
+ value: editing.password || '',
1109
+ onChange: (e) => setEditing({ ...editing, password: e.target.value })
1110
+ }),
1111
+ React.createElement(
1112
+ 'button',
1113
+ {
1114
+ type: 'button',
1115
+ className: 'drw-btn',
1116
+ style: { fontSize: '11px', whiteSpace: 'nowrap' },
1117
+ onClick: () => setShowPassword((v) => !v)
1118
+ },
1119
+ showPassword ? 'Hide' : 'Show'
1120
+ )
1121
+ )
1122
+ )
1123
+ : React.createElement(
1124
+ 'div',
1125
+ { className: 'drw-grid-2' },
1126
+ React.createElement(
1127
+ 'div',
1128
+ { className: 'drw-field' },
1129
+ React.createElement('span', { className: 'drw-label' }, t('fKeyPath')),
1130
+ React.createElement('input', {
1131
+ className: 'drw-input',
1132
+ placeholder: '~/.ssh/id_rsa or /home/user/.ssh/id_ed25519',
1133
+ value: editing.privateKeyPath || '',
1134
+ onChange: (e) => setEditing({ ...editing, privateKeyPath: e.target.value })
1135
+ }),
1136
+ React.createElement('span', { className: 'drw-hint' }, t('fKeyPathHint'))
1137
+ ),
1138
+ React.createElement(
1139
+ 'div',
1140
+ { className: 'drw-field' },
1141
+ React.createElement('span', { className: 'drw-label' }, t('fPassphrase')),
1142
+ React.createElement('input', {
1143
+ className: 'drw-input',
1144
+ type: 'password',
1145
+ placeholder: 'Optional passphrase',
1146
+ value: editing.passphrase || '',
1147
+ onChange: (e) => setEditing({ ...editing, passphrase: e.target.value })
1148
+ })
1149
+ )
1150
+ ),
1151
+
1152
+ // Workspace Paths (Remote Workspace & Local Mirror)
1153
+ React.createElement(
1154
+ 'div',
1155
+ { className: 'drw-grid-2' },
1156
+ React.createElement(
1157
+ 'div',
1158
+ { className: 'drw-field' },
1159
+ React.createElement('span', { className: 'drw-label' }, t('fRemotePath')),
1160
+ React.createElement(
1161
+ 'div',
1162
+ { style: { display: 'flex', gap: '8px' } },
1163
+ React.createElement('input', {
1164
+ className: 'drw-input',
1165
+ placeholder: '/home/user/project',
1166
+ value: editing.remoteWorkspace || '',
1167
+ onChange: (e) => setEditing({ ...editing, remoteWorkspace: e.target.value })
1168
+ }),
1169
+ React.createElement(
1170
+ 'button',
1171
+ {
1172
+ type: 'button',
1173
+ className: 'drw-btn',
1174
+ style: { whiteSpace: 'nowrap', fontSize: '12px' },
1175
+ disabled: !editing.host,
1176
+ onClick: () => openDirectoryBrowser(editing.remoteWorkspace || '/')
1177
+ },
1178
+ t('btnBrowse')
1179
+ )
1180
+ ),
1181
+ React.createElement('span', { className: 'drw-hint' }, t('fRemotePathHint'))
1182
+ ),
1183
+ React.createElement(
1184
+ 'div',
1185
+ { className: 'drw-field' },
1186
+ React.createElement('span', { className: 'drw-label' }, t('fLocalMirror')),
1187
+ React.createElement('input', {
1188
+ className: 'drw-input',
1189
+ placeholder: '~/.dsh/mirrors/my-project',
1190
+ value: editing.localMirrorPath || '',
1191
+ onChange: (e) => setEditing({ ...editing, localMirrorPath: e.target.value })
1192
+ }),
1193
+ React.createElement('span', { className: 'drw-hint' }, t('fLocalMirrorHint'))
1194
+ )
1195
+ ),
1196
+
1197
+ // Directory Browser Modal
1198
+ browserOpen
1199
+ ? React.createElement(
1200
+ 'div',
1201
+ { className: 'drw-browser-modal' },
1202
+ React.createElement(
1203
+ 'div',
1204
+ { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
1205
+ React.createElement('span', { style: { fontSize: '12px', fontWeight: 600, color: 'var(--dsw-alias-label-primary)' } }, `📂 ${browserPath}`),
1206
+ React.createElement(
1207
+ 'div',
1208
+ { style: { display: 'flex', gap: '6px' } },
1209
+ React.createElement(
1210
+ 'button',
1211
+ {
1212
+ type: 'button',
1213
+ className: 'drw-btn drw-btn-primary',
1214
+ style: { fontSize: '11px', padding: '3px 8px' },
1215
+ onClick: () => {
1216
+ setEditing({ ...editing, remoteWorkspace: browserPath })
1217
+ setBrowserOpen(false)
1218
+ }
1219
+ },
1220
+ t('btnSelectThis')
1221
+ ),
1222
+ React.createElement(
1223
+ 'button',
1224
+ {
1225
+ type: 'button',
1226
+ className: 'drw-btn',
1227
+ style: { fontSize: '11px', padding: '3px 8px' },
1228
+ onClick: () => setBrowserOpen(false)
1229
+ },
1230
+ '✕'
1231
+ )
1232
+ )
1233
+ ),
1234
+ React.createElement(
1235
+ 'div',
1236
+ { className: 'drw-browser-list' },
1237
+ browserLoading
1238
+ ? React.createElement('div', { style: { padding: '8px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, 'Loading directory entries...')
1239
+ : React.createElement(
1240
+ React.Fragment,
1241
+ null,
1242
+ browserPath !== '/'
1243
+ ? React.createElement(
1244
+ 'div',
1245
+ {
1246
+ className: 'drw-browser-item',
1247
+ onClick: () => {
1248
+ const parent = browserPath.substring(0, browserPath.lastIndexOf('/')) || '/'
1249
+ fetchRemoteDir(parent)
1250
+ }
1251
+ },
1252
+ '📁 .. (parent directory)'
1253
+ )
1254
+ : null,
1255
+ browserEntries
1256
+ .filter((e) => e.isDirectory)
1257
+ .map((e) =>
1258
+ React.createElement(
1259
+ 'div',
1260
+ {
1261
+ key: e.filename,
1262
+ className: 'drw-browser-item',
1263
+ onClick: () => {
1264
+ const next = browserPath === '/' ? `/${e.filename}` : `${browserPath}/${e.filename}`
1265
+ fetchRemoteDir(next)
1266
+ }
1267
+ },
1268
+ `📁 ${e.filename}`
1269
+ )
1270
+ )
1271
+ )
1272
+ )
1273
+ )
1274
+ : null,
1275
+
1276
+ // Form Action Buttons
1277
+ React.createElement(
1278
+ 'div',
1279
+ { className: 'drw-row', style: { justifyContent: 'flex-end', marginTop: '6px' } },
1280
+ React.createElement(
1281
+ 'button',
1282
+ {
1283
+ type: 'button',
1284
+ className: 'drw-btn',
1285
+ disabled: !editing.host || !!busy,
1286
+ onClick: () => handleTest(editing)
1287
+ },
1288
+ busy === 'testing' ? t('testing') : t('btnTest')
1289
+ ),
1290
+ React.createElement(
1291
+ 'button',
1292
+ {
1293
+ type: 'button',
1294
+ className: 'drw-btn',
1295
+ onClick: () => {
1296
+ setEditing(null)
1297
+ setBrowserOpen(false)
1298
+ setTestResult(null)
1299
+ }
1300
+ },
1301
+ t('btnCancel')
1302
+ ),
1303
+ React.createElement(
1304
+ 'button',
1305
+ {
1306
+ type: 'button',
1307
+ className: 'drw-btn drw-btn-primary',
1308
+ disabled: !editing.host || !!busy,
1309
+ onClick: () => handleSave(editing)
1310
+ },
1311
+ busy === 'saving' ? t('saving') : t('btnSave')
1312
+ )
1313
+ ),
1314
+ testResult
1315
+ ? React.createElement(
1316
+ 'div',
1317
+ {
1318
+ className: 'drw-preview',
1319
+ style: {
1320
+ borderColor: testResult.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)'
1321
+ }
1322
+ },
1323
+ testResult.ok
1324
+ ? t('testOk', { latency: testResult.latencyMs ?? testResult.latency ?? 0, os: testResult.remoteOs || testResult.os || 'Linux' })
1325
+ : t('testFail', { err: testResult.error || 'Connection timed out' })
1326
+ )
1327
+ : null
1328
+ )
1329
+ : null,
1330
+
1331
+ // Profiles List Table
1332
+ profiles.length > 0
1333
+ ? React.createElement(
1334
+ 'table',
1335
+ { className: 'drw-table' },
1336
+ React.createElement(
1337
+ 'thead',
1338
+ null,
1339
+ React.createElement(
1340
+ 'tr',
1341
+ null,
1342
+ React.createElement('th', null, t('nameCol')),
1343
+ React.createElement('th', null, t('hostCol')),
1344
+ React.createElement('th', null, t('portCol')),
1345
+ React.createElement('th', null, t('pathCol')),
1346
+ React.createElement('th', { style: { textAlign: 'right' } }, t('actionsCol'))
1347
+ )
1348
+ ),
1349
+ React.createElement(
1350
+ 'tbody',
1351
+ null,
1352
+ profiles.map((p) => {
1353
+ const isAct = p.id === activeId
1354
+ return React.createElement(
1355
+ 'tr',
1356
+ { key: p.id },
1357
+ React.createElement(
1358
+ 'td',
1359
+ null,
1360
+ React.createElement('span', { style: { fontWeight: 600 } }, p.name || 'Server'),
1361
+ React.createElement(
1362
+ 'span',
1363
+ { className: 'drw-badge', style: { marginLeft: '8px' } },
1364
+ p.authType === 'password' ? '🔒 pwd' : '🔑 key'
1365
+ ),
1366
+ isAct
1367
+ ? React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginLeft: '6px' } }, t('activeBadge'))
1368
+ : null
1369
+ ),
1370
+ React.createElement('td', { style: { fontFamily: 'monospace' } }, `${p.username || 'root'}@${p.host}`),
1371
+ React.createElement('td', { style: { fontFamily: 'monospace' } }, p.port || 22),
1372
+ React.createElement('td', { style: { fontFamily: 'monospace', fontSize: '12px' } }, p.remoteWorkspace || '—'),
1373
+ React.createElement(
1374
+ 'td',
1375
+ { style: { textAlign: 'right' } },
1376
+ React.createElement(
1377
+ 'div',
1378
+ { style: { display: 'inline-flex', gap: '6px' } },
1379
+ !isAct
1380
+ ? React.createElement(
1381
+ 'button',
1382
+ {
1383
+ type: 'button',
1384
+ className: 'drw-btn',
1385
+ style: { fontSize: '11px', padding: '3px 8px' },
1386
+ onClick: () => handleSetActive(p.id)
1387
+ },
1388
+ t('pinBtn')
1389
+ )
1390
+ : null,
1391
+ React.createElement(
1392
+ 'button',
1393
+ {
1394
+ type: 'button',
1395
+ className: 'drw-btn',
1396
+ style: { fontSize: '11px', padding: '3px 8px' },
1397
+ onClick: () => {
1398
+ setEditing({ ...p })
1399
+ setTestResult(null)
1400
+ }
1401
+ },
1402
+ t('editBtn')
1403
+ ),
1404
+ React.createElement(
1405
+ 'button',
1406
+ {
1407
+ type: 'button',
1408
+ className: 'drw-btn drw-btn-danger',
1409
+ style: { fontSize: '11px', padding: '3px 8px' },
1410
+ onClick: () => handleDelete(p.id, p.name)
1411
+ },
1412
+ t('delBtn')
1413
+ )
1414
+ )
1415
+ )
1416
+ )
1417
+ })
1418
+ )
1419
+ )
1420
+ : !editing
1421
+ ? React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('noHosts'))
1422
+ : null
1423
+ ),
1424
+
1425
+ // Section 2: Active Connection Diagnostics (ClineBot Card 4 style)
1426
+ activeProfile
1427
+ ? React.createElement(
1428
+ 'div',
1429
+ { className: 'drw-card' },
1430
+ React.createElement(
1431
+ 'div',
1432
+ { className: 'drw-card-title' },
1433
+ React.createElement('span', null, t('diagTitle')),
1434
+ React.createElement(
1435
+ 'button',
1436
+ {
1437
+ type: 'button',
1438
+ className: 'drw-btn',
1439
+ style: { fontSize: '11px', padding: '3px 9px' },
1440
+ disabled: busy === 'testing',
1441
+ onClick: () => handleTest(activeProfile)
1442
+ },
1443
+ busy === 'testing' ? t('testing') : t('diagProbeBtn')
1444
+ )
1445
+ ),
1446
+ React.createElement('div', { className: 'drw-card-desc' }, t('diagDesc')),
1447
+ React.createElement(
1448
+ 'div',
1449
+ { className: 'drw-grid-4' },
1450
+ React.createElement(
1451
+ 'div',
1452
+ { className: 'drw-stat-box' },
1453
+ React.createElement('div', { className: 'drw-stat-val' }, activeProfile.name || activeProfile.host),
1454
+ React.createElement('div', { className: 'drw-stat-lbl' }, `SSH: ${activeProfile.username}@${activeProfile.host}:${activeProfile.port || 22}`)
1455
+ ),
1456
+ React.createElement(
1457
+ 'div',
1458
+ { className: 'drw-stat-box' },
1459
+ React.createElement('div', { className: 'drw-stat-val' }, activeProfile.remoteWorkspace || '—'),
1460
+ React.createElement('div', { className: 'drw-stat-lbl' }, 'Remote Workspace')
1461
+ ),
1462
+ React.createElement(
1463
+ 'div',
1464
+ { className: 'drw-stat-box' },
1465
+ React.createElement('div', { className: 'drw-stat-val' }, activeProfile.localMirrorPath || '—'),
1466
+ React.createElement('div', { className: 'drw-stat-lbl' }, 'Local Mirror Path')
1467
+ ),
1468
+ React.createElement(
1469
+ 'div',
1470
+ { className: 'drw-stat-box' },
1471
+ React.createElement('div', { className: 'drw-stat-val', style: { color: 'var(--dsw-alias-state-success-primary)' } }, 'Ready ✓'),
1472
+ React.createElement('div', { className: 'drw-stat-lbl' }, activeProfile.authType === 'password' ? 'Password Auth' : 'SSH Key Auth')
1473
+ )
1474
+ )
1475
+ )
1476
+ : null,
1477
+
1478
+ // Section 3: Mirror Sync (ClineBot Action Card style)
1479
+ activeProfile
1480
+ ? React.createElement(
1481
+ 'div',
1482
+ { className: 'drw-card' },
1483
+ React.createElement('div', { className: 'drw-card-title' }, t('syncTitle')),
1484
+ React.createElement('div', { className: 'drw-card-desc' }, t('syncDesc')),
1485
+ React.createElement(
1486
+ 'div',
1487
+ { className: 'drw-row' },
1488
+ React.createElement(
1489
+ 'button',
1490
+ {
1491
+ type: 'button',
1492
+ className: 'drw-btn',
1493
+ disabled: !!busy || !activeProfile.remoteWorkspace || !activeProfile.localMirrorPath,
1494
+ onClick: () => handleSync('pull')
1495
+ },
1496
+ busy === 'sync_pull' ? t('pulling') : t('pullBtn')
1497
+ ),
1498
+ React.createElement(
1499
+ 'button',
1500
+ {
1501
+ type: 'button',
1502
+ className: 'drw-btn',
1503
+ disabled: !!busy || !activeProfile.remoteWorkspace || !activeProfile.localMirrorPath,
1504
+ onClick: () => handleSync('push')
1505
+ },
1506
+ busy === 'sync_push' ? t('pushing') : t('pushBtn')
1507
+ )
1508
+ ),
1509
+ syncMsg
1510
+ ? React.createElement(
1511
+ 'div',
1512
+ {
1513
+ className: 'drw-preview',
1514
+ style: {
1515
+ borderColor: syncMsg.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)'
1516
+ }
1517
+ },
1518
+ syncMsg.text
1519
+ )
1520
+ : null
1521
+ )
1522
+ : null,
1523
+
1524
+ // Section 4: SSH Port Forwarding (Tunnels Manager)
1525
+ React.createElement(
1526
+ 'div',
1527
+ { className: 'drw-card' },
1528
+ React.createElement('div', { className: 'drw-card-title' }, t('tunnelsTitle')),
1529
+ React.createElement('div', { className: 'drw-card-desc' }, t('tunnelsDesc')),
1530
+
1531
+ // Start tunnel inline row
1532
+ activeProfile
1533
+ ? React.createElement(
1534
+ 'div',
1535
+ { className: 'drw-row', style: { alignItems: 'flex-end', background: 'var(--dsw-alias-bg-layer-2)', padding: '10px 12px', borderRadius: '8px' } },
1536
+ React.createElement(
1537
+ 'div',
1538
+ { style: { display: 'flex', flexDirection: 'column', gap: '3px' } },
1539
+ React.createElement('span', { className: 'drw-label' }, t('tLocalPort')),
1540
+ React.createElement('input', {
1541
+ className: 'drw-input',
1542
+ style: { width: '120px' },
1543
+ type: 'number',
1544
+ value: newTunnelLocal,
1545
+ onChange: (e) => setNewTunnelLocal(e.target.value)
1546
+ })
1547
+ ),
1548
+ React.createElement('span', { style: { paddingBottom: '8px', color: 'var(--dsw-alias-label-secondary)' } }, '→'),
1549
+ React.createElement(
1550
+ 'div',
1551
+ { style: { display: 'flex', flexDirection: 'column', gap: '3px' } },
1552
+ React.createElement('span', { className: 'drw-label' }, t('tRemotePort')),
1553
+ React.createElement('input', {
1554
+ className: 'drw-input',
1555
+ style: { width: '120px' },
1556
+ type: 'number',
1557
+ value: newTunnelRemote,
1558
+ onChange: (e) => setNewTunnelRemote(e.target.value)
1559
+ })
1560
+ ),
1561
+ React.createElement(
1562
+ 'button',
1563
+ {
1564
+ type: 'button',
1565
+ className: 'drw-btn drw-btn-primary',
1566
+ disabled: busy === 'tunnel_open',
1567
+ onClick: handleStartTunnel
1568
+ },
1569
+ busy === 'tunnel_open' ? t('tOpening') : t('tOpenBtn')
1570
+ )
1571
+ )
1572
+ : null,
1573
+
1574
+ tunnelMsg
1575
+ ? React.createElement(
1576
+ 'div',
1577
+ {
1578
+ className: 'drw-preview',
1579
+ style: {
1580
+ borderColor: tunnelMsg.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)'
1581
+ }
1582
+ },
1583
+ tunnelMsg.text
1584
+ )
1585
+ : null,
1586
+
1587
+ // Tunnels Table
1588
+ tunnels.length > 0
1589
+ ? React.createElement(
1590
+ 'table',
1591
+ { className: 'drw-table' },
1592
+ React.createElement(
1593
+ 'thead',
1594
+ null,
1595
+ React.createElement(
1596
+ 'tr',
1597
+ null,
1598
+ React.createElement('th', null, t('tunnelsColId')),
1599
+ React.createElement('th', null, t('tunnelsColRoute')),
1600
+ React.createElement('th', { style: { textAlign: 'right' } }, t('tunnelsColActions'))
1601
+ )
1602
+ ),
1603
+ React.createElement(
1604
+ 'tbody',
1605
+ null,
1606
+ tunnels.map((tun) =>
1607
+ React.createElement(
1608
+ 'tr',
1609
+ { key: tun.id },
1610
+ React.createElement('td', { style: { fontFamily: 'monospace', fontSize: '12px' } }, tun.id),
1611
+ React.createElement(
1612
+ 'td',
1613
+ null,
1614
+ React.createElement('span', { className: 'drw-badge drw-badge-ok' }, `127.0.0.1:${tun.localPort}`),
1615
+ ' → ',
1616
+ React.createElement('span', { className: 'drw-badge' }, `${tun.targetHost || '127.0.0.1'}:${tun.remotePort}`)
1617
+ ),
1618
+ React.createElement(
1619
+ 'td',
1620
+ { style: { textAlign: 'right' } },
1621
+ React.createElement(
1622
+ 'button',
1623
+ {
1624
+ type: 'button',
1625
+ className: 'drw-btn drw-btn-danger',
1626
+ style: { fontSize: '11px', padding: '3px 8px' },
1627
+ onClick: () => handleStopTunnel(tun.id)
1628
+ },
1629
+ t('tStopBtn')
1630
+ )
1631
+ )
1632
+ )
1633
+ )
1634
+ )
1635
+ )
1636
+ : React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('tNoTunnels'))
1637
+ )
1638
+ )
1639
+ }
1640
+
1641
+ // Accordion item for Settings -> Plugins section
1642
+ function PluginCard(props) {
1643
+ const [open, setOpen] = React.useState(false)
1644
+ const t = props.locale === 'ru' ? makeT(ru, en) : makeT(en, ru)
1645
+
1646
+ React.useEffect(() => {
1647
+ ensureCss()
1648
+ }, [])
1649
+
1650
+ return React.createElement(
1651
+ 'li',
1652
+ { className: 'drw-card', style: { listStyle: 'none', marginBottom: '12px' } },
1653
+ React.createElement(
1654
+ 'button',
1655
+ {
1656
+ type: 'button',
1657
+ style: {
1658
+ background: 'none',
1659
+ border: 'none',
1660
+ cursor: 'pointer',
1661
+ display: 'flex',
1662
+ alignItems: 'center',
1663
+ width: '100%',
1664
+ padding: 0,
1665
+ textAlign: 'left',
1666
+ },
1667
+ 'aria-expanded': open,
1668
+ onClick: () => setOpen((v) => !v),
1669
+ },
1670
+ React.createElement('span', { style: { fontSize: '20px', marginRight: '12px' } }, '🌐'),
1671
+ React.createElement(
1672
+ 'div',
1673
+ { style: { flex: 1 } },
1674
+ React.createElement('div', { style: { fontWeight: 600, fontSize: '15px', color: 'var(--dsw-alias-label-primary)' } }, t('title')),
1675
+ React.createElement('div', { style: { fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' } }, t('subtitle'))
1676
+ ),
1677
+ React.createElement('span', { className: 'drw-badge drw-badge-ok', style: { marginRight: '14px' } }, t('status')),
1678
+ React.createElement(
1679
+ 'span',
1680
+ { style: { transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .16s' } },
1681
+ React.createElement(FallbackChevron)
1682
+ )
1683
+ ),
1684
+ open
1685
+ ? React.createElement(
1686
+ 'div',
1687
+ { style: { marginTop: '16px', borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: '16px' } },
1688
+ React.createElement(SettingsView, props)
1689
+ )
1690
+ : null
1691
+ )
1692
+ }
1693
+
1694
+ function RemoteWorkspaceChip(props) {
1695
+ ensureCss()
1696
+ const [activeHost, setActiveHost] = React.useState(null)
1697
+
1698
+ React.useEffect(() => {
1699
+ fetch('/dsh-remote-workspace/state')
1700
+ .then((r) => r.json())
1701
+ .then((d) => {
1702
+ if (d.ok && d.activeId && d.profiles) {
1703
+ const f = d.profiles.find((p) => p.id === d.activeId)
1704
+ if (f) setActiveHost(f.name || f.host)
1705
+ }
1706
+ })
1707
+ .catch(() => {})
1708
+ }, [])
1709
+
1710
+ return React.createElement(
1711
+ 'div',
1712
+ {
1713
+ style: {
1714
+ display: 'flex',
1715
+ alignItems: 'center',
1716
+ gap: '6px',
1717
+ padding: '2px 8px',
1718
+ fontSize: '11px',
1719
+ fontFamily: 'monospace',
1720
+ borderRadius: '999px',
1721
+ border: '1px solid var(--dsw-alias-border-l2)',
1722
+ background: 'var(--dsw-alias-bg-layer-1)',
1723
+ color: activeHost ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-label-secondary)',
1724
+ cursor: 'pointer'
1725
+ }
1726
+ },
1727
+ React.createElement('span', null, '🌐'),
1728
+ React.createElement('span', null, activeHost ? `SSH: ${activeHost}` : 'SSH: Local')
1729
+ )
1730
+ }
1731
+
1732
+ function apply(ctx) {
1733
+ if (ctx.locale && typeof ctx.locale.register === 'function') {
1734
+ try { ctx.locale.register(NS, { en, ru }) } catch (_) {}
1735
+ }
1736
+
1737
+ if (ctx.slots && typeof ctx.slots.inject === 'function') {
1738
+ ctx.slots.inject('settings.plugin.item', () =>
1739
+ ctx.slots.register(
1740
+ {
1741
+ name: 'settings.plugin.item',
1742
+ key: NS,
1743
+ locale: NS,
1744
+ inject: () => ({ ctx })
1745
+ },
1746
+ (props) => React.createElement(PluginCard, Object.assign({}, props, { ctx }))
1747
+ )
1748
+ )
1749
+
1750
+ ctx.slots.inject('conversation.session.header.utilities', () =>
1751
+ ctx.slots.register(
1752
+ {
1753
+ name: 'conversation.session.header.utilities',
1754
+ id: '@goodandready/dsh-remote-workspace',
1755
+ order: 30
1756
+ },
1757
+ (props) => React.createElement(RemoteWorkspaceChip, props)
1758
+ )
1759
+ )
1760
+ }
1761
+ }
1762
+
1763
+ module.exports = { apply, inject: ['slots', 'locale'] }
1764
+ return module.exports
1765
+ }
1766
+ })