fix(frontend): Trigger VSCode URL query only when runtime is active (#5622)

frontend/src/components/features/file-explorer/file-explorer.tsx

@@ -15,6 +15,10 @@ import { FileExplorerHeader } from "./file-explorer-header";
 import { useVSCodeUrl } from "#/hooks/query/use-vscode-url";
 import { OpenVSCodeButton } from "#/components/shared/buttons/open-vscode-button";
 import { addAssistantMessage } from "#/state/chat-slice";
+import {
+  useWsClient,
+  WsClientProviderStatus,
+} from "#/context/ws-client-provider";
 
 interface FileExplorerProps {
   isOpen: boolean;
@@ -22,6 +26,7 @@ interface FileExplorerProps {
 }
 
 export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
+  const { status } = useWsClient();
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -30,12 +35,11 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
 
   const { curAgentState } = useSelector((state: RootState) => state.agent);
 
-  const agentIsReady =
-    curAgentState !== AgentState.INIT && curAgentState !== AgentState.LOADING;
-
   const { data: paths, refetch, error } = useListFiles();
   const { mutate: uploadFiles } = useUploadFiles();
-  const { data: vscodeUrl } = useVSCodeUrl({ enabled: agentIsReady });
+  const { data: vscodeUrl } = useVSCodeUrl({
+    enabled: status === WsClientProviderStatus.ACTIVE,
+  });
 
   const handleOpenVSCode = () => {
     if (vscodeUrl?.vscode_url) {
@@ -166,7 +170,7 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
           {isOpen && (
             <OpenVSCodeButton
               onClick={handleOpenVSCode}
-              isDisabled={!agentIsReady}
+              isDisabled={status === WsClientProviderStatus.OPENING}
             />
           )}
         </div>

frontend/src/context/ws-client-provider.tsx

@@ -4,7 +4,6 @@ import { io, Socket } from "socket.io-client";
 import { Settings } from "#/services/settings";
 import ActionType from "#/types/action-type";
 import EventLogger from "#/utils/event-logger";
-import AgentState from "#/types/agent-state";
 import { handleAssistantMessage } from "#/services/actions";
 import { useRate } from "#/hooks/use-rate";
 
@@ -102,10 +101,7 @@ export function WsClientProvider({
     if (!Number.isNaN(parseInt(event.id as string, 10))) {
       lastEventRef.current = event;
     }
-    const extras = event.extras as Record<string, unknown>;
-    if (extras?.agent_state === AgentState.INIT) {
-      setStatus(WsClientProviderStatus.ACTIVE);
-    }
+
     if (
       status !== WsClientProviderStatus.ACTIVE &&
       event?.observation === "error"
@@ -114,6 +110,10 @@ export function WsClientProvider({
       return;
     }
 
+    if (status !== WsClientProviderStatus.ACTIVE) {
+      setStatus(WsClientProviderStatus.ACTIVE);
+    }
+
     if (!event.token) {
       handleAssistantMessage(event);
     }