Merge branch 'main' into feat/card-component

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

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { type ReactElement } from 'react';
+
 import type {
   ExtensionLoader,
   GeminiCLIExtension,
@@ -15,7 +17,12 @@ import {
   completeExtensionsAndScopes,
   extensionsCommand,
 } from './extensionsCommand.js';
+import {
+  ConfigExtensionDialog,
+  type ConfigExtensionDialogProps,
+} from '../components/ConfigExtensionDialog.js';
 import { type CommandContext, type SlashCommand } from './types.js';
+
 import {
   describe,
   it,
@@ -53,6 +60,20 @@ vi.mock('node:fs/promises', () => ({
   stat: vi.fn(),
 }));
 
+vi.mock('../../config/extensions/extensionSettings.js', () => ({
+  ExtensionSettingScope: {
+    USER: 'user',
+    WORKSPACE: 'workspace',
+  },
+  getScopedEnvContents: vi.fn().mockResolvedValue({}),
+  promptForSetting: vi.fn(),
+  updateSetting: vi.fn(),
+}));
+
+vi.mock('prompts', () => ({
+  default: vi.fn(),
+}));
+
 vi.mock('../../config/extensions/update.js', () => ({
   updateExtension: vi.fn(),
   checkForAllExtensionUpdates: vi.fn(),
@@ -107,27 +128,31 @@ const allExt: GeminiCLIExtension = {
 describe('extensionsCommand', () => {
   let mockContext: CommandContext;
   const mockDispatchExtensionState = vi.fn();
+  let mockExtensionLoader: unknown;
 
   beforeEach(() => {
     vi.resetAllMocks();
 
+    mockExtensionLoader = Object.create(ExtensionManager.prototype);
+    Object.assign(mockExtensionLoader as object, {
+      enableExtension: mockEnableExtension,
+      disableExtension: mockDisableExtension,
+      installOrUpdateExtension: mockInstallExtension,
+      uninstallExtension: mockUninstallExtension,
+      getExtensions: mockGetExtensions,
+      loadExtensionConfig: vi.fn().mockResolvedValue({
+        name: 'test-ext',
+        settings: [{ name: 'setting1', envVar: 'SETTING1' }],
+      }),
+    });
+
     mockGetExtensions.mockReturnValue([inactiveExt, activeExt, allExt]);
     vi.mocked(open).mockClear();
     mockContext = createMockCommandContext({
       services: {
         config: {
           getExtensions: mockGetExtensions,
-          getExtensionLoader: vi.fn().mockImplementation(() => {
-            const actual = Object.create(ExtensionManager.prototype);
-            Object.assign(actual, {
-              enableExtension: mockEnableExtension,
-              disableExtension: mockDisableExtension,
-              installOrUpdateExtension: mockInstallExtension,
-              uninstallExtension: mockUninstallExtension,
-              getExtensions: mockGetExtensions,
-            });
-            return actual;
-          }),
+          getExtensionLoader: vi.fn().mockReturnValue(mockExtensionLoader),
           getWorkingDir: () => '/test/dir',
         },
       },
@@ -978,4 +1003,102 @@ describe('extensionsCommand', () => {
       expect(suggestions).toEqual(['ext1']);
     });
   });
+
+  describe('config', () => {
+    let configAction: SlashCommand['action'];
+
+    beforeEach(async () => {
+      configAction = extensionsCommand(true).subCommands?.find(
+        (cmd) => cmd.name === 'config',
+      )?.action;
+
+      expect(configAction).not.toBeNull();
+      mockContext.invocation!.name = 'config';
+
+      const prompts = (await import('prompts')).default;
+      vi.mocked(prompts).mockResolvedValue({ overwrite: true });
+
+      const { getScopedEnvContents } = await import(
+        '../../config/extensions/extensionSettings.js'
+      );
+      vi.mocked(getScopedEnvContents).mockResolvedValue({});
+    });
+
+    it('should return dialog to configure all extensions if no args provided', async () => {
+      const result = await configAction!(mockContext, '');
+      if (result?.type !== 'custom_dialog') {
+        throw new Error('Expected custom_dialog');
+      }
+      const dialogResult = result;
+      const component =
+        dialogResult.component as ReactElement<ConfigExtensionDialogProps>;
+      expect(component.type).toBe(ConfigExtensionDialog);
+      expect(component.props.configureAll).toBe(true);
+      expect(component.props.extensionManager).toBeDefined();
+    });
+
+    it('should return dialog to configure specific extension', async () => {
+      const result = await configAction!(mockContext, 'ext-one');
+      if (result?.type !== 'custom_dialog') {
+        throw new Error('Expected custom_dialog');
+      }
+      const dialogResult = result;
+      const component =
+        dialogResult.component as ReactElement<ConfigExtensionDialogProps>;
+      expect(component.type).toBe(ConfigExtensionDialog);
+      expect(component.props.extensionName).toBe('ext-one');
+      expect(component.props.settingKey).toBeUndefined();
+      expect(component.props.configureAll).toBe(false);
+    });
+
+    it('should return dialog to configure specific setting for an extension', async () => {
+      const result = await configAction!(mockContext, 'ext-one SETTING1');
+      if (result?.type !== 'custom_dialog') {
+        throw new Error('Expected custom_dialog');
+      }
+      const dialogResult = result;
+      const component =
+        dialogResult.component as ReactElement<ConfigExtensionDialogProps>;
+      expect(component.type).toBe(ConfigExtensionDialog);
+      expect(component.props.extensionName).toBe('ext-one');
+      expect(component.props.settingKey).toBe('SETTING1');
+      expect(component.props.scope).toBe('user'); // Default scope
+    });
+
+    it('should respect scope argument passed to dialog', async () => {
+      const result = await configAction!(
+        mockContext,
+        'ext-one SETTING1 --scope=workspace',
+      );
+      if (result?.type !== 'custom_dialog') {
+        throw new Error('Expected custom_dialog');
+      }
+      const dialogResult = result;
+      const component =
+        dialogResult.component as ReactElement<ConfigExtensionDialogProps>;
+      expect(component.props.scope).toBe('workspace');
+    });
+
+    it('should show error for invalid extension name', async () => {
+      await configAction!(mockContext, '../invalid');
+      expect(mockContext.ui.addItem).toHaveBeenCalledWith({
+        type: MessageType.ERROR,
+        text: 'Invalid extension name. Names cannot contain path separators or "..".',
+      });
+    });
+
+    // "should inform if extension has no settings" - This check is now inside ConfigExtensionDialog logic.
+    // We can test that we still return a dialog, and the dialog will handle logical checks via utils.ts
+    // For unit testing extensionsCommand, we just ensure delegation.
+    it('should return dialog even if extension has no settings (dialog handles logic)', async () => {
+      const result = await configAction!(mockContext, 'ext-one');
+      if (result?.type !== 'custom_dialog') {
+        throw new Error('Expected custom_dialog');
+      }
+      const dialogResult = result;
+      const component =
+        dialogResult.component as ReactElement<ConfigExtensionDialogProps>;
+      expect(component.type).toBe(ConfigExtensionDialog);
+    });
+  });
 });

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

@@ -32,6 +32,10 @@ import { SettingScope } from '../../config/settings.js';
 import { McpServerEnablementManager } from '../../config/mcp/mcpServerEnablement.js';
 import { theme } from '../semantic-colors.js';
 import { stat } from 'node:fs/promises';
+import { ExtensionSettingScope } from '../../config/extensions/extensionSettings.js';
+import { type ConfigLogger } from '../../commands/extensions/utils.js';
+import { ConfigExtensionDialog } from '../components/ConfigExtensionDialog.js';
+import React from 'react';
 
 function showMessageIfNoExtensions(
   context: CommandContext,
@@ -583,6 +587,77 @@ async function uninstallAction(context: CommandContext, args: string) {
   }
 }
 
+async function configAction(context: CommandContext, args: string) {
+  const parts = args.trim().split(/\s+/).filter(Boolean);
+  let scope = ExtensionSettingScope.USER;
+
+  const scopeEqIndex = parts.findIndex((p) => p.startsWith('--scope='));
+  if (scopeEqIndex > -1) {
+    const scopeVal = parts[scopeEqIndex].split('=')[1];
+    if (scopeVal === 'workspace') {
+      scope = ExtensionSettingScope.WORKSPACE;
+    } else if (scopeVal === 'user') {
+      scope = ExtensionSettingScope.USER;
+    }
+    parts.splice(scopeEqIndex, 1);
+  } else {
+    const scopeIndex = parts.indexOf('--scope');
+    if (scopeIndex > -1) {
+      const scopeVal = parts[scopeIndex + 1];
+      if (scopeVal === 'workspace' || scopeVal === 'user') {
+        scope =
+          scopeVal === 'workspace'
+            ? ExtensionSettingScope.WORKSPACE
+            : ExtensionSettingScope.USER;
+        parts.splice(scopeIndex, 2);
+      }
+    }
+  }
+
+  const otherArgs = parts;
+  const name = otherArgs[0];
+  const setting = otherArgs[1];
+
+  if (name) {
+    if (name.includes('/') || name.includes('\\') || name.includes('..')) {
+      context.ui.addItem({
+        type: MessageType.ERROR,
+        text: 'Invalid extension name. Names cannot contain path separators or "..".',
+      });
+      return;
+    }
+  }
+
+  const extensionManager = context.services.config?.getExtensionLoader();
+  if (!(extensionManager instanceof ExtensionManager)) {
+    debugLogger.error(
+      `Cannot ${context.invocation?.name} extensions in this environment`,
+    );
+    return;
+  }
+
+  const logger: ConfigLogger = {
+    log: (message: string) => {
+      context.ui.addItem({ type: MessageType.INFO, text: message.trim() });
+    },
+    error: (message: string) =>
+      context.ui.addItem({ type: MessageType.ERROR, text: message }),
+  };
+
+  return {
+    type: 'custom_dialog' as const,
+    component: React.createElement(ConfigExtensionDialog, {
+      extensionManager,
+      onClose: () => context.ui.removeComponent(),
+      extensionName: name,
+      settingKey: setting,
+      scope,
+      configureAll: !name && !setting,
+      loggerAdapter: logger,
+    }),
+  };
+}
+
 /**
  * Exported for testing.
  */
@@ -701,6 +776,14 @@ const restartCommand: SlashCommand = {
   completion: completeExtensions,
 };
 
+const configCommand: SlashCommand = {
+  name: 'config',
+  description: 'Configure extension settings',
+  kind: CommandKind.BUILT_IN,
+  autoExecute: false,
+  action: configAction,
+};
+
 export function extensionsCommand(
   enableExtensionReloading?: boolean,
 ): SlashCommand {
@@ -711,6 +794,7 @@ export function extensionsCommand(
         installCommand,
         uninstallCommand,
         linkCommand,
+        configCommand,
       ]
     : [];
   return {

packages/cli/src/ui/components/ConfigExtensionDialog.tsx

@@ -0,0 +1,343 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import type { ExtensionManager } from '../../config/extension-manager.js';
+import {
+  configureExtension,
+  configureSpecificSetting,
+  configureAllExtensions,
+  type ConfigLogger,
+  type RequestSettingCallback,
+  type RequestConfirmationCallback,
+} from '../../commands/extensions/utils.js';
+import {
+  ExtensionSettingScope,
+  type ExtensionSetting,
+} from '../../config/extensions/extensionSettings.js';
+import { TextInput } from './shared/TextInput.js';
+import { useTextBuffer } from './shared/text-buffer.js';
+import { DialogFooter } from './shared/DialogFooter.js';
+import { type Key, useKeypress } from '../hooks/useKeypress.js';
+
+export interface ConfigExtensionDialogProps {
+  extensionManager: ExtensionManager;
+  onClose: () => void;
+  extensionName?: string;
+  settingKey?: string;
+  scope?: ExtensionSettingScope;
+  configureAll?: boolean;
+  loggerAdapter: ConfigLogger;
+}
+
+type DialogState =
+  | { type: 'IDLE' }
+  | { type: 'BUSY'; message?: string }
+  | {
+      type: 'ASK_SETTING';
+      setting: ExtensionSetting;
+      resolve: (val: string) => void;
+      initialValue?: string;
+    }
+  | {
+      type: 'ASK_CONFIRMATION';
+      message: string;
+      resolve: (val: boolean) => void;
+    }
+  | { type: 'DONE' }
+  | { type: 'ERROR'; error: Error };
+
+export const ConfigExtensionDialog: React.FC<ConfigExtensionDialogProps> = ({
+  extensionManager,
+  onClose,
+  extensionName,
+  settingKey,
+  scope = ExtensionSettingScope.USER,
+  configureAll,
+  loggerAdapter,
+}) => {
+  const [state, setState] = useState<DialogState>({ type: 'IDLE' });
+  const [logMessages, setLogMessages] = useState<string[]>([]);
+
+  // Buffers for input
+  const settingBuffer = useTextBuffer({
+    initialText: '',
+    viewport: { width: 80, height: 1 },
+    singleLine: true,
+    isValidPath: () => true,
+  });
+
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const addLog = useCallback(
+    (msg: string) => {
+      setLogMessages((prev) => [...prev, msg].slice(-5)); // Keep last 5
+      loggerAdapter.log(msg);
+    },
+    [loggerAdapter],
+  );
+
+  const requestSetting: RequestSettingCallback = useCallback(
+    async (setting) =>
+      new Promise<string>((resolve) => {
+        if (!mounted.current) return;
+        settingBuffer.setText(''); // Clear buffer
+        setState({
+          type: 'ASK_SETTING',
+          setting,
+          resolve: (val) => {
+            resolve(val);
+            setState({ type: 'BUSY', message: 'Updating...' });
+          },
+        });
+      }),
+    [settingBuffer],
+  );
+
+  const requestConfirmation: RequestConfirmationCallback = useCallback(
+    async (message) =>
+      new Promise<boolean>((resolve) => {
+        if (!mounted.current) return;
+        setState({
+          type: 'ASK_CONFIRMATION',
+          message,
+          resolve: (val) => {
+            resolve(val);
+            setState({ type: 'BUSY', message: 'Processing...' });
+          },
+        });
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    async function run() {
+      try {
+        setState({ type: 'BUSY', message: 'Initializing...' });
+
+        // Wrap logger to capture logs locally too
+        const localLogger: ConfigLogger = {
+          log: (msg) => {
+            addLog(msg);
+          },
+          error: (msg) => {
+            addLog('Error: ' + msg);
+            loggerAdapter.error(msg);
+          },
+        };
+
+        if (configureAll) {
+          await configureAllExtensions(
+            extensionManager,
+            scope,
+            localLogger,
+            requestSetting,
+            requestConfirmation,
+          );
+        } else if (extensionName && settingKey) {
+          await configureSpecificSetting(
+            extensionManager,
+            extensionName,
+            settingKey,
+            scope,
+            localLogger,
+            requestSetting,
+          );
+        } else if (extensionName) {
+          await configureExtension(
+            extensionManager,
+            extensionName,
+            scope,
+            localLogger,
+            requestSetting,
+            requestConfirmation,
+          );
+        }
+
+        if (mounted.current) {
+          setState({ type: 'DONE' });
+          // Delay close slightly to show done
+          setTimeout(onClose, 1000);
+        }
+      } catch (err: unknown) {
+        if (mounted.current) {
+          const error = err instanceof Error ? err : new Error(String(err));
+          setState({ type: 'ERROR', error });
+          loggerAdapter.error(error.message);
+        }
+      }
+    }
+
+    // Only run once
+    if (state.type === 'IDLE') {
+      void run();
+    }
+  }, [
+    extensionManager,
+    extensionName,
+    settingKey,
+    scope,
+    configureAll,
+    loggerAdapter,
+    requestSetting,
+    requestConfirmation,
+    addLog,
+    onClose,
+    state.type,
+  ]);
+
+  // Handle Input Submission
+  const handleSettingSubmit = (val: string) => {
+    if (state.type === 'ASK_SETTING') {
+      state.resolve(val);
+    }
+  };
+
+  // Handle Keys for Confirmation
+  useKeypress(
+    (key: Key) => {
+      if (state.type === 'ASK_CONFIRMATION') {
+        if (key.name === 'y' || key.name === 'return') {
+          state.resolve(true);
+          return true;
+        }
+        if (key.name === 'n' || key.name === 'escape') {
+          state.resolve(false);
+          return true;
+        }
+      }
+      if (state.type === 'DONE' || state.type === 'ERROR') {
+        if (key.name === 'return' || key.name === 'escape') {
+          onClose();
+          return true;
+        }
+      }
+      return false;
+    },
+    {
+      isActive:
+        state.type === 'ASK_CONFIRMATION' ||
+        state.type === 'DONE' ||
+        state.type === 'ERROR',
+    },
+  );
+
+  if (state.type === 'BUSY' || state.type === 'IDLE') {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.border.default}
+        paddingX={1}
+      >
+        <Text color={theme.text.secondary}>
+          {state.type === 'BUSY' ? state.message : 'Starting...'}
+        </Text>
+        {logMessages.map((msg, i) => (
+          <Text key={i}>{msg}</Text>
+        ))}
+      </Box>
+    );
+  }
+
+  if (state.type === 'ASK_SETTING') {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.border.default}
+        paddingX={1}
+      >
+        <Text bold color={theme.text.primary}>
+          Configure {state.setting.name}
+        </Text>
+        <Text color={theme.text.secondary}>
+          {state.setting.description || state.setting.envVar}
+        </Text>
+        <Box flexDirection="row" marginTop={1}>
+          <Text color={theme.text.accent}>{'> '}</Text>
+          <TextInput
+            buffer={settingBuffer}
+            onSubmit={handleSettingSubmit}
+            focus={true}
+            placeholder={`Enter value for ${state.setting.name}`}
+          />
+        </Box>
+        <DialogFooter primaryAction="Enter to submit" />
+      </Box>
+    );
+  }
+
+  if (state.type === 'ASK_CONFIRMATION') {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.border.default}
+        paddingX={1}
+      >
+        <Text color={theme.status.warning} bold>
+          Confirmation Required
+        </Text>
+        <Text>{state.message}</Text>
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>
+            Press{' '}
+            <Text color={theme.text.accent} bold>
+              Y
+            </Text>{' '}
+            to confirm or{' '}
+            <Text color={theme.text.accent} bold>
+              N
+            </Text>{' '}
+            to cancel
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (state.type === 'ERROR') {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.status.error}
+        paddingX={1}
+      >
+        <Text color={theme.status.error} bold>
+          Error
+        </Text>
+        <Text>{state.error.message}</Text>
+        <DialogFooter primaryAction="Enter to close" />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.status.success}
+      paddingX={1}
+    >
+      <Text color={theme.status.success} bold>
+        Configuration Complete
+      </Text>
+      <DialogFooter primaryAction="Enter to close" />
+    </Box>
+  );
+};