feat: add monitoring settings tab, workbench view, and inspection alert improvements

application/state/settingsIpcSync.ts

@@ -159,13 +159,21 @@ export function useSettingsIpcSync({
   setSftpTransferConcurrencyState,
   setSshTransportIdleTtlMsState,
 }: UseSettingsIpcSyncParams) {
-  // Listen for settings changes from other windows via IPC
+  // Listen for settings changes from other windows via IPC.
+  // Preload (preload.cjs) owns the single upstream IPC listener and dispatches
+  // a `netcatty-settings-batch` CustomEvent after bulk-updating localStorage.
+  // We listen to that CustomEvent here instead of registering a second IPC
+  // listener (which would double-fire settingsGetAll + localStorage writes).
   useEffect(() => {
     if (!enabled) return;
-    const bridge = netcattyBridge.get();
-    if (!bridge?.onSettingsChanged) return;
-    const unsubscribe = bridge.onSettingsChanged((payload) => {
-      const { key, value } = payload;
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail || typeof detail !== 'object') return;
+      // 新格式: { settings: {...}, changedKeys: [...], changedEntries: {...} }
+      // 从中提取逐 key 变化信息，保持原有的逐 key 同步逻辑
+      const { changedEntries } = detail as { changedEntries?: Record<string, unknown> };
+      if (!changedEntries) return;
+      for (const [key, value] of Object.entries(changedEntries)) {
       if (
         key === STORAGE_KEY_THEME ||
         key === STORAGE_KEY_UI_THEME_LIGHT ||
@@ -174,7 +182,7 @@ export function useSettingsIpcSync({
         key === STORAGE_KEY_COLOR
       ) {
         syncAppearanceFromStorage({ key, value });
-        return;
+        continue; // 跳过当前 key 的后续检查，继续 for 循环
       }
       if (key === STORAGE_KEY_UI_LANGUAGE && typeof value === 'string') {
         const next = resolveSupportedLocale(value);
@@ -333,14 +341,10 @@ export function useSettingsIpcSync({
       if (key === STORAGE_KEY_SSH_TRANSPORT_IDLE_TTL_MS && typeof value === 'number') {
         setSshTransportIdleTtlMsState((prev) => (prev === value ? prev : value));
       }
-    });
-    return () => {
-      try {
-        unsubscribe?.();
-      } catch {
-        // ignore
-      }
+      } // end for (changedEntries)
     };
+    window.addEventListener("netcatty-settings-batch", handler);
+    return () => window.removeEventListener("netcatty-settings-batch", handler);
   }, [
     enabled,
     applyIncomingCustomKeyBindings,

application/state/useAISettingsState.ts

@@ -293,12 +293,27 @@ export function useAISettingsState() {
     const handleLocalStateChanged = (event: Event) => {
       syncFromStorageKey((event as CustomEvent<{ key?: string }>).detail?.key ?? null);
     };
+    // 远程浏览器改 AI 设置 → 主进程 broadcast → preload 更新 localStorage 并 dispatch 此事件
+    // 这里遍历 changedEntries 中所有 AI_ 开头的 key，逐个刷新 React state
+    const handleBatchSync = (event: Event) => {
+      const detail = (event as CustomEvent).detail;
+      if (!detail || typeof detail !== 'object') return;
+      const entries = detail.changedEntries as Record<string, unknown> | undefined;
+      if (!entries) return;
+      for (const key of Object.keys(entries)) {
+        if (key.startsWith('netcatty_ai_') || key.startsWith('netcatty.ai')) {
+          syncFromStorageKey(key);
+        }
+      }
+    };
 
     window.addEventListener('storage', handleStorage);
     window.addEventListener(AI_STATE_CHANGED_EVENT, handleLocalStateChanged);
+    window.addEventListener('netcatty-settings-batch', handleBatchSync);
     return () => {
       window.removeEventListener('storage', handleStorage);
       window.removeEventListener(AI_STATE_CHANGED_EVENT, handleLocalStateChanged);
+      window.removeEventListener('netcatty-settings-batch', handleBatchSync);
     };
   }, []);
 

application/state/useSettingsState.ts

@@ -2079,6 +2079,18 @@ export const useSettingsState = (options: { enableSettingsSync?: boolean; enable
     updateTerminalSetting,
   ]);
 
+  // 远程浏览器改了设置 → 主进程 broadcast → preload 更新 localStorage 并 dispatch 此事件
+  // 这里监听并全量刷新 React state，解决 useState initializer 只跑一次的问题
+  useEffect(() => {
+    const IS_REMOTE = typeof window !== "undefined" && !!(window as any).__REMOTE_TOKEN__;
+    if (IS_REMOTE) return; // 远程浏览器不通过 preload，由 VaultViewLayout 处理
+    const handler = (_e: Event) => {
+      rehydrateAllFromStorage();
+    };
+    window.addEventListener("netcatty-settings-batch", handler);
+    return () => window.removeEventListener("netcatty-settings-batch", handler);
+  }, [rehydrateAllFromStorage]);
+
   return {
     theme,
     setTheme,

application/state/useVaultState.ts

@@ -1374,7 +1374,7 @@ export const useVaultState = () => {
 
             // 并行 fetch 所有 vault 数据
             const results = await Promise.allSettled([
-              fetch(base("/api/devices")).then(r => r.json()),
+              fetch(base(`${apiBase}/hosts`)).then(r => r.json()),
               fetch(base(`${apiBase}/keys`)).then(r => r.json()),
               fetch(base(`${apiBase}/proxies`)).then(r => r.json()),
               fetch(base(`${apiBase}/port-forwards`)).then(r => r.json()),
@@ -1390,22 +1390,11 @@ export const useVaultState = () => {
                 ? (results[idx]?.value as any).data ?? (results[idx]?.value as any).devices ?? fallback
                 : fallback;
 
-            // hosts
-            const devicesData = getOk(0, []);
-            if (Array.isArray(devicesData)) {
-              const remoteHosts: Host[] = devicesData.map((d: any) => {
-                const catalogId = d.catalog_id || d.type || "";
-                return {
-                  id: d.host_id || crypto.randomUUID(),
-                  label: d.label || d.hostname || d.host_id,
-                  hostname: d.hostname || "",
-                  port: 22, username: "", tags: [], os: "linux",
-                  deviceType: /switch|firewall|router/i.test(catalogId) ? "network" : "general",
-                  distro: catalogId, distroMode: "auto",
-                } as any;
-              });
-              hostsRef.current = remoteHosts;
-              setHosts(remoteHosts);
+            // hosts（从 /api/vault/hosts 来，已脱敏无密码）
+            const hostsData = getOk(0, []);
+            if (Array.isArray(hostsData)) {
+              hostsRef.current = hostsData as Host[];
+              setHosts(hostsData as Host[]);
             }
             // keys（已被 remoteHttpServer strip 敏感字段）
             const keysData = getOk(1, []);