ui: remove and update extensions

ui/desktop/src/components/ProviderGrid.tsx

@@ -150,7 +150,7 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
       ToastError({
         title: provider,
         msg: `Failed to ${providers.find((p) => p.id === selectedId)?.isConfigured ? 'update' : 'add'} configuration`,
-        errorMessage: error.message,
+        traceback: error.message,
       });
     }
   };

ui/desktop/src/components/settings/extensions/ConfigureBuiltInExtensionModal.tsx

@@ -80,7 +80,7 @@ export function ConfigureBuiltInExtensionModal({
       ToastError({
         title: extension.name,
         msg: `Failed to configure the extension`,
-        errorMessage: error.message,
+        traceback: error.message,
       });
     } finally {
       setIsSubmitting(false);

ui/desktop/src/components/settings/extensions/ConfigureExtensionModal.tsx

@@ -82,7 +82,7 @@ export function ConfigureExtensionModal({
       ToastError({
         title: extension.name,
         msg: `Failed to configure extension`,
-        errorMessage: error.message,
+        traceback: error.message,
       });
     } finally {
       setIsSubmitting(false);

ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx

@@ -99,7 +99,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
       resetForm();
     } catch (error) {
       console.error('Error configuring extension:', error);
-      ToastError({ title: 'Failed to configure extension', errorMessage: error.message });
+      ToastError({ title: 'Failed to configure extension', traceback: error.message });
     }
   };
 

ui/desktop/src/components/settings/models/toasts.tsx

@@ -24,28 +24,28 @@ export function ToastSuccess({ title, msg, toastOptions = {} }: ToastSuccessProp
 type ToastErrorProps = {
   title?: string;
   msg?: string;
-  errorMessage?: string;
+  traceback?: string;
   toastOptions?: ToastOptions;
 };
-export function ToastError({ title, msg, errorMessage, toastOptions }: ToastErrorProps) {
+export function ToastError({ title, msg, traceback, toastOptions }: ToastErrorProps) {
   return toast.error(
     <div className="flex gap-4">
       <div className="flex-grow">
         {title ? <strong className="font-medium">{title}</strong> : null}
         {msg ? <div>{msg}</div> : null}
       </div>
       <div className="flex-none flex items-center">
-        {errorMessage ? (
+        {traceback ? (
           <button
             className="text-textProminentInverse font-medium"
-            onClick={() => navigator.clipboard.writeText(errorMessage)}
+            onClick={() => navigator.clipboard.writeText(traceback)}
           >
             Copy error
           </button>
         ) : null}
       </div>
     </div>,
-    { ...commonToastOptions, autoClose: errorMessage ? false : 5000, ...toastOptions }
+    { ...commonToastOptions, autoClose: traceback ? false : 5000, ...toastOptions }
   );
 }
 

ui/desktop/src/components/settings/models/utils.tsx

@@ -43,7 +43,7 @@ export function useHandleModelSelection() {
       ToastError({
         title: model.name,
         msg: `Failed to switch to model`,
-        errorMessage: error.message,
+        traceback: error.message,
       });
     }
   };

ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx

@@ -158,7 +158,7 @@ export function ConfigureProvidersGrid() {
       ToastError({
         title: provider,
         msg: `Failed to ${providers.find((p) => p.id === selectedForSetup)?.isConfigured ? 'update' : 'add'} configuration`,
-        errorMessage: error.message,
+        traceback: error.message,
       });
     }
   };
@@ -181,7 +181,7 @@ export function ConfigureProvidersGrid() {
       // Check if the selected provider is currently active
       if (currentModel?.provider === providerToDelete.name) {
         const msg = `Cannot delete the configuration because it's the provider of the current model (${currentModel.name}). Please switch to a different model first.`;
-        ToastError({ title: providerToDelete.name, msg, errorMessage: msg });
+        ToastError({ title: providerToDelete.name, msg, traceback: msg });
         setIsConfirmationOpen(false);
         return;
       }
@@ -221,7 +221,7 @@ export function ConfigureProvidersGrid() {
       ToastError({
         title: providerToDelete.name,
         msg: 'Failed to delete configuration',
-        errorMessage: error.message,
+        traceback: error.message,
       });
     }
     setIsConfirmationOpen(false);

ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx

@@ -9,20 +9,20 @@ import {
   createExtensionConfig,
   ExtensionFormData,
   extensionToFormData,
+  extractExtensionConfig,
   getDefaultFormData,
 } from './utils';
-import { useAgent } from '../../../agent/UpdateAgent';
-import { activateExtension } from '.';
+
+import { activateExtension, deleteExtension, toggleExtension, updateExtension } from './index';
 
 export default function ExtensionsSection() {
-  const { toggleExtension, getExtensions, addExtension, removeExtension } = useConfig();
+  const { getExtensions, addExtension, removeExtension } = useConfig();
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [extensions, setExtensions] = useState<FixedExtensionEntry[]>([]);
   const [selectedExtension, setSelectedExtension] = useState<FixedExtensionEntry | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const { updateAgent, addExtensionToAgent } = useAgent();
 
   const fetchExtensions = async () => {
     setLoading(true);
@@ -44,13 +44,17 @@ export default function ExtensionsSection() {
     fetchExtensions();
   }, []);
 
-  const handleExtensionToggle = async (name: string) => {
-    try {
-      await toggleExtension(name);
-      fetchExtensions(); // Refresh the list after toggling
-    } catch (error) {
-      console.error('Failed to toggle extension:', error);
-    }
+  const handleExtensionToggle = async (extension: FixedExtensionEntry) => {
+    // If extension is enabled, we are trying to toggle if off, otherwise on
+    const toggleDirection = extension.enabled ? 'toggleOff' : 'toggleOn';
+    const extensionConfig = extractExtensionConfig(extension);
+    await toggleExtension({
+      toggle: toggleDirection,
+      extensionConfig: extensionConfig,
+      addToConfig: addExtension,
+      removeFromConfig: removeExtension,
+    });
+    await fetchExtensions(); // Refresh the list after toggling
   };
 
   const handleConfigureClick = (extension: FixedExtensionEntry) => {
@@ -60,38 +64,29 @@ export default function ExtensionsSection() {
 
   const handleAddExtension = async (formData: ExtensionFormData) => {
     const extensionConfig = createExtensionConfig(formData);
-
-    try {
-      await activateExtension(formData.name, extensionConfig, addExtension);
-      console.log('attempting to add extension');
-      await updateAgent(extensionConfig);
-      handleModalClose();
-      await fetchExtensions(); // Refresh the list after adding
-    } catch (error) {
-      console.error('Failed to add extension:', error);
-    }
+    // TODO: replace activateExtension in index
+    // TODO: make sure error handling works
+    await activateExtension({ addToConfig: addExtension, extensionConfig: extensionConfig });
+    handleModalClose();
+    await fetchExtensions();
   };
 
   const handleUpdateExtension = async (formData: ExtensionFormData) => {
     const extensionConfig = createExtensionConfig(formData);
 
-    try {
-      await activateExtension(formData.name, extensionConfig, addExtension);
-      handleModalClose();
-      fetchExtensions(); // Refresh the list after updating
-    } catch (error) {
-      console.error('Failed to update extension configuration:', error);
-    }
+    await updateExtension({
+      enabled: formData.enabled,
+      extensionConfig: extensionConfig,
+      addToConfig: addExtension,
+    });
+    handleModalClose();
+    await fetchExtensions();
   };
 
   const handleDeleteExtension = async (name: string) => {
-    try {
-      await removeExtension(name);
-      handleModalClose();
-      fetchExtensions(); // Refresh the list after deleting
-    } catch (error) {
-      console.error('Failed to delete extension:', error);
-    }
+    await deleteExtension({ name, removeFromConfig: removeExtension });
+    handleModalClose();
+    await fetchExtensions();
   };
 
   const handleModalClose = () => {