🤖 fix: subscribe to provider config changes for instant UI updates

Settings UI now reacts immediately when API keys or base URLs are saved.

Changes:
- Add useProvidersConfig hook that subscribes to backend onConfigChanged events
- ProvidersSection/ModelsSection use hook instead of manual refresh
- ChatInput subscribes to config changes for OpenAI key status

Previously the UI would only update after manual refresh or component remount.
Now changes propagate instantly via the existing oRPC subscription mechanism.

_Generated with `mux`_

Author: ibetitsmike

src/browser/components/ChatInput/index.tsx

@@ -413,25 +413,40 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   }, [api]);
 
   // Check if OpenAI API key is configured (for voice input)
+  // Subscribe to config changes so key status updates immediately when set in Settings
   useEffect(() => {
-    let isMounted = true;
+    if (!api) return;
+    const abortController = new AbortController();
+    const signal = abortController.signal;
 
     const checkOpenAIKey = async () => {
       try {
-        const config = await api?.providers.getConfig();
-        if (isMounted) {
+        const config = await api.providers.getConfig();
+        if (!signal.aborted) {
           setOpenAIKeySet(config?.openai?.apiKeySet ?? false);
         }
-      } catch (error) {
-        console.error("Failed to check OpenAI API key:", error);
+      } catch {
+        // Ignore errors fetching config
       }
     };
 
+    // Initial fetch
     void checkOpenAIKey();
 
-    return () => {
-      isMounted = false;
-    };
+    // Subscribe to provider config changes via oRPC
+    (async () => {
+      try {
+        const iterator = await api.providers.onConfigChanged(undefined, { signal });
+        for await (const _ of iterator) {
+          if (signal.aborted) break;
+          void checkOpenAIKey();
+        }
+      } catch {
+        // Subscription cancelled via abort signal - expected on cleanup
+      }
+    })();
+
+    return () => abortController.abort();
   }, [api]);
 
   // Allow external components (e.g., CommandPalette, Queued message edits) to insert text

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { Plus, Loader2 } from "lucide-react";
-import type { ProvidersConfigMap } from "../types";
 import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
 import { KNOWN_MODELS } from "@/common/constants/knownModels";
 import { useModelLRU } from "@/browser/hooks/useModelLRU";
 import { ModelRow } from "./ModelRow";
 import { useAPI } from "@/browser/contexts/API";
+import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
 
 interface NewModelForm {
   provider: string;
@@ -20,22 +20,13 @@ interface EditingState {
 
 export function ModelsSection() {
   const { api } = useAPI();
-  const [config, setConfig] = useState<ProvidersConfigMap | null>(null);
+  const { config, loading } = useProvidersConfig();
   const [newModel, setNewModel] = useState<NewModelForm>({ provider: "", modelId: "" });
   const [saving, setSaving] = useState(false);
   const [editing, setEditing] = useState<EditingState | null>(null);
   const [error, setError] = useState<string | null>(null);
   const { defaultModel, setDefaultModel } = useModelLRU();
 
-  // Load config on mount
-  useEffect(() => {
-    if (!api) return;
-    void (async () => {
-      const cfg = await api.providers.getConfig();
-      setConfig(cfg ?? null);
-    })();
-  }, [api]);
-
   // Check if a model already exists (for duplicate prevention)
   const modelExists = useCallback(
     (provider: string, modelId: string, excludeOriginal?: string): boolean => {
@@ -65,10 +56,7 @@ export function ModelsSection() {
       const updatedModels = [...currentModels, trimmedModelId];
 
       await api.providers.setModels({ provider: newModel.provider, models: updatedModels });
-
-      // Refresh config
-      const cfg = await api.providers.getConfig();
-      setConfig(cfg ?? null);
+      // Config refresh happens automatically via useProvidersConfig subscription
       setNewModel({ provider: "", modelId: "" });
     } finally {
       setSaving(false);
@@ -84,10 +72,7 @@ export function ModelsSection() {
         const updatedModels = currentModels.filter((m) => m !== modelId);
 
         await api.providers.setModels({ provider, models: updatedModels });
-
-        // Refresh config
-        const cfg = await api.providers.getConfig();
-        setConfig(cfg ?? null);
+        // Config refresh happens automatically via useProvidersConfig subscription
       } finally {
         setSaving(false);
       }
@@ -131,18 +116,15 @@ export function ModelsSection() {
       );
 
       await api.providers.setModels({ provider: editing.provider, models: updatedModels });
-
-      // Refresh config
-      const cfg = await api.providers.getConfig();
-      setConfig(cfg ?? null);
+      // Config refresh happens automatically via useProvidersConfig subscription
       setEditing(null);
     } finally {
       setSaving(false);
     }
   }, [api, editing, config, modelExists]);
 
   // Show loading state while config is being fetched
-  if (config === null) {
+  if (loading || !config) {
     return (
       <div className="flex items-center justify-center gap-2 py-12">
         <Loader2 className="text-muted h-5 w-5 animate-spin" />

src/browser/components/Settings/sections/ProvidersSection.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { ChevronDown, ChevronRight, Check, X } from "lucide-react";
-import type { ProvidersConfigMap } from "../types";
 import { SUPPORTED_PROVIDERS } from "@/common/constants/providers";
 import type { ProviderName } from "@/common/constants/providers";
 import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
 import { useAPI } from "@/browser/contexts/API";
+import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
 
 interface FieldConfig {
   key: string;
@@ -66,7 +66,7 @@ function getProviderFields(provider: ProviderName): FieldConfig[] {
 
 export function ProvidersSection() {
   const { api } = useAPI();
-  const [config, setConfig] = useState<ProvidersConfigMap>({});
+  const { config } = useProvidersConfig();
   const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
   const [editingField, setEditingField] = useState<{
     provider: string;
@@ -75,15 +75,6 @@ export function ProvidersSection() {
   const [editValue, setEditValue] = useState("");
   const [saving, setSaving] = useState(false);
 
-  // Load config on mount
-  useEffect(() => {
-    if (!api) return;
-    void (async () => {
-      const cfg = await api.providers.getConfig();
-      setConfig(cfg);
-    })();
-  }, [api]);
-
   const handleToggleProvider = (provider: string) => {
     setExpandedProvider((prev) => (prev === provider ? null : provider));
     setEditingField(null);
@@ -109,10 +100,7 @@ export function ProvidersSection() {
     try {
       const { provider, field } = editingField;
       await api.providers.setProviderConfig({ provider, keyPath: [field], value: editValue });
-
-      // Refresh config
-      const cfg = await api.providers.getConfig();
-      setConfig(cfg);
+      // Config refresh happens automatically via useProvidersConfig subscription
       setEditingField(null);
       setEditValue("");
     } finally {
@@ -126,8 +114,7 @@ export function ProvidersSection() {
       setSaving(true);
       try {
         await api.providers.setProviderConfig({ provider, keyPath: [field], value: "" });
-        const cfg = await api.providers.getConfig();
-        setConfig(cfg);
+        // Config refresh happens automatically via useProvidersConfig subscription
       } finally {
         setSaving(false);
       }
@@ -136,7 +123,7 @@ export function ProvidersSection() {
   );
 
   const isConfigured = (provider: string): boolean => {
-    const providerConfig = config[provider];
+    const providerConfig = config?.[provider];
     if (!providerConfig) return false;
 
     // For Bedrock, check if any AWS credential field is set
@@ -155,7 +142,7 @@ export function ProvidersSection() {
   };
 
   const getFieldValue = (provider: string, field: string): string | undefined => {
-    const providerConfig = config[provider];
+    const providerConfig = config?.[provider];
     if (!providerConfig) return undefined;
 
     // For bedrock, check aws nested object for region
@@ -169,7 +156,7 @@ export function ProvidersSection() {
   };
 
   const isFieldSet = (provider: string, field: string, fieldConfig: FieldConfig): boolean => {
-    const providerConfig = config[provider];
+    const providerConfig = config?.[provider];
     if (!providerConfig) return false;
 
     if (fieldConfig.type === "secret") {

src/browser/hooks/useProvidersConfig.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState, useCallback } from "react";
+import { useAPI } from "@/browser/contexts/API";
+import type { ProvidersConfigMap } from "@/common/orpc/types";
+
+/**
+ * Hook to get provider config with automatic refresh on config changes.
+ * Subscribes to the backend's onConfigChanged event so updates are reflected immediately.
+ */
+export function useProvidersConfig() {
+  const { api } = useAPI();
+  const [config, setConfig] = useState<ProvidersConfigMap | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    if (!api) return;
+    try {
+      const cfg = await api.providers.getConfig();
+      setConfig(cfg);
+    } catch {
+      // Ignore errors fetching config
+    } finally {
+      setLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) return;
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+
+    // Initial fetch
+    void refresh();
+
+    // Subscribe to provider config changes via oRPC
+    (async () => {
+      try {
+        const iterator = await api.providers.onConfigChanged(undefined, { signal });
+        for await (const _ of iterator) {
+          if (signal.aborted) break;
+          void refresh();
+        }
+      } catch {
+        // Subscription cancelled via abort signal - expected on cleanup
+      }
+    })();
+
+    return () => abortController.abort();
+  }, [api, refresh]);
+
+  return { config, loading, refresh };
+}