Add pending extension indicator to extension panel

[alexeyre]

Summary

Add a marker to added extensions that have been installed but are yet to be enabled in the session.

Type of Change

• Feature
• Bug fix
• Refactor / Code quality
• Performance improvement
• Documentation
• Tests
• Security fix
• Build / Release
• Other (specify below)

Testing

Manually tested by adding an extension from the goose extension library via the deeplink.

Related Issues

Relates to #5473

Screenshots/Demos (for UX changes)

Before:

After:

[Copilot]

Pull Request Overview

This PR adds a "Pending" status indicator to extensions that are enabled in the configuration but not yet activated in the current session. The feature helps users understand that certain extensions will only become active when they start a new chat session.

• Adds pendingActivationExtensions state management to track extensions awaiting activation
• Displays a visual "Pending" badge on extension items that are in pending state
• Clears pending state when extensions are toggled or successfully activated

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
ExtensionList.tsx	Accepts and passes pendingActivationExtensions prop to child components
ExtensionItem.tsx	Renders the "Pending" badge when isPendingActivation is true
ExtensionsSection.tsx	Manages pendingActivationExtensions state, marks extensions as pending on deep link or activation failure, and clears pending state on successful activation/toggle

Comments suppressed due to low confidence (2)

ui/desktop/src/components/settings/extensions/ExtensionsSection.tsx:195

• The handleUpdateExtension function lacks pending activation state management. When an extension update fails (similar to handleAddExtension), it should mark the extension as pending if formData.enabled is true. Additionally, on successful update, it should clear the pending state for that extension.

  const handleUpdateExtension = async (formData: ExtensionFormData) => {
    if (!selectedExtension) {
      console.error('No selected extension for update');
      return;
    }

    // Close the modal immediately
    handleModalClose();

    const extensionConfig = createExtensionConfig(formData);
    const originalName = selectedExtension.name;

    try {
      await updateExtension({
        enabled: formData.enabled,
        extensionConfig: extensionConfig,
        addToConfig: addExtension,
        removeFromConfig: removeExtension,
        originalName: originalName,
        sessionId: sessionId,
      });
    } catch (error) {
      console.error('Failed to update extension:', error);
      // We don't reopen the modal on failure
    } finally {
      // Refresh the extensions list regardless of success or failure
      await fetchExtensions();
    }
  };

ui/desktop/src/components/settings/extensions/ExtensionsSection.tsx:210

• The handleDeleteExtension function should remove the deleted extension from the pendingActivationExtensions set to clean up state. Add logic to call setPendingActivationExtensions and delete the extension name from the set after a successful deletion.

  const handleDeleteExtension = async (name: string) => {
    // Close the modal immediately
    handleModalClose();

    try {
      await deleteExtension({ name, removeFromConfig: removeExtension, sessionId: sessionId });
    } catch (error) {
      console.error('Failed to delete extension:', error);
      // We don't reopen the modal on failure
    } finally {
      // Refresh the extensions list regardless of success or failure
      await fetchExtensions();
    }
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.