@electerm/electerm-react 5.5.15 → 5.5.35

package/client/components/layout/layout.jsx

@@ -37,6 +37,7 @@ export default auto(function Layout (props) {
       height,
       isMobile,
       pinnedQuickCommandBar,
+      quickCommandsInRightPanel,
       leftSidePanelWidth,
       leftSideBarWidth,
       pinned,
@@ -49,7 +50,14 @@ export default auto(function Layout (props) {
       shortcutBarKbOffset
     } = props.store
     const monitorHeight = isRemoteMonitorBarVisible(props.store) ? remoteMonitorBarHeight : 0
-    const h = height - footerHeight - monitorHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
+    // a pin left on while the panel is docked in the right side panel reserves
+    // nothing: the footer box is not rendered then (quick-commands-box.jsx)
+    const qmPinnedHeight = inActiveTerminal &&
+      pinnedQuickCommandBar &&
+      !quickCommandsInRightPanel
+      ? quickCommandBoxHeight
+      : 0
+    const h = height - footerHeight - monitorHeight - qmPinnedHeight - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
     const l = pinned && !isMobile ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned && !isMobile ? rightPanelWidth : 0
     return {
@@ -141,18 +149,9 @@ export default auto(function Layout (props) {
   const footerProps = {
     store
   }
-  const qmProps = pick(store, [
-    'quickCommandTags',
-    'qmSortByFrequency',
-    'openQuickCommandBar',
-    'pinnedQuickCommandBar',
-    'qmSortByFrequency',
-    'inActiveTerminal',
-    'leftSidePanelWidth',
-    'leftSideBarWidth',
-    'openedSideBar',
-    'currentQuickCommands'
-  ])
+  const qmProps = {
+    store
+  }
   const sessionsProps = {
     styles: styles.wrapStyles,
     sizes,

package/client/components/main/main.jsx

@@ -29,6 +29,8 @@ import { isAIDisabled } from '../../common/ai-feature'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
 import RightSidePanel from '../side-panel-r/side-panel-r'
+import CmdHistory from '../footer/cmd-history'
+import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
@@ -94,6 +96,7 @@ export default auto(function Index (props) {
     store.checkForDbUpgrade()
     store.handleGetSerials()
     store.checkPendingDeepLink()
+    store.checkPendingVvFile()
   }, [])
 
   // Track the actual input modality rather than a static capability probe:
@@ -128,6 +131,7 @@ export default auto(function Index (props) {
     pinned,
     isSecondInstance,
     pinnedQuickCommandBar,
+    quickCommandsInRightPanel,
     installSrc,
     fileTransfers,
     uiThemeConfig,
@@ -148,9 +152,16 @@ export default auto(function Index (props) {
     'is-mac': isMac,
     'not-mac': !isMac,
     'is-win': isWin,
-    pinned,
+    // The left sidebar dock is desktop-only (see sidebar/index.jsx). This
+    // class drives the docked-layout CSS — the footer's left offset and the
+    // sidebar panel's top padding — so it has to follow the same gate as the
+    // layout maths in layout.jsx, or a pin persisted from a desktop session
+    // would restyle the mobile layout.
+    pinned: pinned && !store.isMobile,
     'not-win': !isWin,
-    'qm-pinned': pinnedQuickCommandBar,
+    // the pinned quick-command box only shapes the layout while it is actually
+    // in the footer — docked in the right panel it renders there instead
+    'qm-pinned': pinnedQuickCommandBar && !quickCommandsInRightPanel,
     fullscreen,
     // terminal fullscreen keeps the footer visible (rdp/vnc/spice fullscreen
     // does not — the footer would be an empty bar there)
@@ -226,6 +237,7 @@ export default auto(function Index (props) {
     transferHistory: copiedHistory,
     upgradeInfo,
     pinned,
+    isMobile: store.isMobile,
     leftSideBarIcons: config.leftSideBarIcons,
     widgetInstancesLength: widgetInstances.length
   }
@@ -253,7 +265,8 @@ export default auto(function Index (props) {
     rightPanelPinned: store.rightPanelPinned,
     rightPanelWidth: store.rightPanelWidth,
     title: rightPanelTitle,
-    rightPanelTab
+    rightPanelTab,
+    isMobile: store.isMobile
   }
   const sshConfigProps = {
     ...pick(store, [
@@ -275,6 +288,7 @@ export default auto(function Index (props) {
     showAIConfig: store.showAIConfig,
     rightPanelTab,
     agentRunning: store.agentRunning,
+    aiContextInfo: store.aiContextInfo,
     currentChatSessionId: store.currentChatSessionId,
     showChatSessions: store.showChatSessions
   }
@@ -351,6 +365,12 @@ export default auto(function Index (props) {
         <RightSidePanel {...rightPanelProps}>
           {!isAIDisabled() && <AIChat {...aiChatProps} />}
           <TerminalInfo key={store.activeTabId} store={store} {...deepCopy(store.terminalInfoProps)} />
+          {/* the cmd history panel has two homes; the footer popover is the
+              other one, and both are the same component (see cmd-history.jsx) */}
+          <CmdHistory store={store} inline />
+          {/* same for the quick command panel: the footer box is the other home
+              (see quick-commands-box.jsx) */}
+          <QuickCommandsFooterBox store={store} inline />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

package/client/components/main/term-fullscreen.styl

@@ -37,6 +37,13 @@
       right 10px !important
       bottom 10px !important
 
+// RDP/VNC/Spice fullscreen has no footer (it is in the hide list above), so
+// the right panel has nothing to clear and may use the full height. When the
+// footer IS kept, see .fullscreen.fs-with-footer below.
+.fullscreen:not(.fs-with-footer)
+  .right-side-panel
+    bottom 0
+
 // Terminal fullscreen keeps the footer (and the quick-command popup above it)
 // visible; the session shrinks to sit on top of the footer. RDP/VNC/Spice
 // fullscreen stays footer-less — inActiveTerminal is false for those tabs, so

package/client/components/quick-commands/qm.styl

@@ -2,6 +2,58 @@
   max-height calc(100vh - 100px)
   overflow-y scroll
   padding 20px 0 10px 0
+
+// Docked in the right side panel the panel *is* the container, so the quick
+// commands fill it instead of sizing themselves like the footer box. The parent
+// (.right-side-panel-content) is an absolutely positioned box with top and
+// bottom set, so 100% resolves to a real height and the list scrolls inside it
+// rather than scrolling the panel.
+.qm-panel-in-right-panel
+  display flex
+  flex-direction column
+  width 100%
+  height 100%
+  > .pd2
+    display flex
+    flex-direction column
+    height 100%
+    min-height 0
+    width 100%
+  .qm-flex
+    flex-shrink 0
+    // the footer box is as wide as the footer; the right panel is not, and the
+    // search + label + sort + actions row does not fit in one line there
+    flex-wrap wrap
+  // ...so give the search a line of its own and let it fill it, instead of
+  // sitting at its footer width with a gap beside it. `flex-basis: 100%` is what
+  // forces the wrap; the controls then share the line below.
+  .qm-search-input
+    flex 1 1 100%
+    max-width none
+  .qm-list-wrap
+    flex 1
+    min-height 0
+    max-height none
+    overflow-y auto
+
+.qm-panel-actions
+  display flex
+  align-items center
+  gap 6px
+
+.qm-move-icon
+  font-size 14px
+  padding 4px
+  cursor pointer
+  &:hover
+    color var(--primary)
+
+// The footer Q stays lit while the panel is docked in the right panel, same
+// contract as the info, AI and cmd history icons
+.quick-command-trigger
+  &.active
+    color var(--success)
+
 .qm-wrap-tooltip
   background var(--main)
   position absolute
@@ -80,6 +132,12 @@
     width 100%
   .qm-label-select
     width 100%
+  // The docked panel's search claims a whole row with `flex-basis: 100%`, which
+  // is a width only while `.qm-flex` is a row. Here it is a column, so the same
+  // basis would be 100% of the *height* and would push the controls off the
+  // panel. Same specificity as the rule above it, declared later, so it wins.
+  .qm-panel-in-right-panel .qm-search-input
+    flex none
 
 // On mobile, stack the quick-command row (name / delay / command / remove)
 // vertically instead of side by side — the horizontal Space.Compact layout

package/client/components/quick-commands/quick-command-ai-editor.jsx

@@ -0,0 +1,255 @@
+/**
+ * AI-powered quick command generator.
+ *
+ * This is the "create with AI" tab of the quick command form: describe the
+ * quick command in natural language, the configured AI provider returns the
+ * quick command (name + sub commands in JSON), and the result is written back
+ * into the very same form through `onChange`, so the user reviews/edits it in
+ * the manual tab before saving.
+ */
+import { useState, useEffect } from 'react'
+import { Button, Input, Space, Alert } from 'antd'
+import {
+  RobotOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import message from '../common/message'
+import { appendMandatoryGuardrails } from '../ai/ai-guardrails'
+import AiHistory, { addHistoryItem } from '../ai/ai-history.jsx'
+import HelpIcon from '../common/help-icon'
+import { getItem, setItem } from '../../common/safe-local-storage'
+import templates from './templates'
+import './quick-command-ai-editor.styl'
+
+const STORAGE_KEY_DESC = 'ai_quick_command_description'
+const STORAGE_KEY_HISTORY = 'ai_quick_command_history'
+const EVENT_NAME_HISTORY = 'ai-quick-command-history-update'
+const defaultDelay = 100
+const maxDelay = 65535
+const maxNameLength = 60
+const { TextArea } = Input
+const e = window.translate
+
+const wiki = 'https://github.com/electerm/electerm/wiki/Create-quick-command-by-AI'
+
+/**
+ * build the prompt that asks the AI for one quick command definition
+ * @param {string} description
+ * @return {string}
+ */
+export function buildPrompt (description) {
+  const lang = window.store.config.languageAI || window.store.getLangName()
+  const templateList = templates.map(t => `{{${t}}}`).join(', ')
+  return `You are an electerm quick command generator. Based on the user's natural language description, generate ONE quick command definition in JSON format.
+
+The quick command JSON shape:
+{
+  "name": "string (required) - short name of the quick command",
+  "commands": [
+    {
+      "name": "string - short name of this step",
+      "command": "string (required) - the exact shell command to send to the terminal",
+      "delay": "number - milliseconds to wait before sending this step, 1-${maxDelay}, default ${defaultDelay}"
+    }
+  ],
+  "inputOnly": "boolean - true means only type the command into the terminal without pressing enter, default false",
+  "labels": "array of strings - optional tags used to group quick commands"
+}
+
+Important rules:
+1. Respond with ONE quick command object, never an array of quick commands
+2. Split a multi step operation into several "commands" items, one shell command per item, and give a later step a longer "delay" when the step before it takes time
+3. "command" must be a plain shell command, no markdown, no code fence, no trailing newline
+4. Keep "name" short (max ${maxNameLength} chars) and write it in ${lang} language, labels included
+5. You may use the built in templates ${templateList} inside a command when the user asks for clipboard content, current time or current date
+6. Never invent hosts, paths, ports or credentials the user did not mention
+7. Respond ONLY with valid JSON, no markdown formatting and no extra explanation
+
+User description: ${description}
+
+Generate the quick command JSON:`
+}
+
+function stripFence (str) {
+  let s = str.trim()
+  if (s.startsWith('```json')) {
+    s = s.slice(7)
+  } else if (s.startsWith('```')) {
+    s = s.slice(3)
+  }
+  if (s.endsWith('```')) {
+    s = s.slice(0, -3)
+  }
+  return s.trim()
+}
+
+/**
+ * Normalize whatever the model returned into a quick command definition the
+ * quick command form can consume. Tolerates markdown fences, prose around the
+ * JSON, an array payload and string commands.
+ * @param {string|object} raw
+ * @return {object|null} {name, commands, inputOnly, labels}
+ */
+export function normalizeQuickCommand (raw) {
+  if (!raw) {
+    return null
+  }
+  let data = raw
+  if (typeof data === 'string') {
+    const txt = stripFence(data)
+    try {
+      data = JSON.parse(txt)
+    } catch (err) {
+      // the model sometimes wraps the JSON in explanation text
+      const match = txt.match(/[{[][\s\S]*[}\]]/)
+      if (!match) {
+        return null
+      }
+      try {
+        data = JSON.parse(match[0])
+      } catch (err2) {
+        return null
+      }
+    }
+  }
+  if (Array.isArray(data)) {
+    data = data[0]
+  }
+  if (!data || typeof data !== 'object') {
+    return null
+  }
+  const rawCommands = Array.isArray(data.commands)
+    ? data.commands
+    : (data.command ? [data] : [])
+  const commands = rawCommands.map(c => {
+    if (typeof c === 'string') {
+      return {
+        name: '',
+        command: c,
+        delay: defaultDelay
+      }
+    }
+    const delay = Number(c.delay)
+    return {
+      name: (c.name || '').toString(),
+      command: (c.command || c.cmd || '').toString(),
+      delay: delay >= 1 ? Math.min(Math.round(delay), maxDelay) : defaultDelay
+    }
+  }).filter(c => c.command.trim())
+  if (!commands.length) {
+    return null
+  }
+  const name = (data.name || data.title || '').toString().trim()
+  return {
+    name: name || commands[0].command.slice(0, maxNameLength),
+    commands,
+    inputOnly: !!data.inputOnly,
+    labels: Array.isArray(data.labels)
+      ? data.labels.map(l => l.toString()).filter(Boolean)
+      : []
+  }
+}
+
+export default function QuickCommandAiEditor (props) {
+  const { onChange } = props
+  const [description, setDescription] = useState(() => getItem(STORAGE_KEY_DESC) || '')
+  const [loading, setLoading] = useState(false)
+  const [preview, setPreview] = useState('')
+
+  useEffect(() => {
+    setItem(STORAGE_KEY_DESC, description)
+  }, [description])
+
+  async function handleGenerate () {
+    if (window.store.aiConfigMissing()) {
+      window.store.toggleAIConfig()
+      return
+    }
+    if (!description.trim()) {
+      return message.warning(e('description') + ' ' + e('required'))
+    }
+    setLoading(true)
+    try {
+      const config = window.store.config
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        buildPrompt(description),
+        config.modelAI,
+        appendMandatoryGuardrails('You are a helpful assistant that generates electerm quick commands.'),
+        config.baseURLAI,
+        config.apiPathAI,
+        config.apiKeyAI,
+        config.proxyAI,
+        false, // disable streaming, we need the whole JSON at once
+        config.authHeaderNameAI
+      )
+      if (aiResponse && aiResponse.error) {
+        throw new Error(aiResponse.error)
+      }
+      const data = normalizeQuickCommand(aiResponse && aiResponse.response)
+      if (!data) {
+        throw new Error('no quick command found in AI response')
+      }
+      setPreview(JSON.stringify(data, null, 2))
+      addHistoryItem(STORAGE_KEY_HISTORY, description, EVENT_NAME_HISTORY)
+      onChange(data)
+      message.success(e('Done'))
+    } catch (err) {
+      console.error('AI quick command generation error:', err)
+      message.error('Can not generate quick command from AI response: ' + err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const textAreaProps = {
+    value: description,
+    onChange: ev => setDescription(ev.target.value),
+    placeholder: e('description'),
+    autoSize: { minRows: 4, maxRows: 8 },
+    disabled: loading
+  }
+
+  const generateBtnProps = {
+    type: 'primary',
+    onClick: handleGenerate,
+    disabled: !description.trim(),
+    icon: loading ? <LoadingOutlined /> : <RobotOutlined />,
+    loading
+  }
+
+  return (
+    <div className='qm-ai-editor'>
+      <div className='pd1b'>
+        <Alert
+          type='info'
+          showIcon
+          title={e('aiSecurityNotice')}
+        />
+      </div>
+      <div className='pd1b'>
+        <TextArea {...textAreaProps} />
+      </div>
+      <AiHistory
+        storageKey={STORAGE_KEY_HISTORY}
+        eventName={EVENT_NAME_HISTORY}
+        onSelect={setDescription}
+      />
+      <div className='pd1t'>
+        <Space>
+          <Button {...generateBtnProps}>
+            {e('submit')}
+          </Button>
+          <HelpIcon link={wiki} />
+        </Space>
+      </div>
+      {
+        !!preview && (
+          <div className='pd1t'>
+            <pre className='qm-ai-preview'>{preview}</pre>
+          </div>
+        )
+      }
+    </div>
+  )
+}

package/client/components/quick-commands/quick-command-ai-editor.styl

@@ -0,0 +1,13 @@
+// "create with AI" tab of the quick command form
+.qm-ai-editor
+  // the generated quick command, kept visible for reference after it has been
+  // written back into the form
+  .qm-ai-preview
+    padding 12px
+    margin 0
+    max-height 300px
+    overflow auto
+    font-size 12px
+    font-family monospace
+    white-space pre-wrap
+    word-break break-word