Make a stateful extensions list component, with update statuses (#8301)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

packages/cli/src/ui/commands/extensionsCommand.test.ts

@@ -44,51 +44,20 @@ describe('extensionsCommand', () => {
       services: {
         config: {
           getExtensions: () => [],
+          getWorkingDir: () => '/test/dir',
         },
       },
     });
   });
 
   describe('list', () => {
-    it('should display "No active extensions." when none are found', async () => {
+    it('should add an EXTENSIONS_LIST item to the UI', async () => {
       if (!extensionsCommand.action) throw new Error('Action not defined');
       await extensionsCommand.action(mockContext, '');
 
       expect(mockContext.ui.addItem).toHaveBeenCalledWith(
         {
-          type: MessageType.INFO,
-          text: 'No active extensions.',
-        },
-        expect.any(Number),
-      );
-    });
-
-    it('should list active extensions when they are found', async () => {
-      const mockExtensions = [
-        { name: 'ext-one', version: '1.0.0', isActive: true },
-        { name: 'ext-two', version: '2.1.0', isActive: true },
-        { name: 'ext-three', version: '3.0.0', isActive: false },
-      ];
-      mockContext = createMockCommandContext({
-        services: {
-          config: {
-            getExtensions: () => mockExtensions,
-          },
-        },
-      });
-
-      if (!extensionsCommand.action) throw new Error('Action not defined');
-      await extensionsCommand.action(mockContext, '');
-
-      const expectedMessage =
-        'Active extensions:\n\n' +
-        `  - \u001b[36mext-one (v1.0.0)\u001b[0m\n` +
-        `  - \u001b[36mext-two (v2.1.0)\u001b[0m\n`;
-
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        {
-          type: MessageType.INFO,
-          text: expectedMessage,
+          type: MessageType.EXTENSIONS_LIST,
         },
         expect.any(Number),
       );
@@ -127,7 +96,7 @@ describe('extensionsCommand', () => {
       );
     });
 
-    it('should update all extensions with --all', async () => {
+    it('should call setPendingItem and addItem in a finally block on success', async () => {
       mockUpdateAllUpdatableExtensions.mockResolvedValue([
         {
           name: 'ext-one',
@@ -141,23 +110,33 @@ describe('extensionsCommand', () => {
         },
       ]);
       await updateAction(mockContext, '--all');
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith({
+        type: MessageType.EXTENSIONS_LIST,
+      });
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith(null);
       expect(mockContext.ui.addItem).toHaveBeenCalledWith(
         {
-          type: MessageType.INFO,
-          text:
-            'Extension "ext-one" successfully updated: 1.0.0 → 1.0.1.\n' +
-            'Extension "ext-two" successfully updated: 2.0.0 → 2.0.1.\n' +
-            'Restart gemini-cli to see the changes.',
+          type: MessageType.EXTENSIONS_LIST,
         },
         expect.any(Number),
       );
     });
 
-    it('should handle errors when updating all extensions', async () => {
+    it('should call setPendingItem and addItem in a finally block on failure', async () => {
       mockUpdateAllUpdatableExtensions.mockRejectedValue(
         new Error('Something went wrong'),
       );
       await updateAction(mockContext, '--all');
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith({
+        type: MessageType.EXTENSIONS_LIST,
+      });
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith(null);
+      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
+        {
+          type: MessageType.EXTENSIONS_LIST,
+        },
+        expect.any(Number),
+      );
       expect(mockContext.ui.addItem).toHaveBeenCalledWith(
         {
           type: MessageType.ERROR,
@@ -174,14 +153,11 @@ describe('extensionsCommand', () => {
         updatedVersion: '1.0.1',
       });
       await updateAction(mockContext, 'ext-one');
-      expect(mockContext.ui.addItem).toHaveBeenCalledWith(
-        {
-          type: MessageType.INFO,
-          text:
-            'Extension "ext-one" successfully updated: 1.0.0 → 1.0.1.\n' +
-            'Restart gemini-cli to see the changes.',
-        },
-        expect.any(Number),
+      expect(mockUpdateExtensionByName).toHaveBeenCalledWith(
+        'ext-one',
+        '/test/dir',
+        [],
+        expect.any(Function),
       );
     });
 
@@ -213,13 +189,13 @@ describe('extensionsCommand', () => {
         });
       await updateAction(mockContext, 'ext-one ext-two');
       expect(mockUpdateExtensionByName).toHaveBeenCalledTimes(2);
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith({
+        type: MessageType.EXTENSIONS_LIST,
+      });
+      expect(mockContext.ui.setPendingItem).toHaveBeenCalledWith(null);
       expect(mockContext.ui.addItem).toHaveBeenCalledWith(
         {
-          type: MessageType.INFO,
-          text:
-            'Extension "ext-one" successfully updated: 1.0.0 → 1.0.1.\n' +
-            'Extension "ext-two" successfully updated: 2.0.0 → 2.0.1.\n' +
-            'Restart gemini-cli to see the changes.',
+          type: MessageType.EXTENSIONS_LIST,
         },
         expect.any(Number),
       );

packages/cli/src/ui/commands/extensionsCommand.ts

@@ -18,65 +18,59 @@ import {
 } from './types.js';
 
 async function listAction(context: CommandContext) {
-  const activeExtensions = context.services.config
-    ?.getExtensions()
-    .filter((ext) => ext.isActive);
-  if (!activeExtensions || activeExtensions.length === 0) {
-    context.ui.addItem(
-      {
-        type: MessageType.INFO,
-        text: 'No active extensions.',
-      },
-      Date.now(),
-    );
-    return;
-  }
-
-  const extensionLines = activeExtensions.map(
-    (ext) => `  - \u001b[36m${ext.name} (v${ext.version})\u001b[0m`,
-  );
-  const message = `Active extensions:\n\n${extensionLines.join('\n')}\n`;
-
   context.ui.addItem(
     {
-      type: MessageType.INFO,
-      text: message,
+      type: MessageType.EXTENSIONS_LIST,
     },
     Date.now(),
   );
 }
 
-const updateOutput = (info: ExtensionUpdateInfo) =>
-  `Extension "${info.name}" successfully updated: ${info.originalVersion} → ${info.updatedVersion}.`;
-
 async function updateAction(context: CommandContext, args: string) {
   const updateArgs = args.split(' ').filter((value) => value.length > 0);
   const all = updateArgs.length === 1 && updateArgs[0] === '--all';
   const names = all ? undefined : updateArgs;
   let updateInfos: ExtensionUpdateInfo[] = [];
+
+  if (!all && names?.length === 0) {
+    context.ui.addItem(
+      {
+        type: MessageType.ERROR,
+        text: 'Usage: /extensions update <extension-names>|--all',
+      },
+      Date.now(),
+    );
+    return;
+  }
+
   try {
+    context.ui.setPendingItem({
+      type: MessageType.EXTENSIONS_LIST,
+    });
     if (all) {
-      updateInfos = await updateAllUpdatableExtensions();
+      updateInfos = await updateAllUpdatableExtensions(
+        context.services.config!.getWorkingDir(),
+        context.services.config!.getExtensions(),
+        context.ui.extensionsUpdateState,
+        context.ui.setExtensionsUpdateState,
+      );
     } else if (names?.length) {
       for (const name of names) {
-        updateInfos.push(await updateExtensionByName(name));
+        updateInfos.push(
+          await updateExtensionByName(
+            name,
+            context.services.config!.getWorkingDir(),
+            context.services.config!.getExtensions(),
+            (updateState) => {
+              const newState = new Map(context.ui.extensionsUpdateState);
+              newState.set(name, updateState);
+              context.ui.setExtensionsUpdateState(newState);
+            },
+          ),
+        );
       }
-    } else {
-      context.ui.addItem(
-        {
-          type: MessageType.ERROR,
-          text: 'Usage: /extensions update <extension-names>|--all',
-        },
-        Date.now(),
-      );
-      return;
     }
 
-    // Filter to the actually updated ones.
-    updateInfos = updateInfos.filter(
-      (info) => info.originalVersion !== info.updatedVersion,
-    );
-
     if (updateInfos.length === 0) {
       context.ui.addItem(
         {
@@ -87,17 +81,6 @@ async function updateAction(context: CommandContext, args: string) {
       );
       return;
     }
-
-    context.ui.addItem(
-      {
-        type: MessageType.INFO,
-        text: [
-          ...updateInfos.map((info) => updateOutput(info)),
-          'Restart gemini-cli to see the changes.',
-        ].join('\n'),
-      },
-      Date.now(),
-    );
   } catch (error) {
     context.ui.addItem(
       {
@@ -106,6 +89,14 @@ async function updateAction(context: CommandContext, args: string) {
       },
       Date.now(),
     );
+  } finally {
+    context.ui.addItem(
+      {
+        type: MessageType.EXTENSIONS_LIST,
+      },
+      Date.now(),
+    );
+    context.ui.setPendingItem(null);
   }
 }
 

packages/cli/src/ui/commands/types.ts

@@ -4,13 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { Content, PartListUnion } from '@google/genai';
 import type { HistoryItemWithoutId, HistoryItem } from '../types.js';
 import type { Config, GitService, Logger } from '@google/gemini-cli-core';
 import type { LoadedSettings } from '../../config/settings.js';
 import type { UseHistoryManagerReturn } from '../hooks/useHistoryManager.js';
 import type { SessionStatsState } from '../contexts/SessionContext.js';
+import type { ExtensionUpdateState } from '../state/extensions.js';
 
 // Grouped dependencies for clarity and easier mocking
 export interface CommandContext {
@@ -61,6 +62,10 @@ export interface CommandContext {
     toggleVimEnabled: () => Promise<boolean>;
     setGeminiMdFileCount: (count: number) => void;
     reloadCommands: () => void;
+    extensionsUpdateState: Map<string, ExtensionUpdateState>;
+    setExtensionsUpdateState: (
+      updateState: Map<string, ExtensionUpdateState>,
+    ) => void;
   };
   // Session-specific data
   session: {