@electerm/electerm-react 5.5.25 → 5.5.56

package/client/components/widgets/widgets-list.jsx

@@ -138,10 +138,18 @@ export default auto(function WidgetsList ({ activeItemId, store, onClickItem })
     )
   }
 
+  // clicking a running instance shows its detail + log in the right column
+  // (the widgets list above drills into the run form instead)
+  const onClickWidgetInstance = (instance) => {
+    window.store.selectWidgetInstance(instance)
+  }
+
   const renderInstancesSection = () => {
     return (
       <WidgetInstances
         widgetInstances={widgetInstances}
+        activeItemId={activeItemId}
+        onClickItem={onClickWidgetInstance}
       />
     )
   }

package/client/components/widgets/widgets.styl

@@ -0,0 +1,100 @@
+
+// hover popover on a running-instance row. A long path makes it wider than the
+// list column, and it then spills over the detail panel's heading, so it is
+// held to the column and wrapped instead.
+.wil-pop-info
+  max-width 220px
+  word-break break-all
+
+// widget manager: instance detail view (widget-instance-detail.jsx)
+.widget-instance-detail
+  display flex
+  flex-direction column
+  min-height 0
+  height 100%
+.wil-head
+  display flex
+  align-items center
+  justify-content space-between
+  gap 8px
+  margin-bottom 10px
+  flex-shrink 0
+.wil-head-title
+  min-width 0
+  font-size 14px
+.wil-descriptions
+  // the log is the point of this panel, so a long config list gives up room
+  // (and scrolls) instead of squeezing it: shrinkable, and allowed to go below
+  // its content height, with the pane holding a floor of its own
+  flex 0 1 auto
+  min-height 0
+  overflow auto
+  // long values (paths, URLs, keys) must wrap instead of widening the panel
+  .ant-descriptions-item-label
+    width 90px
+    white-space nowrap
+  .ant-descriptions-item-content
+    word-break break-all
+.wil-mono
+  font-family monospace
+  font-size 12px
+.wil-switch
+  margin 10px 0 6px
+  flex-shrink 0
+.wil-pane
+  flex 1
+  // a floor, so the log stays readable no matter how long the config list is
+  min-height 200px
+  overflow auto
+  padding 6px 8px
+  background var(--main-dark)
+  border 1px solid var(--main-light)
+  border-radius 4px
+  font-family monospace
+  font-size 12px
+  line-height 1.6
+.wil-line
+  display flex
+  gap 6px
+  white-space pre-wrap
+  word-break break-word
+  border-bottom 1px solid var(--main-light)
+  &:last-child
+    border-bottom 0
+.wil-time
+  flex-shrink 0
+  color var(--text-disabled)
+.wil-mark
+.wil-type
+  flex-shrink 0
+.wil-from
+  flex-shrink 0
+  color var(--text-dark)
+.wil-msg
+  min-width 0
+.wil-debug
+  color var(--text-dark)
+.wil-log
+  color var(--text)
+.wil-warn
+  color var(--warn)
+.wil-error
+  color var(--error)
+.wil-ok
+  color var(--success)
+  .wil-mark
+    color var(--success)
+.wil-fail
+  color var(--error)
+  .wil-mark
+    color var(--error)
+.wil-info
+  color var(--text-dark)
+.wil-empty
+  color var(--text-dark)
+  padding 6px 0
+.wil-path
+  flex-shrink 0
+  margin-top 6px
+  color var(--text-disabled)
+  font-size 11px

package/client/store/common.js

@@ -5,15 +5,20 @@
 import handleError from '../common/error-handler'
 import Modal from '../components/common/modal'
 import { appendMandatoryGuardrails } from '../components/ai/ai-guardrails'
+import { buildSessionMessages } from '../components/ai/ai-context'
+import { COMPRESS_SUMMARY_PROMPT } from '../components/ai/ai-auto-compress'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
   leftSidePanelWidthKey,
   leftSideBarOpenKey,
   rightSidebarWidthKey,
   rightPanelPinnedKey,
+  cmdHistoryInRightPanelKey,
+  quickCommandsInRightPanelKey,
   addPanelWidthLsKey,
   connectionMap,
   lastAiChatSessionIdKey,
+  aiAutoCompressLsKey,
   mobileBreakpoint,
   splitMap,
   settingAiId,
