[Extension Reloading]: Update custom commands, add enable/disable command (#12547)

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

@@ -14,14 +14,20 @@ import {
   type EditorDisplay,
 } from '../editors/editorSettingsManager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
-import type { LoadedSettings } from '../../config/settings.js';
+import type {
+  LoadableSettingScope,
+  LoadedSettings,
+} from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import type { EditorType } from '@google/gemini-cli-core';
 import { isEditorAvailable } from '@google/gemini-cli-core';
 import { useKeypress } from '../hooks/useKeypress.js';
 
 interface EditorDialogProps {
-  onSelect: (editorType: EditorType | undefined, scope: SettingScope) => void;
+  onSelect: (
+    editorType: EditorType | undefined,
+    scope: LoadableSettingScope,
+  ) => void;
   settings: LoadedSettings;
   onExit: () => void;
 }
@@ -31,7 +37,7 @@ export function EditorSettingsDialog({
   settings,
   onExit,
 }: EditorDialogProps): React.JSX.Element {
-  const [selectedScope, setSelectedScope] = useState<SettingScope>(
+  const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
     SettingScope.User,
   );
   const [focusedSection, setFocusedSection] = useState<'editor' | 'scope'>(
@@ -64,7 +70,11 @@ export function EditorSettingsDialog({
     editorIndex = 0;
   }
 
-  const scopeItems = [
+  const scopeItems: Array<{
+    label: string;
+    value: LoadableSettingScope;
+    key: string;
+  }> = [
     {
       label: 'User Settings',
       value: SettingScope.User,
@@ -85,7 +95,7 @@ export function EditorSettingsDialog({
     onSelect(editorType, selectedScope);
   };
 
-  const handleScopeSelect = (scope: SettingScope) => {
+  const handleScopeSelect = (scope: LoadableSettingScope) => {
     setSelectedScope(scope);
     setFocusedSection('editor');
   };

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

@@ -7,7 +7,11 @@
 import React, { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
-import type { LoadedSettings, Settings } from '../../config/settings.js';
+import type {
+  LoadableSettingScope,
+  LoadedSettings,
+  Settings,
+} from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import {
   getScopeItems,
@@ -63,7 +67,7 @@ export function SettingsDialog({
     'settings',
   );
   // Scope selector state (User by default)
-  const [selectedScope, setSelectedScope] = useState<SettingScope>(
+  const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
     SettingScope.User,
   );
   // Active indices
@@ -358,11 +362,11 @@ export function SettingsDialog({
     key: item.value,
   }));
 
-  const handleScopeHighlight = (scope: SettingScope) => {
+  const handleScopeHighlight = (scope: LoadableSettingScope) => {
     setSelectedScope(scope);
   };
 
-  const handleScopeSelect = (scope: SettingScope) => {
+  const handleScopeSelect = (scope: LoadableSettingScope) => {
     handleScopeHighlight(scope);
     setFocusSection('settings');
   };

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

@@ -12,7 +12,10 @@ import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import { DiffRenderer } from './messages/DiffRenderer.js';
 import { colorizeCode } from '../utils/CodeColorizer.js';
-import type { LoadedSettings } from '../../config/settings.js';
+import type {
+  LoadableSettingScope,
+  LoadedSettings,
+} from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
 import { useKeypress } from '../hooks/useKeypress.js';
@@ -20,7 +23,7 @@ import { ScopeSelector } from './shared/ScopeSelector.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
-  onSelect: (themeName: string, scope: SettingScope) => void;
+  onSelect: (themeName: string, scope: LoadableSettingScope) => void;
 
   /** Callback function when the dialog is cancelled */
   onCancel: () => void;
@@ -41,7 +44,7 @@ export function ThemeDialog({
   availableTerminalHeight,
   terminalWidth,
 }: ThemeDialogProps): React.JSX.Element {
-  const [selectedScope, setSelectedScope] = useState<SettingScope>(
+  const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
     SettingScope.User,
   );
 
@@ -97,12 +100,12 @@ export function ThemeDialog({
     onHighlight(themeName);
   };
 
-  const handleScopeHighlight = useCallback((scope: SettingScope) => {
+  const handleScopeHighlight = useCallback((scope: LoadableSettingScope) => {
     setSelectedScope(scope);
   }, []);
 
   const handleScopeSelect = useCallback(
-    (scope: SettingScope) => {
+    (scope: LoadableSettingScope) => {
       onSelect(highlightedThemeName, scope);
     },
     [onSelect, highlightedThemeName],

packages/cli/src/ui/components/shared/ScopeSelector.tsx

@@ -6,19 +6,19 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import type { SettingScope } from '../../../config/settings.js';
+import type { LoadableSettingScope } from '../../../config/settings.js';
 import { getScopeItems } from '../../../utils/dialogScopeUtils.js';
 import { RadioButtonSelect } from './RadioButtonSelect.js';
 
 interface ScopeSelectorProps {
   /** Callback function when a scope is selected */
-  onSelect: (scope: SettingScope) => void;
+  onSelect: (scope: LoadableSettingScope) => void;
   /** Callback function when a scope is highlighted */
-  onHighlight: (scope: SettingScope) => void;
+  onHighlight: (scope: LoadableSettingScope) => void;
   /** Whether the component is focused */
   isFocused: boolean;
   /** The initial scope to select */
-  initialScope: SettingScope;
+  initialScope: LoadableSettingScope;
 }
 
 export function ScopeSelector({