@electerm/electerm-react 5.5.25 → 5.5.35

package/client/components/ai/ai.styl

@@ -26,11 +26,26 @@
     border-radius 3px
     pre
       margin-bottom 0
-    // .code-block-actions
-    //   display block
-    // &:hover
-    //   .code-block-actions
-    //     display block
+
+// copy icons stay visible all the time, never hover only
+.copy-icon,
+.code-action-icon
+  color var(--text-dark)
+  font-size 14px
+  &:hover
+    color var(--primary)
+
+.code-block-actions
+  display flex
+  justify-content flex-end
+
+// left aligned on purpose: the streaming stop/loading icon is pinned to the
+// bottom right of .chat-history-item, so a right aligned copy icon would sit
+// on top of it while a response is streaming
+.ai-output-actions
+  display flex
+  justify-content flex-start
+  margin-top 6px
 
 .ai-stream-output
   position relative
@@ -223,9 +238,18 @@
   font-size 12px
   color var(--text-color-2)
 
+.agent-tool-pre-wrap
+  position relative
+
+.agent-tool-copy
+  position absolute
+  top 5px
+  right 6px
+  z-index 1
+
 .agent-tool-pre
   background var(--main-dark)
-  padding 6px 8px
+  padding 6px 26px 6px 8px
   border-radius 3px
   font-size 12px
   max-height 200px
@@ -313,3 +337,78 @@
   &:hover
     border-color var(--primary)
     color var(--text)
+
+// context size indicator, right hand side of the ai chat toolbar
+.ai-context-indicator
+  display inline-flex
+  align-items center
+  gap 4px
+  flex-shrink 0
+  font-size 11px
+  line-height 1
+  color var(--text-color-2)
+  cursor default
+  user-select none
+
+.ai-context-bar
+  display inline-block
+  width 34px
+  height 5px
+  border-radius 3px
+  background var(--main-darker)
+  overflow hidden
+  flex-shrink 0
+
+.ai-context-bar-fill
+  display block
+  height 100%
+  border-radius 3px
+  background var(--primary)
+  transition width 0.2s
+
+.ai-context-count
+  color var(--text-dark)
+  font-variant-numeric tabular-nums
+
+.ai-context-percent
+  font-variant-numeric tabular-nums
+
+.ai-context-warn
+  .ai-context-bar-fill
+    background #faad14
+  .ai-context-percent
+    color #faad14
+
+.ai-context-danger
+  .ai-context-bar-fill
+    background #ff4d4f
+  .ai-context-percent
+    color #ff4d4f
+    font-weight 500
+
+.ai-context-tip
+  font-size 12px
+  min-width 210px
+
+.ai-context-tip-title
+  font-weight 500
+  margin-bottom 4px
+
+.ai-context-tip-row
+  display flex
+  justify-content space-between
+  gap 12px
+
+.ai-context-tip-total
+  font-weight 500
+  border-top 1px solid rgba(128, 128, 128, 0.35)
+  margin-top 2px
+  padding-top 2px
+
+.ai-context-tip-note
+  margin-top 4px
+  opacity 0.75
+
+.ai-context-tip-warn
+  margin-top 4px
+  color #faad14

package/client/components/ai/copy-icon.jsx

@@ -0,0 +1,31 @@
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+
+const e = window.translate
+
+/**
+ * Always visible copy icon, shared by AI output and agent tool call blocks
+ * @param {Object} props
+ * @param {string} props.text - text to copy
+ * @param {string} props.className - extra class for positioning
+ * @param {string} props.title - tooltip title
+ */
+export default function CopyIcon ({ text, className = '', title }) {
+  function handleCopy (evt) {
+    // agent tool card header toggles expanded state on click
+    evt.stopPropagation()
+    copy(text)
+  }
+
+  if (!text) {
+    return null
+  }
+
+  return (
+    <CopyOutlined
+      className={`copy-icon pointer iblock${className ? ' ' + className : ''}`}
+      onClick={handleCopy}
+      title={title || e('copy')}
+    />
+  )
+}

package/client/components/bookmark-form/common/vv-file-field.jsx

