🐛 fix(webview): prevent message dedupe drops on page re-entry

Author: littleCareless

src/services/webview/handlers/settings-view-message-handler.ts

@@ -118,8 +118,15 @@ export class SettingsViewMessageHandler {
       return;
     }
 
+    const dataRequestId =
+      message?.data && typeof message.data === "object"
+        ? message.data.requestId
+        : undefined;
     const messageId =
-      message.messageId || `${message.command}_${JSON.stringify(message.data)}`;
+      message.messageId ||
+      message.requestId ||
+      dataRequestId ||
+      `${message.command}_${Date.now()}_${Math.random().toString(16).slice(2)}`;
 
     try {
       await this._sessionManager.withIdempotency(messageId, async () => {

webview-ui/src/components/settings/ModelCatalogViewer.tsx

@@ -24,12 +24,6 @@ export const ModelCatalogViewer: React.FC = () => {
   const [catalogSourceFilter, setCatalogSourceFilter] = useState("all");
 
   useEffect(() => {
-    postMessage(
-      UIRequest.FeaturesGetModelCatalog,
-      {},
-      { allowDuplicate: true },
-    );
-
     const handleMessage = (event: MessageEvent) => {
       const message = event.data;
       if (message.command === ExtensionResponse.FeaturesModelCatalogSynced) {
@@ -60,6 +54,11 @@ export const ModelCatalogViewer: React.FC = () => {
     };
 
     window.addEventListener("message", handleMessage);
+    postMessage(
+      UIRequest.FeaturesGetModelCatalog,
+      {},
+      { allowDuplicate: true },
+    );
     return () => window.removeEventListener("message", handleMessage);
   }, [t]);
 

webview-ui/src/components/welcome/SetupWizard.tsx

@@ -211,16 +211,14 @@ const SetupWizard = ({
       type: selectedProviderMeta?.type,
     };
 
-    postMessage("upsertApiConfiguration", {
-      text: currentApiConfigName,
-      apiConfiguration: finalConfig,
-    });
+    let finished = false;
 
     // 监听响应并处理
     const handleMessage = (event: MessageEvent) => {
       const message = event.data;
       if (message.command === "apiConfiguration.upserted") {
         window.removeEventListener("message", handleMessage);
+        finished = true;
 
         if (message.data?.success) {
           console.log("[SetupWizard] API configuration upserted successfully");
@@ -250,13 +248,19 @@ const SetupWizard = ({
 
     window.addEventListener("message", handleMessage);
 
+    postMessage("upsertApiConfiguration", {
+      text: currentApiConfigName,
+      apiConfiguration: finalConfig,
+    });
+
     // 超时处理
     setTimeout(() => {
-      window.removeEventListener("message", handleMessage);
-      if (isLoading) {
-        setError(t("errors.requestTimeout"));
-        setIsLoading(false);
+      if (finished) {
+        return;
       }
+      window.removeEventListener("message", handleMessage);
+      setError(t("errors.requestTimeout"));
+      setIsLoading(false);
     }, 10000);
   }, [
     apiConfiguration,
@@ -265,7 +269,6 @@ const SetupWizard = ({
     selectedProviderId,
     selectedProviderMeta,
     isFirstInstall,
-    isLoading,
     t,
   ]);
 

webview-ui/src/hooks/use-vscode-message.ts

@@ -1,10 +1,11 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 
 export function useVSCodeMessage<T = unknown>(
   command: string,
   handler: (payload: T) => void,
 ) {
-  useEffect(() => {
+  // Use layout effect so listeners are ready before mount-time fetch effects.
+  useLayoutEffect(() => {
     const messageHandler = (event: MessageEvent) => {
       if (event.data.command === command) {
         handler(event.data as T);

webview-ui/src/pages/settings/FeaturesSettings.tsx

@@ -88,8 +88,6 @@ export const FeaturesSettings: React.FC = () => {
   useEffect(() => {
     if (hasLoadedRef.current) return;
     hasLoadedRef.current = true;
-    postMessage(UIRequest.FeaturesLoadSettings);
-
     const handleMessage = (event: MessageEvent) => {
       const message = event.data;
       if (
@@ -125,11 +123,12 @@ export const FeaturesSettings: React.FC = () => {
     };
 
     window.addEventListener("message", handleMessage);
+    postMessage(UIRequest.FeaturesLoadSettings);
     return () => {
       window.removeEventListener("message", handleMessage);
       hasLoadedRef.current = false;
     };
-  }, []);
+  }, [t]);
 
   const handleFeatureToggle = (
     feature: keyof typeof features,

webview-ui/src/pages/usage-page.tsx

@@ -21,13 +21,10 @@ export const UsagePage: React.FC = () => {
   const [detailedStats, setDetailedStats] = useState<DailyUsageStats[]>([]);
 
   const fetchUsageStats = () => {
-    postMessage(UIRequest.UsageGetStats, {});
+    // Usage 页面需要支持重复进入时重新拉取，避免被消息去重拦截
+    postMessage(UIRequest.UsageGetStats, {}, { allowDuplicate: true });
   };
 
-  useEffect(() => {
-    fetchUsageStats();
-  }, []);
-
   useEvent("message", (event: MessageEvent) => {
     const message = event.data;
     if (message.command === ExtensionResponse.UsageStatsLoaded) {
@@ -37,8 +34,12 @@ export const UsagePage: React.FC = () => {
     }
   });
 
+  useEffect(() => {
+    fetchUsageStats();
+  }, []);
+
   const handleReset = () => {
-    postMessage(UIRequest.UsageResetStats, {});
+    postMessage(UIRequest.UsageResetStats, {}, { allowDuplicate: true });
   };
 
   // Prepare data for lists

webview-ui/src/utils/vscode.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useLayoutEffect } from "react";
 import { ExtensionResponse, UIRequest } from "@shared/types/messages";
 
 declare const acquireVsCodeApi: () => {
@@ -47,12 +47,11 @@ export function postMessage(
 ) {
   const now = Date.now();
   const { allowDuplicate = false, requestId } = options ?? {};
-  const providedMessageId = options?.messageId;
+  // Always provide a unique messageId so backend idempotency won't treat
+  // independent requests as duplicates across page re-entry/navigation.
   const messageId =
-    providedMessageId ??
-    (allowDuplicate
-      ? `${command}-${now}-${Math.random().toString(16).slice(2)}`
-      : undefined);
+    options?.messageId ??
+    `${command}-${now}-${Math.random().toString(16).slice(2)}`;
   if (
     !allowDuplicate &&
     lastMessage &&
@@ -95,7 +94,8 @@ export function useMessageHandler(
     [messageCallback],
   );
 
-  useEffect(() => {
+  // Register as early as possible to avoid missing fast extension responses.
+  useLayoutEffect(() => {
     window.addEventListener("message", memoizedCallback);
     return () => {
       window.removeEventListener("message", memoizedCallback);