🤖 feat: add OpenAI WebSocket transport opt-in

flake.nix

@@ -83,7 +83,7 @@
 
             outputHashMode = "recursive";
             # Marker used by scripts/update_flake_hash.sh to update this hash in place.
-            outputHash = "sha256-nSkVmS55SWfLbUIscBGMzgR2su6vIlE9GcSRDLrn4eI="; # mux-offline-cache-hash
+            outputHash = "sha256-jHp/RsmtwHKsbrD0b86+nb+XQ75pT5y1tEeltT6hDVQ="; # mux-offline-cache-hash
           };
 
           configurePhase = ''

package.json

@@ -88,6 +88,7 @@
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@vercel/ai-sdk-openai-websocket-fetch": "^1.0.0",
     "@xterm/addon-serialize": "^0.14.0",
     "@xterm/headless": "^6.0.0",
     "ai": "^6.0.72",

src/browser/features/Settings/Sections/ProvidersSection.test.tsx

@@ -150,19 +150,35 @@ function patchProviderMethods(client: APIClient, providersConfig: ProvidersConfi
     delete providersConfig[input.provider];
     return Promise.resolve({ success: true as const, data: undefined });
   });
+  const setProviderConfig = mock<APIClient["providers"]["setProviderConfig"]>((input) => {
+    const provider = providersConfig[input.provider];
+    if (provider) {
+      const key = input.keyPath[0] as keyof ProviderConfigInfo | undefined;
+      if (key) {
+        if (input.value === "") {
+          delete provider[key];
+        } else {
+          Object.assign(provider, { [key]: input.value });
+        }
+      }
+    }
+    return Promise.resolve({ success: true as const, data: undefined });
+  });
   const onConfigChanged = mock(() => Promise.resolve(emptyConfigChangeIterator()));
 
   Object.assign(client.providers, {
     getConfig,
     addCustomOpenAICompatibleProvider,
     removeCustomProvider,
+    setProviderConfig,
     onConfigChanged,
   });
 
   return {
     addCustomOpenAICompatibleProvider,
     getConfig,
     removeCustomProvider,
+    setProviderConfig,
   };
 }
 
@@ -318,6 +334,108 @@ describe("ProvidersSection", () => {
     ).toBeTruthy();
   });
 
+  test("shows and persists the OpenAI WebSocket transport toggle", async () => {
+    const view = renderProvidersSection();
+    const openAiButton = await view.findByRole("button", { name: /^OpenAI$/ });
+
+    fireEvent.click(openAiButton);
+
+    const openAiCard = getProviderCard(openAiButton);
+    const webSocketToggle = within(openAiCard).getByRole("switch", {
+      name: /WebSocket transport/i,
+    });
+    expect(webSocketToggle).toBeTruthy();
+
+    fireEvent.click(webSocketToggle);
+
+    await waitFor(() => {
+      expect(view.setProviderConfig).toHaveBeenCalledWith({
+        provider: "openai",
+        keyPath: ["webSocketTransportEnabled"],
+        value: true,
+      });
+    });
+  });
+
+  test("clears the OpenAI WebSocket transport preference when toggled off", async () => {
+    const view = renderProvidersSection();
+    view.providersConfig.openai.webSocketTransportEnabled = true;
+    const openAiButton = await view.findByRole("button", { name: /^OpenAI$/ });
+
+    fireEvent.click(openAiButton);
+
+    const openAiCard = getProviderCard(openAiButton);
+    const webSocketToggle = within(openAiCard).getByRole("switch", {
+      name: /WebSocket transport/i,
+    });
+
+    fireEvent.click(webSocketToggle);
+
+    await waitFor(() => {
+      expect(view.setProviderConfig).toHaveBeenCalledWith({
+        provider: "openai",
+        keyPath: ["webSocketTransportEnabled"],
+        value: "",
+      });
+    });
+  });
+
+  test("hides the OpenAI WebSocket transport toggle when Codex OAuth is the active default", async () => {
+    const view = renderProvidersSection();
+    view.providersConfig.openai.codexOauthSet = true;
+    view.providersConfig.openai.apiKeySet = false;
+    view.providersConfig.openai.webSocketTransportEnabled = true;
+    const openAiButton = await view.findByRole("button", { name: /^OpenAI$/ });
+
+    fireEvent.click(openAiButton);
+
+    const openAiCard = getProviderCard(openAiButton);
+    expect(
+      within(openAiCard).queryByRole("switch", {
+        name: /WebSocket transport/i,
+      })
+    ).toBeNull();
+    expect(view.providersConfig.openai.webSocketTransportEnabled).toBe(true);
+  });
+
+  test("hides the OpenAI WebSocket transport toggle when OpenAI uses a custom base URL", async () => {
+    const view = renderProvidersSection();
+    view.providersConfig.openai.baseUrl = "https://proxy.openai.test/v1";
+    view.providersConfig.openai.webSocketTransportEnabled = true;
+    const openAiButton = await view.findByRole("button", { name: /^OpenAI$/ });
+
+    fireEvent.click(openAiButton);
+
+    const openAiCard = getProviderCard(openAiButton);
+    expect(
+      within(openAiCard).queryByRole("switch", {
+        name: /WebSocket transport/i,
+      })
+    ).toBeNull();
+    expect(view.providersConfig.openai.webSocketTransportEnabled).toBe(true);
+  });
+
+  test("hides the OpenAI WebSocket transport toggle for Chat Completions without clearing it", async () => {
+    const view = renderProvidersSection();
+    view.providersConfig.openai.wireFormat = "chatCompletions";
+    view.providersConfig.openai.webSocketTransportEnabled = true;
+    const openAiButton = await view.findByRole("button", { name: /^OpenAI$/ });
+
+    fireEvent.click(openAiButton);
+
+    const openAiCard = getProviderCard(openAiButton);
+    expect(
+      within(openAiCard).queryByRole("switch", {
+        name: /WebSocket transport/i,
+      })
+    ).toBeNull();
+    expect(within(openAiCard).queryByText("WebSocket transport")).toBeNull();
+    expect(view.providersConfig.openai.webSocketTransportEnabled).toBe(true);
+    expect(view.setProviderConfig).not.toHaveBeenCalledWith(
+      expect.objectContaining({ keyPath: ["webSocketTransportEnabled"], value: "" })
+    );
+  });
+
   test("shows remove only for expanded custom provider cards", async () => {
     const view = renderProvidersSection();
     const customButton = await view.findByRole("button", { name: /Acme OpenAI/ });