fix: add connecting status message and enhance browser connection handling

Author: bbbugg

ui/app/pages/StatusPage.vue

@@ -15,12 +15,7 @@
             style="position: fixed; right: 20px; bottom: 20px; z-index: 999"
         >
             <div class="floating-actions">
-                <button
-                    class="floating-btn lang-switcher"
-                    :title="t('switchLanguage')"
-                    :disabled="isBusy"
-                    @click="toggleLanguage"
-                >
+                <button class="floating-btn lang-switcher" :title="t('switchLanguage')" @click="toggleLanguage">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="24"
@@ -40,12 +35,7 @@
                         <path d="M14 18h6" />
                     </svg>
                 </button>
-                <button
-                    class="floating-btn logout-button"
-                    :title="t('logout')"
-                    :disabled="isBusy"
-                    @click="handleLogout"
-                >
+                <button class="floating-btn logout-button" :title="t('logout')" @click="handleLogout">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="24"
@@ -66,12 +56,7 @@
         </el-affix>
 
         <div class="status-container">
-            <button
-                class="desktop-btn lang-switcher"
-                :title="t('switchLanguage')"
-                :disabled="isBusy"
-                @click="toggleLanguage"
-            >
+            <button class="desktop-btn lang-switcher" :title="t('switchLanguage')" @click="toggleLanguage">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -91,7 +76,7 @@
                     <path d="M14 18h6" />
                 </svg>
             </button>
-            <button class="desktop-btn logout-button" :title="t('logout')" :disabled="isBusy" @click="handleLogout">
+            <button class="desktop-btn logout-button" :title="t('logout')" @click="handleLogout">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="24"
@@ -304,9 +289,19 @@ const apiKeySourceText = computed(() => {
     return translated === key ? state.apiKeySource : translated || state.apiKeySource;
 });
 
-const browserConnectedClass = computed(() => (state.browserConnected ? "status-ok" : "status-error"));
+const browserConnectedClass = computed(() => {
+    if (state.isSystemBusy) {
+        return "status-warning";
+    }
+    return state.browserConnected ? "status-ok" : "status-error";
+});
 
-const browserConnectedText = computed(() => (state.browserConnected ? t("running") : t("disconnected")));
+const browserConnectedText = computed(() => {
+    if (state.isSystemBusy) {
+        return t("connecting");
+    }
+    return state.browserConnected ? t("running") : t("disconnected");
+});
 
 const currentAccountName = computed(() => {
     if (state.currentAuthIndex < 0) {
@@ -735,6 +730,11 @@ pre {
     font-weight: bold;
 }
 
+.status-warning {
+    color: @warning-color;
+    font-weight: bold;
+}
+
 .status-error {
     color: @error-color;
     font-weight: bold;

ui/app/styles/variables.less

@@ -14,6 +14,7 @@
 
 // Status colors
 @success-color: #2ecc71;
+@warning-color: #f39c12;
 @error-color: #e74c3c;
 
 // Neutral colors

ui/locales/en.json

@@ -54,6 +54,7 @@
     "cancel": "Cancel",
     "confirmDelete": "Are you sure you want to delete account",
     "confirmSwitch": "Are you sure you want to switch to account",
+    "connecting": "Connecting",
     "consecutiveFailures": "Consecutive Failures",
     "currentAccount": "Current Active Account",
     "custom": "Custom",

ui/locales/zh.json

@@ -54,6 +54,7 @@
     "cancel": "取消",
     "confirmDelete": "确定要删除账号",
     "confirmSwitch": "确定要切换到账号",
+    "connecting": "连接中",
     "consecutiveFailures": "连续失败次数",
     "currentAccount": "当前活跃账号",
     "custom": "自定义",