@@ -25,7 +30,7 @@ import { requireTermOfUse } from '../common/term-of-use'
 import { action } from 'manate'
 import uid from '../common/uid'
 import deepCopy from 'json-deep-copy'
-import { aiConfigsArr } from '../components/ai/ai-config-props'
+import { aiConfigsArr, optionalAIConfigsArr } from '../components/ai/ai-config-props'
 
 const e = window.translate
 const { assign } = Object
@@ -179,6 +184,100 @@ export default Store => {
     ls.setItem(rightPanelPinnedKey, v + '')
     window.store.rightPanelPinned = v
   }
+
+  // The cmd history panel has two homes: the footer popover (the default) and
+  // the right side panel. Which one it is in is a durable preference, persisted
+  // like the right panel pin — the footer trigger has to keep landing where the
+  // user last put the panel, or the choice would only survive until the next
+  // reload.
+  Store.prototype.setCmdHistoryInRightPanel = function (v) {
+    ls.setItem(cmdHistoryInRightPanelKey, v + '')
+    window.store.cmdHistoryInRightPanel = v
+  }
+
+  Store.prototype.openCmdHistoryPanel = function () {
+    const { store } = window
+    store.rightPanelVisible = true
+    store.rightPanelTab = 'cmdHistory'
+  }
+
+  // Same toggle contract as toggleInfoPanel/toggleAIPanel: while the history
+  // lives in the right panel, the footer trigger opens and closes it.
+  Store.prototype.toggleCmdHistoryPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'cmdHistory') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.openCmdHistoryPanel()
+  }
+
+  Store.prototype.moveCmdHistoryToRightPanel = function () {
+    const { store } = window
+    store.setCmdHistoryInRightPanel(true)
+    store.openCmdHistoryPanel()
+  }
+
+  // Hand the panel back to the footer popover and open it there: the move has
+  // to be visible, otherwise the panel just looks like it vanished.
+  Store.prototype.moveCmdHistoryToFooter = function () {
+    const { store } = window
+    store.setCmdHistoryInRightPanel(false)
+    if (store.rightPanelTab === 'cmdHistory') {
+      store.rightPanelVisible = false
+    }
+    refsStatic.get('CmdHistory')?.openPopover()
+  }
+
+  // The quick command panel has the same two homes as the cmd history one, and
+  // the same durable preference: the footer popup (the default) and the right
+  // side panel. The footer popup is not a popover but a floating box driven by
+  // store.openQuickCommandBar, so "docked" is expressed by the preference alone
+  // and the box itself decides which of its two forms to render.
+  Store.prototype.setQuickCommandsInRightPanel = function (v) {
+    ls.setItem(quickCommandsInRightPanelKey, v + '')
+    window.store.quickCommandsInRightPanel = v
+  }
+
+  Store.prototype.openQuickCommandsPanel = function () {
+    const { store } = window
+    store.rightPanelVisible = true
+    store.rightPanelTab = 'quickCommands'
+  }
+
+  // Same toggle contract as toggleInfoPanel/toggleAIPanel/toggleCmdHistoryPanel:
+  // while the panel lives in the right panel, the footer Q opens and closes it.
+  Store.prototype.toggleQuickCommandsPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'quickCommands') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.openQuickCommandsPanel()
+  }
+
+  Store.prototype.moveQuickCommandsToRightPanel = function () {
+    const { store } = window
+    store.setQuickCommandsInRightPanel(true)
+    // the footer box would otherwise be left floating over a terminal it no
+    // longer owns; the pin is deliberately kept, so handing the panel back
+    // restores the exact shape it had before
+    store.openQuickCommandBar = false
+    store.openQuickCommandsPanel()
+  }
+
+  // Hand the panel back to the footer and open it there: the move has to be
+  // visible, otherwise the panel just looks like it vanished. A pin that was
+  // left on while docked brings the box back pinned, which is what the user
+  // last asked for.
+  Store.prototype.moveQuickCommandsToFooter = function () {
+    const { store } = window
+    store.setQuickCommandsInRightPanel(false)
+    if (store.rightPanelTab === 'quickCommands') {
+      store.rightPanelVisible = false
+    }
+    store.openQuickCommandBar = true
+  }
   Store.prototype.beforeExit = function (evt) {
     const { confirmBeforeExit } = window.store.config
     if (
@@ -347,13 +446,33 @@ export default Store => {
     })
   }
 
