feat: add edit functionality for custom AI providers (#1232) (#1171) (#1250)

e2e-tests/edit_provider.spec.ts

+import { test } from "./helpers/test_helper";
+
+test("can edit custom provider", async ({ po }) => {
+  await po.setUp();
+  await po.goToSettingsTab();
+
+  // Create a provider first
+
+  // Edit it
+  await po.page.getByTestId("custom-provider-more-options").click();
+  await po.page.getByRole("button", { name: "Edit Provider" }).click();
+
+  await po.page.getByRole("textbox", { name: "Display Name" }).clear();
+  await po.page
+    .getByRole("textbox", { name: "Display Name" })
+    .fill("Updated Test Provider");
+
+  await po.page.getByRole("textbox", { name: "API Base URL" }).clear();
+  await po.page
+    .getByRole("textbox", { name: "API Base URL" })
+    .fill("https://api.updated-test.com/v1");
+
+  await po.page.getByRole("button", { name: "Update Provider" }).click();
+
+  // Make sure UI hasn't freezed
+});

src/components/CreateCustomProviderDialog.tsx

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -11,38 +11,73 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Loader2 } from "lucide-react";
 import { useCustomLanguageModelProvider } from "@/hooks/useCustomLanguageModelProvider";
+import type { LanguageModelProvider } from "@/ipc/ipc_types";
 
 interface CreateCustomProviderDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onSuccess: () => void;
