ui: remove and update extensions

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

@@ -9,10 +9,10 @@ import {
   createExtensionConfig,
   ExtensionFormData,
   extensionToFormData,
+  extractExtensionConfig,
   getDefaultFormData,
 } from './utils';
-import { useAgent } from '../../../agent/UpdateAgent';
-import { activateExtension } from '.';
+import { AddNewExtension, DeleteExtension, ToggleExtension, UpdateExtension } from './temp';
 
 export default function ExtensionsSection() {
   const { toggleExtension, getExtensions, addExtension, removeExtension } = useConfig();
@@ -22,7 +22,6 @@ export default function ExtensionsSection() {
   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 +43,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 +63,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 AddNewExtension({ 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 = () => {

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

@@ -0,0 +1,136 @@
+import { replaceWithShims } from '../../../agent/utils';
+import { ExtensionConfig } from '../../../api';
+import { toast } from 'react-toastify';
+import { getApiUrl, getSecretKey } from '../../../config';
+import React from 'react';
+
+// Error message component
+const ErrorMsg = ({
+  name,
+  message,
+  closeToast,
+}: {
+  name: string;
+  message?: string;
+  closeToast?: () => void;
+}) => (
+  <div className="flex flex-col gap-1">
+    <div>
+      Error {message?.includes('adding') ? 'adding' : 'removing'} {name} extension
+    </div>
+    <div>
+      <button
+        className="text-sm rounded px-2 py-1 bg-gray-400 hover:bg-gray-300 text-white cursor-pointer"
+        onClick={() => {
+          navigator.clipboard.writeText(message || 'Unknown error');
+          closeToast?.();
+        }}
+      >
+        Copy error message
+      </button>
+    </div>
+  </div>
+);
+
+// Core API call function
+async function extensionApiCall<T>(
+  endpoint: string,
+  payload: any,
+  actionType: 'adding' | 'removing',
+  extensionName: string
+): Promise<Response> {
+  let toastId;
+  const actionVerb = actionType === 'adding' ? 'Adding' : 'Removing';
+  const pastVerb = actionType === 'adding' ? 'added' : 'removed';
+
+  try {
+    toastId = toast.loading(`${actionVerb} ${extensionName} extension...`, {
+      position: 'top-center',
+    });
+
+    if (actionType === 'adding') {
+      toast.info(
+        'Press the ESC key on your keyboard to continue using goose while extension loads'
+      );
+    }
+
+    const response = await fetch(getApiUrl(endpoint), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Secret-Key': getSecretKey(),
+      },
+      body: JSON.stringify(payload),
+    });
+
+    // Handle non-OK responses
+    if (!response.ok) {
+      const errorMsg = `Server returned ${response.status}: ${response.statusText}`;
+      console.error(errorMsg);
+
+      // Special handling for 428 Precondition Required (agent not initialized)
+      if (response.status === 428 && actionType === 'adding') {
+        if (toastId) toast.dismiss(toastId);
+        toast.error('Agent is not initialized. Please initialize the agent first.');
+        return response;
+      }
+
+      if (toastId) toast.dismiss(toastId);
+      toast.error(
+        `Failed to ${actionType === 'adding' ? 'add' : 'remove'} ${extensionName} extension: ${errorMsg}`
+      );
+      return response;
+    }
+
+    // Parse response JSON safely
+    let data;
+    try {
+      const text = await response.text();
+      data = text ? JSON.parse(text) : { error: false };
+    } catch (error) {
+      console.warn('Could not parse response as JSON, assuming success', error);
+      data = { error: false };
+    }
+
+    if (!data.error) {
+      if (toastId) toast.dismiss(toastId);
+      toast.success(
+        `Successfully ${actionType === 'adding' ? 'enabled' : 'disabled'} ${extensionName} extension`
+      );
+      return response;
+    }
+
+    const errorMessage = `Error ${actionType} ${extensionName} extension${data.message ? `. ${data.message}` : ''}`;
+    console.error(errorMessage);
+
+    if (toastId) toast.dismiss(toastId);
+    toast(<ErrorMsg name={extensionName} message={data.message} />, {
+      type: 'error',
+      autoClose: false,
+    });
+
+    return response;
+  } catch (error) {
+    console.log('Got some other error');
+    const errorMessage = `Failed to ${actionType === 'adding' ? 'add' : 'remove'} ${extensionName} extension: ${error instanceof Error ? error.message : 'Unknown error'}`;
+    console.error(errorMessage);
+    if (toastId) toast.dismiss(toastId);
+    toast.error(errorMessage, { autoClose: false });
+    throw error;
+  }
+}
+
+// Public functions
+export async function AddToAgent(extension: ExtensionConfig): Promise<Response> {
+  if (extension.type === 'stdio') {
+    console.log('extension command', extension.cmd);
+    extension.cmd = await replaceWithShims(extension.cmd);
+    console.log('next ext command', extension.cmd);
+  }
+
+  return extensionApiCall('/extensions/add', extension, 'adding', extension.name);
+}
+
+export async function RemoveFromAgent(name: string): Promise<Response> {
+  return extensionApiCall('/extensions/remove', name, 'removing', name);
+}

ui/desktop/src/components/settings_v2/extensions/index.ts

@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 import { ToastError, ToastLoading, ToastSuccess } from '../../settings/models/toasts';
 
 // Default extension timeout in seconds
+// TODO: keep in sync with rust better
 export const DEFAULT_EXTENSION_TIMEOUT = 300;
 
 // Type definition for built-in extensions from JSON
@@ -77,6 +78,11 @@ export async function activateExtension(
     // First add to the config system
     await addExtensionFn(nameToKey(name), config, true);
 
+    if (config.type != 'stdio') {
+      console.error('only stdio is supported');
+      throw Error('Only STDIO extensions are currently supported');
+    }
+
     // Then call the API endpoint
     const response = await fetch(getApiUrl('/extensions/add'), {
       method: 'POST',

ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionItem.tsx

@@ -7,7 +7,7 @@ import { getSubtitle, getFriendlyTitle } from './ExtensionList';
 
 interface ExtensionItemProps {
   extension: FixedExtensionEntry;
-  onToggle: (name: string) => void;
+  onToggle: (extension: FixedExtensionEntry) => void;
   onConfigure: (extension: FixedExtensionEntry) => void;
 }
 
@@ -37,7 +37,7 @@ export default function ExtensionItem({ extension, onToggle, onConfigure }: Exte
           )}
           <Switch
             checked={extension.enabled}
-            onCheckedChange={() => onToggle(extension.name)}
+            onCheckedChange={() => onToggle(extension)}
             variant="mono"
           />
         </div>

ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx

@@ -7,7 +7,7 @@ import { combineCmdAndArgs } from '../utils';
 
 interface ExtensionListProps {
   extensions: FixedExtensionEntry[];
-  onToggle: (name: string) => void;
+  onToggle: (extension: FixedExtensionEntry) => void;
   onConfigure: (extension: FixedExtensionEntry) => void;
 }