+  // Update one entry immutably. Both halves matter:
+  // - the store only notifies subscribers on a property write, so mutating the
+  //   entry in place leaves the panel rendering what it already had;
+  // - the transcript is memo()'d per entry, and a memo() comparison of an entry
+  //   that was mutated in place compares the object with itself, so React can
+  //   never see the change and the entry stops updating.
+  Store.prototype.updateAiHistoryEntry = function (id, updates) {
+    const { aiChatHistory } = window.store
+    const index = aiChatHistory.findIndex(d => d.id === id)
+    if (index === -1) {
+      return
+    }
+    const next = [...aiChatHistory]
+    next[index] = { ...next[index], ...updates }
+    window.store.aiChatHistory = next
+  }
+
   Store.prototype.removeAiHistory = function (id) {
     const { store } = window
     const index = store.aiChatHistory.findIndex(d => d.id === id)
     if (index === -1) {
       return
     }
-    window.store.aiChatHistory.splice(index, 1)
+    // Reassign instead of splice: the store only notifies subscribers on a
+    // property write, so an in-place mutation leaves the panel rendering the
+    // list it already had.
+    window.store.aiChatHistory = store.aiChatHistory.filter(d => d.id !== id)
   }
 
   Store.prototype.startNewChat = action(function () {
@@ -386,8 +505,17 @@ export default Store => {
     store.startNewChat()
   })
 
+  // One compression per session at a time. The placeholder entry is published
+  // before the summary arrives, so a second call (auto compress firing while a
+  // manual one is still waiting on the provider) would summarize the
+  // placeholder and append a second one.
+  const compressingSessions = new Set()
+
   Store.prototype.compressChatSession = async function (sessionId) {
     const { store } = window
+    if (!sessionId || compressingSessions.has(sessionId)) {
+      return
+    }
     const sessionEntries = store.aiChatHistory
       .filter(h => h.chatSessionId === sessionId)
       .sort((a, b) => a.timestamp - b.timestamp)
@@ -411,60 +539,27 @@ export default Store => {
 
     const firstEntry = sessionEntries[0]
     const lang = firstEntry.languageAI || store.getLangName()
-    const messages = [
-      { role: 'system', content: appendMandatoryGuardrails(firstEntry.roleAI + `;用[${lang}]回复`) }
-    ]
-
-    // Start from the last compress entry to include its summary as context
-    const startIndex = lastCompressIndex >= 0 ? lastCompressIndex : 0
-    for (let i = startIndex; i < sessionEntries.length; i++) {
-      const entry = sessionEntries[i]
-      if (entry.compressed) {
-        messages.push({
-          role: 'user',
-          content: `Here is a summary of our previous conversation for context:\n\n${entry.response}`
-        })
-        messages.push({
-          role: 'assistant',
-          content: 'Understood. I will use this context as we continue.'
-        })
-      } else {
-        messages.push({
-          role: 'user',
-          content: entry.promptWithAttachments || entry.prompt
-        })
-        if (entry.response) {
-          messages.push({ role: 'assistant', content: entry.response })
-        }
-      }
-    }
-
-    const summaryPrompt = 'Please summarize the above conversation concisely. Include key information, decisions, context, and any important details that would be needed to continue this conversation effectively.'
-    messages.push({ role: 'user', content: summaryPrompt })
+    // Same message list the chat turn would send (including the response of
+    // every entry), so the summary describes the conversation the model
+    // actually saw.
+    const messages = buildSessionMessages({
+      history: store.aiChatHistory,
+      chatSessionId: sessionId,
+      role: appendMandatoryGuardrails(firstEntry.roleAI + `;用[${lang}]回复`)
+    })
 
-    const aiResponse = await window.pre.runGlobalAsync(
-      'AIchat',
-      summaryPrompt,
-      firstEntry.modelAI,
-      firstEntry.roleAI,
-      firstEntry.baseURLAI,
-      firstEntry.apiPathAI,
-      firstEntry.apiKeyAI,
-      firstEntry.proxyAI,
-      false,
-      firstEntry.authHeaderNameAI,
-      messages
-    )
+    // The same closing request the agent loop's auto compression sends (see
+    // components/ai/ai-compress.js), so both paths summarize alike.
+    messages.push({ role: 'user', content: COMPRESS_SUMMARY_PROMPT })
 
-    if (aiResponse && aiResponse.error) {
-      return store.onError(new Error(aiResponse.error))
-    }
-
-    const summary = aiResponse.response || ''
+    // Show the entry before asking for the summary, and fill it in when the
+    // answer arrives. The request takes as long as any other AI request (much
+    // longer for a nearly full session), and a click that changes nothing on
+    // screen for that long reads as "compress did not work".
     const compressedEntry = {
       id: uid(),
       prompt: '*Compressed session summary*',
-      response: summary,
+      response: '*Summarizing the session…*',
       isStreaming: false,
       pending: false,
       sessionId: null,
@@ -484,10 +579,59 @@ export default Store => {
       compressed: true
     }
 
-    // Append compress entry, preserve existing history
-    store.aiChatHistory.push(compressedEntry)
+    // Append compress entry, preserve existing history. Reassign rather than
+    // push for the same reason as removeAiHistory -- the panel has to see the
+    // new context size, which is the whole point of compressing.
+    store.aiChatHistory = [...store.aiChatHistory, compressedEntry]
+    compressingSessions.add(sessionId)
+
+    // Anything short of a usable summary takes the placeholder away again: an
+    // empty summary must never replace the conversation, and a half finished
+    // one must not look like a result.
+    const fail = (msg) => {
+      store.removeAiHistory(compressedEntry.id)
+      return store.onError(new Error(msg))
+    }
+
+    try {
+      const aiResponse = await window.pre.runGlobalAsync(
+        'AIchat',
+        COMPRESS_SUMMARY_PROMPT,
+        firstEntry.modelAI,
+        firstEntry.roleAI,
+        firstEntry.baseURLAI,
+        firstEntry.apiPathAI,
+        firstEntry.apiKeyAI,
+        firstEntry.proxyAI,
+        false,
+        firstEntry.authHeaderNameAI,
+        messages
+      )
+
+      if (aiResponse && aiResponse.error) {
+        return fail(aiResponse.error)
+      }
+
+      const summary = (aiResponse && aiResponse.response) || ''
+      if (!summary.trim()) {
+        return fail('Compression failed: empty summary from AI')
+      }
+      store.updateAiHistoryEntry(compressedEntry.id, { response: summary })
+    } finally {
+      compressingSessions.delete(sessionId)
+    }
   }
 
+  // Auto compression, both modes: ask turns and the agent loop read this flag
+  // before every request (see components/ai/ai-compress.js), and the panel's
+  // auto compress popover writes it. Persisted so the choice survives a reload.
+  Store.prototype.setAiAutoCompress = action(function (val) {
+    const { store } = window
+    const on = !!val
+    store.aiAutoCompress = on
+    ls.setItem(aiAutoCompressLsKey, on ? 'true' : 'false')
+  })
+
   Store.prototype.toggleChatSessions = action(function () {
     const { store } = window
     store.showChatSessions = !store.showChatSessions
@@ -566,7 +710,9 @@ export default Store => {
   }
 
   Store.prototype.aiConfigMissing = function () {
-    return aiConfigsArr.filter(k => k !== 'apiKeyAI' && k !== 'proxyAI' && k !== 'nameAI').some(k => !window.store.config[k])
+    return aiConfigsArr
+      .filter(k => !optionalAIConfigsArr.includes(k))
+      .some(k => !window.store.config[k])
   }
 
   Store.prototype.clearHistory = function () {

package/client/store/init-state.js

@@ -19,12 +19,15 @@ import {
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
   rightPanelPinnedKey,
+  cmdHistoryInRightPanelKey,
+  quickCommandsInRightPanelKey,
   addPanelWidthLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
   syncServerDataKey,
   splitMap,
   lastAiChatSessionIdKey,
+  aiAutoCompressLsKey,
   mobileBreakpoint
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
@@ -95,6 +98,14 @@ export default () => {
     _batchInputSelectedTabIds: new Set(),
     aiChatHistory: [],
     agentRunning: false,
+    // ask turns and the agent loop compact their conversation when the window
+    // gets full; persisted here so the toggle survives a reload
+    // (see components/ai/ai-compress.js)
+    aiAutoCompress: ls.getItem(aiAutoCompressLsKey) === 'true',
+    // live context accounting while an agent loop is running: the agent
+    // carries tool schemas and tool results that the session history does
+    // not, so it publishes its own figure here (see components/ai/agent.js)
+    aiContextInfo: null,
     currentChatSessionId: window.localStorage.getItem(lastAiChatSessionIdKey) || '',
     showChatSessions: false,
 
@@ -127,6 +138,8 @@ export default () => {
     rightPanelVisible: false,
     rightPanelTab: 'info',
     rightPanelPinned: ls.getItem(rightPanelPinnedKey) === 'true',
+    cmdHistoryInRightPanel: ls.getItem(cmdHistoryInRightPanelKey) === 'true',
+    quickCommandsInRightPanel: ls.getItem(quickCommandsInRightPanelKey) === 'true',
     _rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     showAIConfigModal: false,
 
@@ -212,6 +225,8 @@ export default () => {
     exePath: '',
     isPortable: false,
     installSrc: '',
+    // where running widgets write their logs, from the main process
+    widgetLogPath: '',
     showSshConfigModal: false,
 
     // batch inputs

package/client/store/load-data.js

@@ -14,6 +14,10 @@ import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'
 import { parseQuickConnect } from '../common/parse-quick-connect'
+import message from '../components/common/message'
+import fs from '../common/fs'
+import { parseVv, describeVv } from '../common/parse-vv'
+import { vvToTab } from '../common/vv-to-tab'
 
 function getHost (argv, opts) {
   const arr = argv
@@ -35,6 +39,56 @@ function getHost (argv, opts) {
   return {}
 }
 
+/**
+ * Open a .vv (virt-viewer) connection file as a new Spice session.
+ *
+ * Used when electerm is handed a file from outside:
+ *   electerm /path/to/console.vv
+ *
+ * This opens a session, it does not import a bookmark. For a Proxmox file that
+ * is the only shape that can work at all: the signed proxy ticket it carries is
+ * refused by the node's :3128 daemon once it is more than about 40 seconds old,
+ * so a bookmark saved from one could never connect.
+ *
+ * The parse itself is shared with the bookmark form's "Load .vv file" button --
+ * src/client/common/parse-vv.js is the single implementation.
+ *
+ * @param {Object} store
+ * @param {string} filePath - absolute path, resolved in the main process
+ * @returns {Promise<Object|null>} the parse result, or null on failure
+ */
+export async function openVvFile (store, filePath) {
+  console.debug('opening .vv file', filePath)
+  let text
+  try {
+    // fs.readFile resolves the file as a utf8 string (src/app/lib/fs.js)
+    text = await fs.readFile(filePath)
+  } catch (err) {
+    message.error('cannot read ' + filePath + ': ' + err.message)
+    return null
+  }
+  const parsed = parseVv(text)
+  if (!parsed.ok) {
+    message.error(describeVv(parsed) + ' (' + filePath + ')')
+    return null
+  }
+  const tab = vvToTab(parsed, { filePath })
+  console.debug('.vv file -> tab', tab)
+  // A file that did not come from a person clicking through a form gets no
+  // chance to read a hint, so anything dropped from it has to be said out loud.
+  if (parsed.warnings.length) {
+    console.debug('.vv warnings', parsed.warnings)
+  }
+  if (parsed.ignored.length) {
+    message.warning(
+      parsed.ignored.length + ' option(s) in this .vv were skipped: ' +
+        parsed.ignored.map(d => d.key).join(', ')
+    )
+  }
+  store.ipcOpenTab(tab)
+  return parsed
+}
+
 export async function addTabFromCommandLine (store, opts) {
   console.debug('command line params', opts)
   if (!opts) {
@@ -52,6 +106,12 @@ export async function addTabFromCommandLine (store, opts) {
   if (isHelp) {
     return store.openAbout(infoTabs.cmd)
   }
+  // A .vv connection file, e.g. `electerm /path/to/console.vv`.
+  // Checked before the protocol-URL scan below because the two cannot overlap:
+  // a path ending in .vv never matches a `scheme://` prefix.
+  if (opts.vvFile) {
+    return openVvFile(store, opts.vvFile)
+  }
   // Check if argv contains a protocol URL (e.g., ssh://user@host)
   // and use parseQuickConnect for proper parsing
   if (argv && argv.length) {
@@ -216,6 +276,7 @@ export default (Store) => {
     store.appPath = globs.appPath
     store.exePath = globs.exePath
     store.isPortable = globs.isPortable
+    store.widgetLogPath = globs.widgetLogPath || ''
     store._config = globs.config
     window.et.langs = globs.langs
     store.zoom(store.config.zoom, false, true)
@@ -297,6 +358,18 @@ export default (Store) => {
       window.store.ipcOpenTab(pending)
     }
   }
+  /**
+   * A .vv file that arrived before the window existed -- macOS delivers
+   * 'open-file' during launch, so a cold double-click always lands here. The
+   * payload is the same shape initCommandLine() returns, so it goes through the
+   * same entry point as `electerm /path/to/console.vv`.
+   */
+  Store.prototype.checkPendingVvFile = async function () {
+    const pending = await window.pre.runGlobalAsync('getPendingVvFile')
+    if (pending) {
+      addTabFromCommandLine(window.store, pending)
+    }
+  }
   Store.prototype.parseQuickConnect = function (url) {
     return parseQuickConnect(url)
   }

package/client/store/store.js

@@ -145,6 +145,12 @@ class Store {
     if (rightPanelTab === 'ai') {
       return getBrand(baseURLAI).brand || 'Custom AI Model'
     }
+    if (rightPanelTab === 'cmdHistory') {
+      return window.translate('cmdHistory')
+    }
+    if (rightPanelTab === 'quickCommands') {
+      return window.translate('quickCommands')
+    }
     return createTitle(window.store.currentTab)
   }
 

package/client/store/watch.js

@@ -151,7 +151,9 @@ export default store => {
       window.pre.runGlobalAsync('setTitle', title)
       window.store.currentLayoutBatch = tab.batch
     }
-    if (tab && store.rightPanelVisible) {
+    // refreshing the info panel on tab switch only concerns the info tab: the
+    // right panel can also be showing the AI chat or the cmd history
+    if (tab && store.rightPanelVisible && store.rightPanelTab === 'info') {
       window.store.openInfoPanelAction()
     }
     return store.activeTabId

package/client/store/widgets.js

@@ -4,7 +4,8 @@
 
 import message from '../components/common/message'
 import {
-  settingMap
+  settingMap,
+  settingPanelMobileBreakpoint
 } from '../common/constants'
 import getInitItem from '../common/init-setting-item'
 import deepCopy from 'json-deep-copy'
@@ -27,12 +28,28 @@ export default Store => {
     const {
       widgetInstances
     } = window.store
-    const index = widgetInstances.findIndex(w => w.id === instanceId)
-    if (index > -1) {
-      widgetInstances.splice(index, 1)
+    // assigned, not spliced: an in-place mutation fires no subscriber, and the
+    // instance list, the sidebar badge and the detail panel all read this array
+    window.store.widgetInstances = widgetInstances.filter(w => w.id !== instanceId)
+  }
+
+  // Selecting a running instance in the widgets list shows its detail + log in
+  // the right column, the same way selecting a widget shows its run form.
+  Store.prototype.selectWidgetInstance = (instance) => {
+    const { store } = window
+    store.setSettingItem(instance)
+    // narrow panels drill into the right col content after picking an instance
+    if (window.store.innerWidth <= settingPanelMobileBreakpoint) {
+      window.store.settingMobileView = 'content'
     }
   }
 
+  // back to the widget form — used when the instance being viewed is gone
+  Store.prototype.closeWidgetInstance = () => {
+    const { store } = window
+    store.setSettingItem(getInitItem([], settingMap.widgets))
+  }
+
   Store.prototype.stopWidget = async (instanceId) => {
     const {
       store
@@ -102,10 +119,11 @@ export default Store => {
             widgetId: result.widgetId,
             serverInfo: result.serverInfo,
             config: item.config,
+            startedAt: Date.now(),
             autoRun: true,
             autoRunId: item.id
           }
-          store.widgetInstances.push(instance)
+          store.widgetInstances = [...store.widgetInstances, instance]
         }
       } catch (err) {
         console.error(`Failed to autorun widget ${item.widgetId}:`, err)