+  editingProvider?: LanguageModelProvider | null;
 }
 
 export function CreateCustomProviderDialog({
   isOpen,
   onClose,
   onSuccess,
+  editingProvider = null,
 }: CreateCustomProviderDialogProps) {
   const [id, setId] = useState("");
   const [name, setName] = useState("");
   const [apiBaseUrl, setApiBaseUrl] = useState("");
   const [envVarName, setEnvVarName] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
+  const isEditMode = Boolean(editingProvider);
 
-  const { createProvider, isCreating, error } =
+  const { createProvider, editProvider, isCreating, isEditing, error } =
     useCustomLanguageModelProvider();
+  // Load provider data when editing
+  useEffect(() => {
+    if (editingProvider && isOpen) {
+      const cleanId = editingProvider.id?.startsWith("custom::")
+        ? editingProvider.id.replace("custom::", "")
+        : editingProvider.id || "";
+      setId(cleanId);
+      setName(editingProvider.name || "");
+      setApiBaseUrl(editingProvider.apiBaseUrl || "");
+      setEnvVarName(editingProvider.envVarName || "");
+    } else if (!isOpen) {
+      // Reset form when dialog closes
+      setId("");
+      setName("");
+      setApiBaseUrl("");
+      setEnvVarName("");
+      setErrorMessage("");
+    }
+  }, [editingProvider, isOpen]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setErrorMessage("");
 
     try {
-      await createProvider({
-        id: id.trim(),
-        name: name.trim(),
-        apiBaseUrl: apiBaseUrl.trim(),
-        envVarName: envVarName.trim() || undefined,
-      });
+      if (isEditMode && editingProvider) {
+        const cleanId = editingProvider.id?.startsWith("custom::")
+          ? editingProvider.id.replace("custom::", "")
+          : editingProvider.id || "";
+        await editProvider({
+          id: cleanId,
+          name: name.trim(),
+          apiBaseUrl: apiBaseUrl.trim(),
+          envVarName: envVarName.trim() || undefined,
+        });
+      } else {
+        await createProvider({
+          id: id.trim(),
+          name: name.trim(),
+          apiBaseUrl: apiBaseUrl.trim(),
+          envVarName: envVarName.trim() || undefined,
+        });
+      }
 
       // Reset form
       setId("");
@@ -55,25 +90,30 @@ export function CreateCustomProviderDialog({
       setErrorMessage(
         error instanceof Error
           ? error.message
-          : "Failed to create custom provider",
+          : `Failed to ${isEditMode ? "edit" : "create"} custom provider`,
       );
     }
   };
 
   const handleClose = () => {
-    if (!isCreating) {
+    if (!isCreating && !isEditing) {
       setErrorMessage("");
       onClose();
     }
   };
+  const isLoading = isCreating || isEditing;
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Add Custom Provider</DialogTitle>
+          <DialogTitle>
+            {isEditMode ? "Edit Custom Provider" : "Add Custom Provider"}
+          </DialogTitle>
           <DialogDescription>
-            Connect to a custom language model provider API
+            {isEditMode
+              ? "Update your custom language model provider configuration."
+              : "Connect to a custom language model provider API."}
           </DialogDescription>
         </DialogHeader>
 
@@ -86,7 +126,7 @@ export function CreateCustomProviderDialog({
               onChange={(e) => setId(e.target.value)}
               placeholder="E.g., my-provider"
               required
-              disabled={isCreating}
+              disabled={isLoading || isEditMode}
             />
             <p className="text-xs text-muted-foreground">
               A unique identifier for this provider (no spaces).
@@ -101,7 +141,7 @@ export function CreateCustomProviderDialog({
               onChange={(e) => setName(e.target.value)}
               placeholder="E.g., My Provider"
               required
-              disabled={isCreating}
+              disabled={isLoading}
             />
             <p className="text-xs text-muted-foreground">
               The name that will be displayed in the UI.
@@ -116,7 +156,7 @@ export function CreateCustomProviderDialog({
               onChange={(e) => setApiBaseUrl(e.target.value)}
               placeholder="E.g., https://api.example.com/v1"
               required
-              disabled={isCreating}
+              disabled={isLoading}
             />
             <p className="text-xs text-muted-foreground">
               The base URL for the API endpoint.
@@ -130,7 +170,7 @@ export function CreateCustomProviderDialog({
               value={envVarName}
               onChange={(e) => setEnvVarName(e.target.value)}
               placeholder="E.g., MY_PROVIDER_API_KEY"
-              disabled={isCreating}
+              disabled={isLoading}
             />
             <p className="text-xs text-muted-foreground">
               Environment variable name for the API key.
@@ -151,13 +191,19 @@ export function CreateCustomProviderDialog({
               type="button"
               variant="outline"
               onClick={handleClose}
-              disabled={isCreating}
+              disabled={isLoading}
             >
               Cancel
             </Button>
-            <Button type="submit" disabled={isCreating}>
-              {isCreating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {isCreating ? "Adding..." : "Add Provider"}
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isLoading
+                ? isEditMode
+                  ? "Updating..."
+                  : "Adding..."
+                : isEditMode
+                  ? "Update Provider"
+                  : "Add Provider"}
             </Button>
           </div>
         </form>

src/components/ProviderSettings.tsx

@@ -10,7 +10,7 @@ import type { LanguageModelProvider } from "@/ipc/ipc_types";
 
 import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
 import { useCustomLanguageModelProvider } from "@/hooks/useCustomLanguageModelProvider";
-import { GiftIcon, PlusIcon, MoreVertical, Trash2 } from "lucide-react";
+import { GiftIcon, PlusIcon, MoreVertical, Trash2, Edit } from "lucide-react";
 import { Skeleton } from "./ui/skeleton";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { AlertTriangle } from "lucide-react";
@@ -38,6 +38,8 @@ import { CreateCustomProviderDialog } from "./CreateCustomProviderDialog";
 export function ProviderSettingsGrid() {
   const navigate = useNavigate();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingProvider, setEditingProvider] =
+    useState<LanguageModelProvider | null>(null);
   const [providerToDelete, setProviderToDelete] = useState<string | null>(null);
 
   const {
@@ -65,6 +67,11 @@ export function ProviderSettingsGrid() {
     }
   };
 
+  const handleEditProvider = (provider: LanguageModelProvider) => {
+    setEditingProvider(provider);
+    setIsDialogOpen(true);
+  };
+
   if (isLoading) {
     return (
       <div className="p-6">
@@ -116,7 +123,7 @@ export function ProviderSettingsGrid() {
                   className="p-4 cursor-pointer"
                   onClick={() => handleProviderClick(provider.id)}
                 >
-                  <CardTitle className="text-lg font-medium flex items-center justify-between">
+                  <CardTitle className="text-lg font-medium flex items-center justify-between mr-5">
                     {provider.name}
                     {isProviderSetup(provider.id) ? (
                       <span className="ml-3 text-sm font-medium text-green-500 bg-green-50 dark:bg-green-900/30 border border-green-500/50 dark:border-green-500/50 px-2 py-1 rounded-full">
@@ -140,7 +147,7 @@ export function ProviderSettingsGrid() {
 
                 {isCustom && (
                   <div
-                    className="absolute top-2 right-2"
+                    className="absolute top-2 right-0"
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Popover>
@@ -155,6 +162,15 @@ export function ProviderSettingsGrid() {
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent align="end" className="w-48 p-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="w-full justify-start mb-1"
+                          onClick={() => handleEditProvider(provider)}
+                        >
+                          <Edit className="h-4 w-4 mr-2" />
+                          Edit Provider
+                        </Button>
                         <Button
                           variant="ghost"
                           size="sm"
@@ -191,11 +207,16 @@ export function ProviderSettingsGrid() {
 
       <CreateCustomProviderDialog
         isOpen={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
+        onClose={() => {
+          setIsDialogOpen(false);
+          setEditingProvider(null);
+        }}
         onSuccess={() => {
           setIsDialogOpen(false);
           refetch();
+          setEditingProvider(null);
         }}
+        editingProvider={editingProvider}
       />
 
       <AlertDialog

src/hooks/useCustomLanguageModelProvider.ts

@@ -40,6 +40,36 @@ export function useCustomLanguageModelProvider() {
     },
   });
 
+  const editProviderMutation = useMutation({
+    mutationFn: async (
+      params: CreateCustomLanguageModelProviderParams,
+    ): Promise<LanguageModelProvider> => {
+      if (!params.id.trim()) {
+        throw new Error("Provider ID is required");
+      }
+      if (!params.name.trim()) {
+        throw new Error("Provider name is required");
+      }
+      if (!params.apiBaseUrl.trim()) {
+        throw new Error("API base URL is required");
+      }
+
+      return ipcClient.editCustomLanguageModelProvider({
+        id: params.id.trim(),
+        name: params.name.trim(),
+        apiBaseUrl: params.apiBaseUrl.trim(),
+        envVarName: params.envVarName?.trim() || undefined,
+      });
+    },
+    onSuccess: () => {
+      // Invalidate and refetch
+      queryClient.invalidateQueries({ queryKey: ["languageModelProviders"] });
+    },
+    onError: (error) => {
+      showError(error);
+    },
+  });
+
   const deleteProviderMutation = useMutation({
     mutationFn: async (providerId: string): Promise<void> => {
       if (!providerId) {
@@ -63,15 +93,26 @@ export function useCustomLanguageModelProvider() {
     return createProviderMutation.mutateAsync(params);
   };
 
+  const editProvider = async (
+    params: CreateCustomLanguageModelProviderParams,
+  ): Promise<LanguageModelProvider> => {
+    return editProviderMutation.mutateAsync(params);
+  };
+
   const deleteProvider = async (providerId: string): Promise<void> => {
     return deleteProviderMutation.mutateAsync(providerId);
   };
 
   return {
     createProvider,
+    editProvider,
     deleteProvider,
     isCreating: createProviderMutation.isPending,
+    isEditing: editProviderMutation.isPending,
     isDeleting: deleteProviderMutation.isPending,
-    error: createProviderMutation.error || deleteProviderMutation.error,
+    error:
+      createProviderMutation.error ||
+      editProviderMutation.error ||
+      deleteProviderMutation.error,
   };
 }

src/ipc/handlers/language_model_handlers.ts

@@ -129,6 +129,67 @@ export function registerLanguageModelHandlers() {
       });
     },
   );
+  handle(
+    "edit-custom-language-model-provider",
+    async (
+      event: IpcMainInvokeEvent,
+      params: CreateCustomLanguageModelProviderParams,
+    ): Promise<LanguageModelProvider> => {
+      const { id, name, apiBaseUrl, envVarName } = params;
+
+      if (!id) {
+        throw new Error("Provider ID is required");
+      }
+      if (!name) {
+        throw new Error("Provider name is required");
+      }
+      if (!apiBaseUrl) {
+        throw new Error("API base URL is required");
+      }
+
+      // Check if the provider being edited exists
+      const existingProvider = db
+        .select()
+        .from(languageModelProvidersSchema)
+        .where(eq(languageModelProvidersSchema.id, CUSTOM_PROVIDER_PREFIX + id))
+        .get();
+
+      if (!existingProvider) {
+        throw new Error(`Provider with ID "${id}" not found`);
+      }
+
+      // Use transaction to ensure atomicity when updating provider and potentially its models
+      const result = db.transaction((tx) => {
+        // Update the provider
+        const updateResult = tx
+          .update(languageModelProvidersSchema)
+          .set({
+            id: CUSTOM_PROVIDER_PREFIX + id,
+            name,
+            api_base_url: apiBaseUrl,
+            env_var_name: envVarName || null,
+          })
+          .where(
+            eq(languageModelProvidersSchema.id, CUSTOM_PROVIDER_PREFIX + id),
+          )
+          .run();
+
+        if (updateResult.changes === 0) {
+          throw new Error(`Failed to update provider with ID "${id}"`);
+        }
+
+        return {
+          id,
+          name,
+          apiBaseUrl,
+          envVarName,
+          type: "custom" as const,
+        };
+      });
+      logger.info(`Successfully updated provider`);
+      return result;
+    },
+  );
 
   handle(
     "delete-custom-language-model",

src/ipc/ipc_client.ts

@@ -1032,6 +1032,14 @@ export class IpcClient {
       envVarName,
     });
   }
+  public async editCustomLanguageModelProvider(
+    params: CreateCustomLanguageModelProviderParams,
+  ): Promise<LanguageModelProvider> {
+    return this.ipcRenderer.invoke(
+      "edit-custom-language-model-provider",
+      params,
+    );
+  }
 
   public async createCustomLanguageModel(
     params: CreateCustomLanguageModelParams,

src/preload.ts

@@ -11,6 +11,7 @@ const validInvokeChannels = [
   "get-language-model-providers",
   "delete-custom-language-model-provider",
   "create-custom-language-model-provider",
+  "edit-custom-language-model-provider",
   "delete-custom-language-model",
   "delete-custom-model",
   "chat:add-dep",