@@ -2,8 +2,9 @@
  * bookmark form - load a .vv (virt-viewer) connection file
  *
  * Registered as field type 'vvFile' in ./fields.jsx and used by
- * ../config/spice.js. Fills host/port/password/title/proxy from the file and
- * reports anything it could not honour instead of dropping it silently.
+ * ../config/spice.js. Fills host/port/password/title/proxy/tls/ca/hostSubject
+ * from the file and reports anything it could not honour instead of dropping
+ * it silently.
  */
 import { useState } from 'react'
 import {

package/client/components/bookmark-form/config/spice.js

@@ -12,6 +12,9 @@ const spiceConfig = {
   initValues: (props) => {
     return createBaseInitValues(props, terminalSpiceType, {
       port: 5900,
+      tls: false,
+      ca: '',
+      hostSubject: '',
       viewOnly: false,
       scaleViewport: true,
       connectionHoppings: [],
@@ -29,6 +32,24 @@ const spiceConfig = {
         { type: 'vvFile', name: '__vv__', label: '' },
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
+        { type: 'switch', name: 'tls', label: 'TLS', valuePropName: 'checked' },
+        {
+          type: 'textarea',
+          name: 'ca',
+          label: 'CA certificate (PEM)',
+          props: {
+            autoSize: { minRows: 2, maxRows: 8 },
+            placeholder: '-----BEGIN CERTIFICATE-----'
+          }
+        },
+        {
+          type: 'input',
+          name: 'hostSubject',
+          label: 'Certificate subject',
+          props: {
+            placeholder: 'CN=pve1,O=Proxmox Virtual Environment'
+          }
+        },
         { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },
         { type: 'switch', name: 'scaleViewport', label: () => e('scaleViewport'), valuePropName: 'checked' },
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.spice) },

package/client/components/footer/cmd-history.jsx

@@ -1,9 +1,14 @@
 /**
- * cmd history trigger button with popover
+ * cmd history panel with popover
+ *
+ * The panel has two homes: the footer popover (default) and the right side
+ * panel. Which one it is in is a stored preference (store.cmdHistoryInRightPanel),
+ * so the same component renders both — `inline` drops the trigger/popover and
+ * lets the right panel's own container wrap the panel body.
  */
 
-import { useState, useEffect } from 'react'
-import { Button, Empty, Popover, Dropdown } from 'antd'
+import { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import { Button, Empty, Popover } from 'antd'
 import { auto } from 'manate/react'
 import SwitchLabel from '../common/switch'
 import { copy } from '../../common/clipboard'
@@ -14,12 +19,15 @@ import {
   UnorderedListOutlined,
   MoreOutlined,
   PlusOutlined,
-  CodeOutlined
+  CodeOutlined,
+  VerticalLeftOutlined,
+  VerticalAlignBottomOutlined
 } from '@ant-design/icons'
 import InputAutoFocus from '../common/input-auto-focus'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
 import QuickCommandCreateModal from '../quick-commands/quick-command-create-modal'
 import MultiTabRunModal from './multi-tab-run-modal'
+import { refsStatic } from '../common/ref'
 import classNames from 'classnames'
 import './cmd-history.styl'
 
@@ -27,21 +35,71 @@ const e = window.translate
 const SORT_BY_FREQ_KEY = 'electerm-cmd-history-sort-by-frequency'
 
 export default auto(function CmdHistory (props) {
+  const { store, inline } = props
   const [keyword, setKeyword] = useState('')
   const [sortByFrequency, setSortByFrequency] = useState(() => {
     return getItemJSON(SORT_BY_FREQ_KEY, false)
   })
-  // cmd of the item whose action menu is open / being acted on
-  const [menuOpenCmd, setMenuOpenCmd] = useState('')
+  // The item action menu is a part of this panel, not of the row it acts on:
+  // the row's ⋯ icon only reports which command was picked and where that row
+  // sits ({ cmd, top, rowTop }), and the panel renders the single menu for it.
+  // A menu per row cannot be closed with the panel — the popover content stops
+  // being re-rendered the moment the popover closes, so a per-row menu portaled
+  // to the body is left floating on its own.
+  const [menu, setMenu] = useState(null)
+  const panelRef = useRef(null)
+  const menuRef = useRef(null)
   const [quickCommandCmd, setQuickCommandCmd] = useState('')
   const [multiTabCmd, setMultiTabCmd] = useState('')
-  const { terminalCommandHistory } = props.store
+  // Footer mode only. The popover is controlled so that the trigger can be
+  // repurposed (open the right panel instead, when the history lives there) and
+  // so that "move back to footer" can open it again from the store.
+  const [open, setOpen] = useState(false)
+  const { terminalCommandHistory } = store
 
   useEffect(() => {
     setItemJSON(SORT_BY_FREQ_KEY, sortByFrequency)
   }, [sortByFrequency])
 
+  // "move back to footer" happens in the right panel, which cannot reach this
+  // component through props — it goes through the store, which needs a handle
+  useEffect(() => {
+    if (inline) {
+      return
+    }
+    refsStatic.add('CmdHistory', {
+      openPopover: () => setOpen(true)
+    })
+    return () => refsStatic.remove('CmdHistory')
+  }, [inline])
+
+  // The menu hangs below its row, which for the last rows would put it past the
+  // bottom of the window — the panel itself is not clipped, so lift the menu
+  // above its row instead. The layout effect runs before paint, so the
+  // correction is never visible.
+  useLayoutEffect(() => {
+    const el = menuRef.current
+    if (!el || !menu) {
+      return
+    }
+    const rect = el.getBoundingClientRect()
+    if (rect.bottom > window.innerHeight - 4) {
+      const above = menu.rowTop - rect.height
+      if (above !== menu.top) {
+        setMenu({
+          ...menu,
+          top: above
+        })
+      }
+    }
+  }, [menu])
+
+  function closeMenu () {
+    setMenu(null)
+  }
+
   function handleRunCommand (cmd) {
+    closeMenu()
     window.store.runCmdFromHistory(cmd)
   }
 
@@ -55,6 +113,7 @@ export default auto(function CmdHistory (props) {
   }
 
   function handleMenuAction (key, cmd) {
+    closeMenu()
     if (key === 'delete') {
       window.store.deleteCmdHistory(cmd)
     } else if (key === 'quickCommand') {
@@ -65,33 +124,49 @@ export default auto(function CmdHistory (props) {
     }
   }
 
-  function getMenuProps (cmd) {
-    return {
-      items: [
-        {
-          key: 'delete',
-          icon: <DeleteOutlined />,
-          label: e('del'),
-          danger: true
-        },
-        {
-          key: 'quickCommand',
-          icon: <PlusOutlined />,
-          label: e('addQuickCommands')
-        },
-        {
-          key: 'multiTab',
-          icon: <CodeOutlined />,
-          label: e('runInAllTerminals')
-        }
-      ],
-      onClick: ({ key, domEvent }) => {
-        // the menu renders in a portal but React events still bubble through
-        // the row, which would run the command
-        domEvent.stopPropagation()
-        handleMenuAction(key, cmd)
+  function getMenuItems () {
+    return [
+      {
+        key: 'delete',
+        icon: <DeleteOutlined />,
+        label: e('del'),
+        danger: true
+      },
+      {
+        key: 'quickCommand',
+        icon: <PlusOutlined />,
+        label: e('addQuickCommands')
+      },
+      {
+        key: 'multiTab',
+        icon: <CodeOutlined />,
+        label: e('runInAllTerminals')
       }
+    ]
+  }
+
+  // the ⋯ icon only reports the picked command and its position; the panel owns
+  // the menu itself
+  function handleToggleMenu (ev, cmd) {
+    // the row would otherwise run the command
+    ev.stopPropagation()
+    if (menu && menu.cmd === cmd) {
+      closeMenu()
+      return
+    }
+    const row = ev.currentTarget.closest('.cmd-history-item')
+    const panel = panelRef.current
+    if (!row || !panel) {
+      return
     }
+    const rowRect = row.getBoundingClientRect()
+    const panelTop = panel.getBoundingClientRect().top
+    setMenu({
+      cmd,
+      // below the row by default, above it when there is no room left
+      top: rowRect.bottom - panelTop,
+      rowTop: rowRect.top - panelTop
+    })
   }
 
   function filterArray (array, keyword) {
@@ -105,6 +180,45 @@ export default auto(function CmdHistory (props) {
     setKeyword(e.target.value)
   }
 
+  // The menu is anchored to its row, and rc-trigger re-aligns it on every
+  // scroll of the trigger's scrollable ancestors. The rows live in a 190px-tall
+  // scrolling list, so a wheel over the list drags an open menu along with the
+  // row — out of the popup and eventually off the screen, while the row it
+  // belongs to is long gone. Close it instead: the menu is only meaningful next
+  // to the row it was opened on.
+  function handleListScroll () {
+    if (menu) {
+      closeMenu()
+    }
+  }
+
+  // closing the popover hides the menu with it; dropping the selection too
+  // keeps it from coming back on the next open
+  function handlePopoverOpenChange (nextOpen) {
+    if (!nextOpen) {
+      closeMenu()
+      setOpen(false)
+      return
+    }
+    // While the history lives in the right panel this trigger never opens the
+    // popover: it opens and closes the right panel, exactly like the info and
+    // AI triggers do (store.toggleCmdHistoryPanel).
+    if (store.cmdHistoryInRightPanel) {
+      window.store.toggleCmdHistoryPanel()
+      return
+    }
+    setOpen(true)
+  }
+
+  // Dock the panel into the right side panel. The popover has to be closed on
+  // the way out, or it would be left behind pointing at a panel that is no
+  // longer in the footer.
+  function handleMoveToRightPanel () {
+    closeMenu()
+    setOpen(false)
+    window.store.moveCmdHistoryToRightPanel()
+  }
+
   const historyArray = (terminalCommandHistory || []).slice().reverse()
 
   let filtered = filterArray(historyArray, keyword)
@@ -129,7 +243,7 @@ export default auto(function CmdHistory (props) {
     return filtered.map((item, index) => {
       const cls = classNames(
         'cmd-history-item',
-        { 'menu-open': menuOpenCmd === item.cmd }
+        { 'menu-open': menu && menu.cmd === item.cmd }
       )
       return (
         <div
@@ -149,25 +263,80 @@ export default auto(function CmdHistory (props) {
               className='cmd-history-item-copy'
               onClick={(ev) => handleCopyCommand(item.cmd, ev)}
             />
-            <Dropdown
-              menu={getMenuProps(item.cmd)}
-              trigger={['click']}
-              onOpenChange={(open) => setMenuOpenCmd(open ? item.cmd : '')}
-            >
-              <Button
-                type='text'
-                size='small'
-                icon={<MoreOutlined />}
-                className='cmd-history-item-more'
-                onClick={(ev) => ev.stopPropagation()}
-              />
-            </Dropdown>
+            <Button
+              type='text'
+              size='small'
+              icon={<MoreOutlined />}
+              className={classNames(
+                'cmd-history-item-more',
+                { active: menu && menu.cmd === item.cmd }
+              )}
+              onClick={(ev) => handleToggleMenu(ev, item.cmd)}
+            />
           </div>
         </div>
       )
     })
   }
 
+  // the panel's own action menu: it renders inside the popover content, so it
+  // is hidden and revealed with the panel instead of outliving it
+  function renderItemMenu () {
+    if (!menu) {
+      return null
+    }
+    return (
+      <div
+        ref={menuRef}
+        className='cmd-history-item-menu'
+        style={{ top: `${menu.top}px` }}
+        onClick={ev => ev.stopPropagation()}
+      >
+        {
+          getMenuItems().map(item => (
+            <div
+              key={item.key}
+              className={classNames(
+                'cmd-history-menu-item',
+                { danger: item.danger }
+              )}
+              onClick={() => handleMenuAction(item.key, menu.cmd)}
+            >
+              <span className='cmd-history-menu-icon'>{item.icon}</span>
+              <span className='cmd-history-menu-label'>{item.label}</span>
+            </div>
+          ))
+        }
+      </div>
+    )
+  }
+
+  // The two "move" icons are mirror images and sit in the same slot: the
+  // popover offers to dock the panel into the right side panel, the docked
+  // panel offers to hand it back to the footer popover. The glyphs are antd's
+  // "align" pair — an arrow into a bar on the right, an arrow into a bar at the
+  // bottom — so each points at the edge the panel is going to.
+  // Note VerticalLeftOutlined is the one whose bar is on the right (arrow
+  // pointing right); VerticalRightOutlined is its mirror and points left.
+  function renderMoveIcon () {
+    if (inline) {
+      return (
+        <VerticalAlignBottomOutlined
+          className='cmd-history-move-icon pointer'
+          title={e('moveToFooter')}
+          onClick={() => window.store.moveCmdHistoryToFooter()}
+        />
+      )
+    }
+    return (
+      <VerticalLeftOutlined
+        className='cmd-history-move-icon pointer'
+        title={e('moveToRightPanel')}
+        onClick={handleMoveToRightPanel}
+      />
+    )
+  }
+
   function renderHeader () {
     if (!historyArray.length) {
       return null
@@ -182,17 +351,29 @@ export default auto(function CmdHistory (props) {
             label={e('sortByFrequency')}
           />
         </div>
-        <UnorderedListOutlined
-          className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
-          title={e('clear')}
-          onClick={handleClearAll}
-        />
+        <div className='cmd-history-header-actions'>
+          {renderMoveIcon()}
+          <UnorderedListOutlined
+            className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
+            title={e('clear')}
+            onClick={handleClearAll}
+          />
+        </div>
       </div>
     )
   }
 
   const content = (
-    <div className='cmd-history-popover-content pd2'>
+    <div
+      ref={panelRef}
+      className={classNames(
+        'cmd-history-popover-content',
+        inline
+          // docked: fill the right panel instead of sizing itself like a popup
+          ? 'cmd-history-in-panel'
+          : 'pd2'
+      )}
+    >
       <div className='cmd-history-search pd2b'>
         <InputAutoFocus
           value={keyword}
@@ -203,25 +384,18 @@ export default auto(function CmdHistory (props) {
         />
       </div>
       {renderHeader()}
-      <div className='cmd-history-list'>
+      <div className='cmd-history-list' onScroll={handleListScroll}>
         {renderList()}
       </div>
+      {renderItemMenu()}
     </div>
   )
 
-  return (
+  // The modals are siblings of the panel, never children of the popover: the
+  // content of a closed popover is no longer re-rendered, so a modal opened
+  // from inside one could not be closed once the popover went away.
+  const modals = (
     <>
-      <Popover
-        content={content}
-        trigger='click'
-        placement='topLeft'
-      >
-        <Button
-          size='small'
-          type='text'
-          icon={<HistoryOutlined />}
-        />
-      </Popover>
       {
         quickCommandCmd
           ? (
@@ -247,4 +421,44 @@ export default auto(function CmdHistory (props) {
       }
     </>
   )
+
+  // docked in the right side panel: no trigger, no popover — the right panel
+  // decides when this is on screen, via store.rightPanelTab
+  if (inline) {
+    if (store.rightPanelTab !== 'cmdHistory') {
+      return null
+    }
+    return (
+      <>
+        {content}
+        {modals}
+      </>
+    )
+  }
+
+  const rightPanelActive = store.rightPanelVisible &&
+    store.rightPanelTab === 'cmdHistory'
+
+  return (
+    <>
+      <Popover
+        content={content}
+        trigger='click'
+        placement='topLeft'
+        open={open}
+        onOpenChange={handlePopoverOpenChange}
+      >
+        <Button
+          size='small'
+          type='text'
+          className={classNames(
+            'cmd-history-trigger',
+            { active: rightPanelActive }
+          )}
+          icon={<HistoryOutlined />}
+        />
+      </Popover>
+      {modals}
+    </>
+  )
 })