Optimize startup flow and refresh terminal UX

Author: XiSoul

frontend/package.json

@@ -29,10 +29,10 @@
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.53.3",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.10",
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^22.19.17",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
@@ -45,9 +45,9 @@
     "postcss-nesting": "^13.0.0",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.4.1",
-    "typescript": "~5.3.0",
+    "typescript": "^5.9.3",
     "uuid": "^10.0.0",
-    "vite": "^5.0.11",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.4.19",
+    "vue-tsc": "^3.2.7"
   }
 }

frontend/src/assets/main.css

@@ -1,4 +1,4 @@
-@import 'material-symbols';
+@import 'material-symbols/outlined.css';
 
 @tailwind base;
 @tailwind components;

frontend/src/client/api/schemas.gen.ts

@@ -703,6 +703,16 @@ export const NoneBotProjectMetaSchema = {
       type: 'boolean',
       default: false
     },
+    runtime_state: {
+      title: 'Runtime State',
+      type: 'string',
+      default: 'stopped'
+    },
+    startup_duration_seconds: {
+      title: 'Startup Duration Seconds',
+      type: 'number',
+      default: 0
+    },
     use_env: {
       title: 'Use Env',
       type: 'string',

frontend/src/client/api/services.gen.ts

@@ -1,6 +1,10 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { createClient, createConfig, type Options } from '@hey-api/client-fetch'
+import {
+  createClient,
+  createConfig,
+  type Options
+} from '@hey-api/client-fetch'
 import type {
   AuthTokenV1AuthLoginPostData,
   AuthTokenV1AuthLoginPostError,
@@ -102,7 +106,7 @@ import type {
   GetDriversV1ProjectDriversGetResponse
 } from './types.gen'
 
-export const client = createClient(createConfig())
+export const client: ReturnType<typeof createClient> = createClient(createConfig())
 
 export class AuthService {
   /**

frontend/src/client/api/types.gen.ts

@@ -187,6 +187,8 @@ export type NoneBotProjectMeta = {
   discovered_plugin_dirs?: Array<string>
   builtin_plugins: Array<string>
   is_running?: boolean
+  runtime_state?: string
+  startup_duration_seconds?: number
   use_env?: string
   use_run_script?: boolean
   run_script_name?: string

frontend/src/client/init.ts

@@ -7,7 +7,13 @@ import { clearAuthToken, getAuthToken } from './auth'
 import { getErrorMessage } from './utils'
 import { useNoneBotStore, useToastStore } from '@/stores'
 import App from '@/App.vue'
-import './useMonacoWorker'
+
+type ClientRequest = Parameters<typeof client.interceptors.request.use>[0] extends (
+  request: infer T,
+  ...args: any[]
+) => any
+  ? T
+  : Request
 
 const installVuePlugins = (app: VueAPP) => {
   app.use(createPinia())
@@ -34,7 +40,7 @@ export const initWebUI = async () => {
     return
   }
 
-  client.interceptors.request.use((request) => {
+  client.interceptors.request.use((request: ClientRequest) => {
     request.headers.set('Authorization', `Bearer ${getAuthToken()}`)
     return request
   })

frontend/src/client/useMonacoWorker.ts

@@ -1,7 +1,24 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
+let monacoReady: Promise<void> | null = null
 
-self.MonacoEnvironment = {
-  getWorkerUrl: () => {
-    return './editor.worker.bundle.js'
+export const ensureMonacoWorker = async () => {
+  if (!monacoReady) {
+    monacoReady = (async () => {
+      const monaco = await import('monaco-editor/esm/vs/editor/editor.api.js')
+      const target = globalThis as typeof globalThis & {
+        MonacoEnvironment?: {
+          getWorkerUrl: () => string
+        }
+      }
+
+      if (!target.MonacoEnvironment) {
+        target.MonacoEnvironment = {
+          getWorkerUrl: () => './editor.worker.bundle.js'
+        }
+      }
+
+      void monaco
+    })()
   }
+
+  return monacoReady
 }

frontend/src/components/EditorItem.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import { editor as monacoEditor } from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { ensureMonacoWorker } from '@/client/useMonacoWorker'
 import { onMounted, ref, watch } from 'vue'
+import type { editor as MonacoEditorNamespace } from 'monaco-editor/esm/vs/editor/editor.api.js'
 
 const props = defineProps<{
   modelValue: string
-  editorOptional: Partial<monacoEditor.IStandaloneEditorConstructionOptions>
+  editorOptional: Partial<MonacoEditorNamespace.IStandaloneEditorConstructionOptions>
 }>()
 
 const emit = defineEmits<{
-  editor: [value: monacoEditor.IStandaloneCodeEditor]
+  editor: [value: MonacoEditorNamespace.IStandaloneCodeEditor]
   updateValue: [value: string]
 }>()
 
 const editorContainer = ref<HTMLDivElement>()
-let editor: monacoEditor.IStandaloneCodeEditor
+let editor: MonacoEditorNamespace.IStandaloneCodeEditor
+
+onMounted(async () => {
+  await ensureMonacoWorker()
+  const { editor: monacoEditor } = await import('monaco-editor/esm/vs/editor/editor.api.js')
 
-onMounted(() => {
   editor = monacoEditor.create(editorContainer.value!, {
     value: props.modelValue,
     ...props.editorOptional

frontend/src/components/header/BotChoose.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useNoneBotStore } from '@/stores'
+import { getRuntimeState } from '@/utils/runtimeState'
 import DrawerItem from '@/components/DrawerItem.vue'
 import CreateBotIndex from '@/components/Modals/CreateBot/CreateBotIndex.vue'
 
@@ -62,7 +63,24 @@ const drawerRef = ref<InstanceType<typeof DrawerItem> | null>(null)
             >
               选择中
             </div>
-            <div v-if="bot.is_running" class="badge badge-success text-base-100">运行中</div>
+            <div
+              class="badge"
+              :class="
+                getRuntimeState(bot) === 'running'
+                  ? 'badge-success text-base-100'
+                  : getRuntimeState(bot) === 'starting'
+                    ? 'badge-warning'
+                    : 'badge-ghost'
+              "
+            >
+              {{
+                getRuntimeState(bot) === 'running'
+                  ? '运行中'
+                  : getRuntimeState(bot) === 'starting'
+                    ? '启动中'
+                    : '未运行'
+              }}
+            </div>
           </div>
         </div>
       </div>

frontend/src/composables/useInstanceMessageCount.ts

@@ -2,6 +2,7 @@ import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue'
 import { getAuthToken } from '@/client/auth'
 import { generateURLForWebUI } from '@/client/utils'
 import type { NoneBotProjectMeta, ProcessLog } from '@/client/api'
+import { getRuntimeState } from '@/utils/runtimeState'
 
 const INSTANCE_MESSAGE_PATTERNS = [
   /"post_type"\s*:\s*"message"/i,
@@ -53,7 +54,7 @@ export const useInstanceMessageCount = (
 
   const syncMessageCount = async () => {
     const projectId = selectedBot.value?.project_id || ''
-    if (!projectId || !selectedBot.value?.is_running) {
+    if (!projectId || getRuntimeState(selectedBot.value) !== 'running') {
       messageCount.value = 0
       return
     }
@@ -77,7 +78,7 @@ export const useInstanceMessageCount = (
     clearMessagePollTimer()
     void syncMessageCount()
 
-    if (!selectedBot.value?.project_id || !selectedBot.value?.is_running) {
+    if (!selectedBot.value?.project_id || getRuntimeState(selectedBot.value) !== 'running') {
       return
     }
 
@@ -95,7 +96,7 @@ export const useInstanceMessageCount = (
   })
 
   watch(
-    computed(() => `${selectedBot.value?.project_id ?? ''}:${selectedBot.value?.is_running ? '1' : '0'}`),
+    computed(() => `${selectedBot.value?.project_id ?? ''}:${getRuntimeState(selectedBot.value)}`),
     () => {
       restartMessagePolling()
     }