@electerm/electerm-react 2.3.151 → 2.3.176

package/client/components/tabs/tabs.styl

@@ -244,3 +244,67 @@
   max-height 300px
   overflow-y auto
 
+// Layout and Workspace dropdown styles
+.layout-workspace-dropdown
+  background var(--main)
+  border-radius 4px
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
+  min-width 200px
+  padding 8px
+  .ant-tabs-nav
+    margin-bottom 8px
+
+.layout-menu-content
+  max-height 300px
+  overflow-y auto
+
+.layout-menu-item
+  padding 6px 12px
+  cursor pointer
+  border-radius 4px
+  display flex
+  align-items center
+  gap 8px
+  color var(--text)
+  &:hover
+    background var(--main-dark)
+  &.active
+    background var(--primary)
+    color #fff
+
+.workspace-menu-content
+  max-height 300px
+  overflow-y auto
+
+.workspace-save-btn
+  margin-bottom 8px
+
+.workspace-list
+  display flex
+  flex-direction column
+  gap 4px
+
+.workspace-item
+  padding 6px 12px
+  cursor pointer
+  border-radius 4px
+  display flex
+  align-items center
+  justify-content space-between
+  color var(--text)
+  &:hover
+    background var(--main-dark)
+  .workspace-delete-icon
+    opacity 0
+    color var(--text-dark)
+    &:hover
+      color var(--error)
+  &:hover .workspace-delete-icon
+    opacity 1
+
+.workspace-name
+  flex 1
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+

package/client/components/tabs/workspace-save-modal.jsx

@@ -0,0 +1,117 @@
+/**
+ * Workspace save modal component - standalone modal
+ */
+
+import React, { useState } from 'react'
+import { auto } from 'manate/react'
+import Modal from '../common/modal'
+import { Input, Select, Button, Space, message, Radio } from 'antd'
+import { SaveOutlined, EditOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default auto(function WorkspaceSaveModal ({ store }) {
+  const { workspaceSaveModalVisible, workspaces } = store
+  const [name, setName] = useState('')
+  const [selectedId, setSelectedId] = useState(null)
+  const [saveMode, setSaveMode] = useState('new') // 'new' or 'overwrite'
+
+  if (!workspaceSaveModalVisible) {
+    return null
+  }
+
+  function handleClose () {
+    window.store.workspaceSaveModalVisible = false
+  }
+
+  function handleSave () {
+    if (saveMode === 'new') {
+      if (!name.trim()) {
+        message.error(e('name needed'))
+        return
+      }
+      window.store.saveWorkspace(name.trim())
+      message.success(e('saved'))
+    } else {
+      if (!selectedId) {
+        message.error('please Select Workspace')
+        return
+      }
+      const ws = workspaces.find(w => w.id === selectedId)
+      window.store.saveWorkspace(ws?.name || name, selectedId)
+      message.success(e('saved'))
+    }
+    setName('')
+    setSelectedId(null)
+    setSaveMode('new')
+    handleClose()
+  }
+
+  function handleCancel () {
+    setName('')
+    setSelectedId(null)
+    setSaveMode('new')
+    handleClose()
+  }
+
+  const options = workspaces.map(w => ({
+    label: w.name,
+    value: w.id
+  }))
+
+  return (
+    <Modal
+      title={e('save')}
+      open={workspaceSaveModalVisible}
+      onCancel={handleCancel}
+      footer={null}
+      width={400}
+    >
+      <div className='pd1y'>
+        <Space direction='vertical' block>
+          <Radio.Group
+            value={saveMode}
+            onChange={ev => setSaveMode(ev.target.value)}
+          >
+            <Radio value='new'>
+              <SaveOutlined className='mg1r' />
+              {e('saveAsNew')}
+            </Radio>
+            <Radio value='overwrite' disabled={!workspaces.length}>
+              <EditOutlined className='mg1r' />
+              {e('overwrite')}
+            </Radio>
+          </Radio.Group>
+
+          {saveMode === 'new'
+            ? (
+              <Input
+                placeholder={e('name')}
+                value={name}
+                onChange={e => setName(e.target.value)}
+                onPressEnter={handleSave}
+              />
+              )
+            : (
+              <Select
+                placeholder={e('workspaces')}
+                value={selectedId}
+                onChange={setSelectedId}
+                options={options}
+                style={{ width: '100%' }}
+              />
+              )}
+
+          <div className='pd1t'>
+            <Button type='primary' onClick={handleSave}>
+              {e('save')}
+            </Button>
+            <Button className='mg1l' onClick={handleCancel}>
+              {e('cancel')}
+            </Button>
+          </div>
+        </Space>
+      </div>
+    </Modal>
+  )
+})

package/client/components/tabs/workspace-select.jsx

@@ -0,0 +1,79 @@
+/**
+ * Workspace select content component
+ */
+
+import React from 'react'
+import { Button, Empty, Popconfirm } from 'antd'
+import {
+  SaveOutlined,
+  DeleteOutlined
+} from '@ant-design/icons'
+import { auto } from 'manate/react'
+
+const e = window.translate
+
+export default auto(function WorkspaceSelect (props) {
+  const { store } = props
+  const { workspaces } = store
+
+  function handleLoadWorkspace (id) {
+    window.store.loadWorkspace(id)
+  }
+
+  function handleDeleteWorkspace (id, ev) {
+    ev.stopPropagation()
+    window.store.deleteWorkspace(id)
+  }
+
+  function handleSaveClick () {
+    window.store.workspaceSaveModalVisible = true
+  }
+
+  return (
+    <div className='workspace-menu-content'>
+      <div className='workspace-save-btn pd1b'>
+        <Button
+          type='primary'
+          icon={<SaveOutlined />}
+          size='small'
+          onClick={handleSaveClick}
+          block
+        >
+          {e('save')}
+        </Button>
+      </div>
+      {workspaces.length === 0
+        ? (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description='No items'
+          />
+          )
+        : (
+          <div className='workspace-list'>
+            {workspaces.map(ws => (
+              <div
+                key={ws.id}
+                className='workspace-item'
+                onClick={() => handleLoadWorkspace(ws.id)}
+              >
+                <span className='workspace-name'>{ws.name}</span>
+                <Popconfirm
+                  title={e('del') + '?'}
+                  onConfirm={(ev) => handleDeleteWorkspace(ws.id, ev)}
+                  onCancel={(ev) => ev.stopPropagation()}
+                  okText={e('ok')}
+                  cancelText={e('cancel')}
+                >
+                  <DeleteOutlined
+                    className='workspace-delete-icon'
+                    onClick={(ev) => ev.stopPropagation()}
+                  />
+                </Popconfirm>
+              </div>
+            ))}
+          </div>
+          )}
+    </div>
+  )
+})

package/client/components/terminal/attach-addon-custom.js

@@ -34,7 +34,13 @@ export default class AttachAddonCustom extends AttachAddon {
   }
 
   onMsg = (ev) => {
-    this.trzsz.processServerOutput(ev.data)
+    // When in alternate screen mode (like vim, less, or TUI apps like Claude Code),
+    // bypass trzsz processing to avoid interference with the application's display
+    if (this.term?.buffer?.active?.type === 'alternate') {
+      this.writeToTerminal(ev.data)
+    } else {
+      this.trzsz.processServerOutput(ev.data)
+    }
   }
 
   writeToTerminal = (data) => {

package/client/components/terminal/terminal-interactive.jsx

@@ -3,7 +3,8 @@
  */
 
 import { useEffect, useState } from 'react'
-import { Modal, Form, Button } from 'antd'
+import { Form, Button } from 'antd'
+import Modal from '../common/modal'
 import InputAutoFocus from '../common/input-auto-focus'
 import wait from '../../common/wait'
 

package/client/components/terminal/terminal.jsx

@@ -178,7 +178,6 @@ class Term extends Component {
       clearTimeout(this.timers[k])
       this.timers[k] = null
     })
-    this.timers = null
     this.onClose = true
     if (this.socket) {
       this.socket.close()
@@ -1321,7 +1320,7 @@ class Term extends Component {
     }
     this.socketCloseWarning = notification.warning({
       key,
-      message: e('socketCloseTip'),
+      title: e('socketCloseTip'),
       duration: 30,
       description: (
         <div className='pd2y'>

package/client/components/text-editor/text-editor.jsx

@@ -4,7 +4,8 @@
 
 import { PureComponent } from 'react'
 import TextEditorForm from './text-editor-form'
-import { Spin, Modal } from 'antd'
+import { Spin } from 'antd'
+import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import { refsStatic, refs } from '../common/ref'
 

package/client/components/tree-list/move-item-modal.jsx

@@ -5,7 +5,8 @@ import {
   SearchOutlined
 } from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
-import { Tree, Modal, Button, Input } from 'antd'
+import { Tree, Button, Input } from 'antd'
+import Modal from '../common/modal'
 import { auto } from 'manate/react'
 const e = window.translate
 

package/client/components/vnc/vnc-session.jsx

@@ -10,9 +10,9 @@ import {
 import {
   Spin,
   message,
-  Modal,
   Tag
 } from 'antd'
+import Modal from '../common/modal'
 import * as ls from '../../common/safe-local-storage'
 import { copy } from '../../common/clipboard'
 import resolutions from '../rdp/resolutions'
@@ -250,7 +250,7 @@ export default class VncSession extends RdpSession {
       title: e('credentialsRequired'),
       content: this.renderForm(['password']),
       footer: null,
-      visible: true
+      open: true
     }
     return (
       <Modal

package/client/components/widgets/widget-control.jsx

@@ -3,11 +3,9 @@
  */
 import React, { useState } from 'react'
 import WidgetForm from './widget-form'
-import {
-  message
-} from 'antd'
+import { showMsg } from './widget-notification-with-details'
 
-export default function WidgetControl ({ formData }) {
+export default function WidgetControl ({ formData, widgetInstancesLength }) {
   const [loading, setLoading] = useState(false)
   const widget = formData
   if (!widget.id) {
@@ -18,6 +16,12 @@ export default function WidgetControl ({ formData }) {
     )
   }
 
+  // Check if this widget already has a running instance
+  // widgetInstancesLength is used to trigger re-render when instances change
+  const hasRunningInstance = widgetInstancesLength > 0 && window.store.widgetInstances.some(
+    instance => instance.widgetId === widget.id
+  )
+
   const handleFormSubmit = async (config) => {
     setLoading(true)
     try {
@@ -30,9 +34,9 @@ export default function WidgetControl ({ formData }) {
       } = result
       if (!instanceId) {
         if (success === false) {
-          message.error('Failed to run widget', error || '')
+          showMsg('Failed to run widget', 'error', null, 10, error || '')
         } else {
-          message.success(msg || 'Widget run successfully')
+          showMsg(msg, 'success', null, 10)
         }
         return
       }
@@ -45,6 +49,7 @@ export default function WidgetControl ({ formData }) {
         config
       }
       window.store.widgetInstances.push(instance)
+      showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)
     } finally {
@@ -58,6 +63,7 @@ export default function WidgetControl ({ formData }) {
         widget={widget}
         onSubmit={handleFormSubmit}
         loading={loading}
+        hasRunningInstance={hasRunningInstance}
       />
     </div>
   )

package/client/components/widgets/widget-form.jsx

@@ -2,10 +2,10 @@
  * Widget form component
  */
 import React from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, message } from 'antd'
+import { Form, Input, InputNumber, Switch, Select, Button, Tooltip } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 
-export default function WidgetForm ({ widget, onSubmit, loading }) {
+export default function WidgetForm ({ widget, onSubmit, loading, hasRunningInstance }) {
   const [form] = Form.useForm()
 
   if (!widget) {
@@ -13,17 +13,13 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
   }
 
   const { info } = widget
-  const { configs, type } = info
+  const { configs, type, singleInstance } = info
   const isInstanceWidget = type === 'instance'
   const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
+  const isDisabled = loading || (singleInstance && hasRunningInstance)
 
   const handleSubmit = async (values) => {
-    try {
-      await onSubmit(values)
-      message.success('Widget started successfully')
-    } catch (error) {
-      message.error('Failed to start widget: ' + error.message)
-    }
+    onSubmit(values)
   }
 
   const renderFormItem = (config) => {
@@ -86,7 +82,7 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
 
   return (
     <div className='widget-form'>
-      <div className='pd1b'>
+      <div className='pd1b alignright'>
         <h4>{info.name}</h4>
         <p>{info.description}</p>
       </div>
@@ -100,14 +96,16 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
         <Form.Item
           {...tailFormItemLayout}
         >
-          <Button
-            type='primary'
-            htmlType='submit'
-            loading={loading}
-            disabled={loading}
-          >
-            {txt}
-          </Button>
+          <Tooltip title={isDisabled && singleInstance && hasRunningInstance ? 'Already running, only one instance allowed' : ''}>
+            <Button
+              type='primary'
+              htmlType='submit'
+              loading={loading}
+              disabled={isDisabled}
+            >
+              {txt}
+            </Button>
+          </Tooltip>
         </Form.Item>
       </Form>
     </div>

package/client/components/widgets/widget-instance.jsx

@@ -1,10 +1,11 @@
-import { Popconfirm } from 'antd'
-import { CloseOutlined } from '@ant-design/icons'
+import { Popconfirm, Popover } from 'antd'
+import { CloseOutlined, CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
 
 const e = window.translate
 
 export default function WidgetInstance ({ item }) {
-  const { id, title } = item
+  const { id, title, serverInfo } = item
   const cls = 'item-list-unit'
   const delProps = {
     title: e('del'),
@@ -25,17 +26,51 @@ export default function WidgetInstance ({ item }) {
     cancelText: e('cancel'),
     placement: 'top'
   }
+  const handleCopy = () => {
+    if (serverInfo && serverInfo.url) {
+      copy(serverInfo.url)
+    }
+  }
+  const popoverContent = serverInfo
+    ? (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>URL: {serverInfo.url}</span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: {serverInfo.path}</div>
+      </div>
+      )
+    : null
+  const titleDiv = (
+    <div
+      title={title}
+      className='elli pd1y pd2x list-item-title'
+    >
+      {title}
+    </div>
+  )
   return (
     <div
       key={id}
       className={cls}
     >
-      <div
-        title={title}
-        className='elli pd1y pd2x list-item-title'
-      >
-        {title}
-      </div>
+      {
+        serverInfo
+          ? (
+            <Popover
+              content={popoverContent}
+              trigger='hover'
+              placement='top'
+            >
+              {titleDiv}
+            </Popover>
+            )
+          : titleDiv
+      }
       <Popconfirm
         {...popProps}
       >

package/client/components/widgets/widget-notification-with-details.jsx

@@ -0,0 +1,34 @@
+import { notification } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+export function showMsg (message, type = 'success', serverInfo = null, duration = 10, description = '') {
+  const handleCopy = () => {
+    if (serverInfo && serverInfo.url) {
+      copy(serverInfo.url)
+    }
+  }
+
+  let desc = description
+  if (serverInfo) {
+    desc = (
+      <div>
+        {description && <div>{description}</div>}
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>URL: {serverInfo.url}</span>
+          <CopyOutlined
+            className='pointer mg1l'
+            onClick={handleCopy}
+          />
+        </div>
+        <div>Path: {serverInfo.path}</div>
+      </div>
+    )
+  }
+
+  notification[type]({
+    message,
+    description: desc,
+    duration
+  })
+}

package/client/css/basic.styl

@@ -32,7 +32,9 @@ body
   word-break break-all
 
 a
-  color var(--primary)
+  color var(--text)
+  &:hover
+    color var(--text-dark)
 
 .cap
   text-transform capitalize

package/client/css/includes/box.styl

@@ -95,10 +95,10 @@ for $i, $index in 5 16 32
   overflow hidden
 
 .overscroll
-  overflow scroll
+  overflow auto
 
 .overscroll-y
-  overflow-y scroll
+  overflow-y auto
 
 .relative
   position relative

package/client/store/common.js

@@ -4,7 +4,7 @@
 
 import handleError from '../common/error-handler'
 import { Modal } from 'antd'
-import { debounce, some, get } from 'lodash-es'
+import { debounce, some, get, pickBy } from 'lodash-es'
 import {
   modals,
   leftSidebarWidthKey,
@@ -219,27 +219,31 @@ export default Store => {
     delete p.name
     delete p.id
     if (type === connectionMap.rdp) {
+      const filtered = pickBy(p.rdp, (value) => value !== undefined && value !== '')
       return {
         ...tab,
-        ...p.rdp
+        ...filtered
       }
     } else if (type === connectionMap.vnc) {
+      const filtered = pickBy(p.vnc, (value) => value !== undefined && value !== '')
       return {
         ...tab,
-        ...p.vnc
+        ...filtered
       }
     } else if (type === connectionMap.telnet) {
+      const filtered = pickBy(p.telnet, (value) => value !== undefined && value !== '')
       return {
         ...tab,
-        ...p.telnet
+        ...filtered
       }
     }
     delete p.rdp
     delete p.vnc
     delete p.telnet
+    const filtered = pickBy(p, (value) => value !== undefined && value !== '')
     return {
       ...tab,
-      ...p
+      ...filtered
     }
   }
   Store.prototype.applyProfileToTabs = function (tab) {

package/client/store/init-state.js

@@ -75,6 +75,10 @@ export default () => {
     resolutions: ls.getItemJSON(resolutionsLsKey, []),
     terminalCommandHistory: new Set(ls.getItemJSON(cmdHistoryKey, [])),
 
+    // workspaces
+    workspaces: [],
+    workspaceSaveModalVisible: false,
+
     // init session control
     selectedSessions: [],
     sessionModalVisible: false,