mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-20 16:57:46 +00:00
feat: subagent feature wip
This commit is contained in:
tanzhenxin
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { useReducer, useCallback, useMemo } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { wizardReducer, initialWizardState } from '../reducers.js';
|
||||
import { LocationSelector } from './LocationSelector.js';
|
||||
import { GenerationMethodSelector } from './GenerationMethodSelector.js';
|
||||
import { DescriptionInput } from './DescriptionInput.js';
|
||||
import { ToolSelector } from './ToolSelector.js';
|
||||
import { ColorSelector } from './ColorSelector.js';
|
||||
import { CreationSummary } from './CreationSummary.js';
|
||||
import { WizardStepProps } from '../types.js';
|
||||
import { WIZARD_STEPS } from '../constants.js';
|
||||
import { Config } from '@qwen-code/qwen-code-core';
|
||||
import { Colors } from '../../../colors.js';
|
||||
import { theme } from '../../../semantic-colors.js';
|
||||
|
||||
interface AgentCreationWizardProps {
|
||||
onClose: () => void;
|
||||
config: Config | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main orchestrator component for the subagent creation wizard.
|
||||
*/
|
||||
export function AgentCreationWizard({
|
||||
onClose,
|
||||
config,
|
||||
}: AgentCreationWizardProps) {
|
||||
const [state, dispatch] = useReducer(wizardReducer, initialWizardState);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch({ type: 'GO_TO_NEXT_STEP' });
|
||||
}, []);
|
||||
|
||||
const handlePrevious = useCallback(() => {
|
||||
dispatch({ type: 'GO_TO_PREVIOUS_STEP' });
|
||||
}, []);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
dispatch({ type: 'RESET_WIZARD' });
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// Centralized ESC key handling for the entire wizard
|
||||
useInput((input, key) => {
|
||||
if (key.escape) {
|
||||
// Step 3 (DescriptionInput) handles its own ESC logic when generating
|
||||
if (
|
||||
state.currentStep === WIZARD_STEPS.DESCRIPTION_INPUT &&
|
||||
state.isGenerating
|
||||
) {
|
||||
return; // Let DescriptionInput handle it
|
||||
}
|
||||
|
||||
if (state.currentStep === WIZARD_STEPS.LOCATION_SELECTION) {
|
||||
// On first step, ESC cancels the entire wizard
|
||||
handleCancel();
|
||||
} else {
|
||||
// On other steps, ESC goes back to previous step
|
||||
handlePrevious();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const stepProps: WizardStepProps = useMemo(
|
||||
() => ({
|
||||
state,
|
||||
dispatch,
|
||||
onNext: handleNext,
|
||||
onPrevious: handlePrevious,
|
||||
onCancel: handleCancel,
|
||||
config,
|
||||
}),
|
||||
[state, dispatch, handleNext, handlePrevious, handleCancel, config],
|
||||
);
|
||||
|
||||
const renderStepHeader = useCallback(() => {
|
||||
const getStepHeaderText = () => {
|
||||
switch (state.currentStep) {
|
||||
case WIZARD_STEPS.LOCATION_SELECTION:
|
||||
return 'Step 1: Choose Location';
|
||||
case WIZARD_STEPS.GENERATION_METHOD:
|
||||
return 'Step 2: Choose Generation Method';
|
||||
case WIZARD_STEPS.DESCRIPTION_INPUT:
|
||||
return 'Step 3: Describe Your Subagent';
|
||||
case WIZARD_STEPS.TOOL_SELECTION:
|
||||
return 'Step 4: Select Tools';
|
||||
case WIZARD_STEPS.COLOR_SELECTION:
|
||||
return 'Step 5: Choose Background Color';
|
||||
case WIZARD_STEPS.FINAL_CONFIRMATION:
|
||||
return 'Step 6: Confirm and Save';
|
||||
default:
|
||||
return 'Unknown Step';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Text bold>{getStepHeaderText()}</Text>
|
||||
</Box>
|
||||
);
|
||||
}, [state.currentStep]);
|
||||
|
||||
const renderDebugContent = useCallback(() => {
|
||||
if (process.env['NODE_ENV'] !== 'development') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box borderStyle="single" borderColor={theme.status.warning} padding={1}>
|
||||
<Box flexDirection="column">
|
||||
<Text color={theme.status.warning} bold>
|
||||
Debug Info:
|
||||
</Text>
|
||||
<Text color={Colors.Gray}>Step: {state.currentStep}</Text>
|
||||
<Text color={Colors.Gray}>
|
||||
Can Proceed: {state.canProceed ? 'Yes' : 'No'}
|
||||
</Text>
|
||||
<Text color={Colors.Gray}>
|
||||
Generating: {state.isGenerating ? 'Yes' : 'No'}
|
||||
</Text>
|
||||
<Text color={Colors.Gray}>Location: {state.location}</Text>
|
||||
<Text color={Colors.Gray}>Method: {state.generationMethod}</Text>
|
||||
{state.validationErrors.length > 0 && (
|
||||
<Text color={theme.status.error}>
|
||||
Errors: {state.validationErrors.join(', ')}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}, [
|
||||
state.currentStep,
|
||||
state.canProceed,
|
||||
state.isGenerating,
|
||||
state.location,
|
||||
state.generationMethod,
|
||||
state.validationErrors,
|
||||
]);
|
||||
|
||||
const renderStepFooter = useCallback(() => {
|
||||
const getNavigationInstructions = () => {
|
||||
// Special case: During generation in description input step, only show cancel option
|
||||
if (
|
||||
state.currentStep === WIZARD_STEPS.DESCRIPTION_INPUT &&
|
||||
state.isGenerating
|
||||
) {
|
||||
return 'Esc to cancel';
|
||||
}
|
||||
|
||||
if (state.currentStep === WIZARD_STEPS.FINAL_CONFIRMATION) {
|
||||
return 'Press Enter to save, e to save and edit, Esc to go back';
|
||||
}
|
||||
|
||||
// Steps that have ↑↓ navigation (RadioButtonSelect components)
|
||||
const stepsWithNavigation = [
|
||||
WIZARD_STEPS.LOCATION_SELECTION,
|
||||
WIZARD_STEPS.GENERATION_METHOD,
|
||||
WIZARD_STEPS.TOOL_SELECTION,
|
||||
WIZARD_STEPS.COLOR_SELECTION,
|
||||
] as const;
|
||||
|
||||
const hasNavigation = (stepsWithNavigation as readonly number[]).includes(
|
||||
state.currentStep,
|
||||
);
|
||||
const navigationPart = hasNavigation ? '↑↓ to navigate, ' : '';
|
||||
|
||||
const escAction =
|
||||
state.currentStep === WIZARD_STEPS.LOCATION_SELECTION
|
||||
? 'cancel'
|
||||
: 'go back';
|
||||
|
||||
return `Press Enter to continue, ${navigationPart}Esc to ${escAction}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Text color={theme.text.secondary}>{getNavigationInstructions()}</Text>
|
||||
</Box>
|
||||
);
|
||||
}, [state.currentStep, state.isGenerating]);
|
||||
|
||||
const renderStepContent = useCallback(() => {
|
||||
switch (state.currentStep) {
|
||||
case WIZARD_STEPS.LOCATION_SELECTION:
|
||||
return <LocationSelector {...stepProps} />;
|
||||
case WIZARD_STEPS.GENERATION_METHOD:
|
||||
return <GenerationMethodSelector {...stepProps} />;
|
||||
case WIZARD_STEPS.DESCRIPTION_INPUT:
|
||||
return <DescriptionInput {...stepProps} />;
|
||||
case WIZARD_STEPS.TOOL_SELECTION:
|
||||
return (
|
||||
<ToolSelector
|
||||
tools={state.selectedTools}
|
||||
onSelect={(tools) => {
|
||||
dispatch({ type: 'SET_TOOLS', tools });
|
||||
handleNext();
|
||||
}}
|
||||
config={config}
|
||||
/>
|
||||
);
|
||||
case WIZARD_STEPS.COLOR_SELECTION:
|
||||
return (
|
||||
<ColorSelector
|
||||
color={state.color}
|
||||
agentName={state.generatedName}
|
||||
onSelect={(color) => {
|
||||
dispatch({ type: 'SET_BACKGROUND_COLOR', color });
|
||||
handleNext();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case WIZARD_STEPS.FINAL_CONFIRMATION:
|
||||
return <CreationSummary {...stepProps} />;
|
||||
default:
|
||||
return (
|
||||
<Box>
|
||||
<Text color={theme.status.error}>
|
||||
Invalid step: {state.currentStep}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}, [
|
||||
stepProps,
|
||||
state.currentStep,
|
||||
state.selectedTools,
|
||||
state.color,
|
||||
state.generatedName,
|
||||
config,
|
||||
handleNext,
|
||||
dispatch,
|
||||
]);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
{/* Main content wrapped in bounding box */}
|
||||
<Box
|
||||
borderStyle="single"
|
||||
borderColor={Colors.Gray}
|
||||
flexDirection="column"
|
||||
padding={1}
|
||||
width="100%"
|
||||
gap={1}
|
||||
>
|
||||
{renderStepHeader()}
|
||||
{renderStepContent()}
|
||||
{renderDebugContent()}
|
||||
{renderStepFooter()}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
|
||||
import { ColorOption } from '../types.js';
|
||||
import { Colors } from '../../../colors.js';
|
||||
import { COLOR_OPTIONS } from '../constants.js';
|
||||
|
||||
const colorOptions: ColorOption[] = COLOR_OPTIONS;
|
||||
|
||||
interface ColorSelectorProps {
|
||||
color?: string;
|
||||
agentName?: string;
|
||||
onSelect: (color: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Color selection with preview.
|
||||
*/
|
||||
export function ColorSelector({
|
||||
color = 'auto',
|
||||
agentName = 'Agent',
|
||||
onSelect,
|
||||
}: ColorSelectorProps) {
|
||||
const [selectedColor, setSelectedColor] = useState<string>(color);
|
||||
|
||||
// Update selected color when color prop changes
|
||||
useEffect(() => {
|
||||
setSelectedColor(color);
|
||||
}, [color]);
|
||||
|
||||
const handleSelect = (selectedValue: string) => {
|
||||
const colorOption = colorOptions.find(
|
||||
(option) => option.id === selectedValue,
|
||||
);
|
||||
if (colorOption) {
|
||||
onSelect(colorOption.name);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHighlight = (selectedValue: string) => {
|
||||
const colorOption = colorOptions.find(
|
||||
(option) => option.id === selectedValue,
|
||||
);
|
||||
if (colorOption) {
|
||||
setSelectedColor(colorOption.name);
|
||||
}
|
||||
};
|
||||
|
||||
const currentColor =
|
||||
colorOptions.find((option) => option.name === selectedColor) ||
|
||||
colorOptions[0];
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box flexDirection="column">
|
||||
<RadioButtonSelect
|
||||
items={colorOptions.map((option) => ({
|
||||
label: option.name,
|
||||
value: option.id,
|
||||
}))}
|
||||
initialIndex={colorOptions.findIndex(
|
||||
(opt) => opt.id === currentColor.id,
|
||||
)}
|
||||
onSelect={handleSelect}
|
||||
onHighlight={handleHighlight}
|
||||
isFocused={true}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box flexDirection="row">
|
||||
<Text color={Colors.Gray}>Preview:</Text>
|
||||
<Box marginLeft={2}>
|
||||
<Text color={currentColor.value}>{` ${agentName} `}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { useCallback, useState, useEffect } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import { WizardStepProps } from '../types.js';
|
||||
import { SubagentManager, SubagentConfig } from '@qwen-code/qwen-code-core';
|
||||
import { theme } from '../../../semantic-colors.js';
|
||||
import { shouldShowColor, getColorForDisplay } from '../utils.js';
|
||||
import { useLaunchEditor } from '../../../hooks/useLaunchEditor.js';
|
||||
|
||||
/**
|
||||
* Step 6: Final confirmation and actions.
|
||||
*/
|
||||
export function CreationSummary({
|
||||
state,
|
||||
onPrevious: _onPrevious,
|
||||
onCancel,
|
||||
config,
|
||||
}: WizardStepProps) {
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
const [warnings, setWarnings] = useState<string[]>([]);
|
||||
|
||||
const launchEditor = useLaunchEditor();
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.substring(0, maxLength - 3) + '...';
|
||||
};
|
||||
|
||||
// Check for warnings
|
||||
useEffect(() => {
|
||||
const checkWarnings = async () => {
|
||||
if (!config || !state.generatedName) return;
|
||||
|
||||
const allWarnings: string[] = [];
|
||||
|
||||
try {
|
||||
// Get project root from config
|
||||
const subagentManager = config.getSubagentManager();
|
||||
|
||||
// Check for name conflicts
|
||||
const isAvailable = await subagentManager.isNameAvailable(
|
||||
state.generatedName,
|
||||
);
|
||||
if (!isAvailable) {
|
||||
const existing = await subagentManager.loadSubagent(
|
||||
state.generatedName,
|
||||
);
|
||||
if (existing) {
|
||||
const conflictLevel =
|
||||
existing.level === 'project' ? 'project' : 'user';
|
||||
const targetLevel = state.location;
|
||||
|
||||
if (conflictLevel === targetLevel) {
|
||||
allWarnings.push(
|
||||
`Name "${state.generatedName}" already exists at ${conflictLevel} level - will overwrite existing subagent`,
|
||||
);
|
||||
} else if (targetLevel === 'project') {
|
||||
allWarnings.push(
|
||||
`Name "${state.generatedName}" exists at user level - project level will take precedence`,
|
||||
);
|
||||
} else {
|
||||
allWarnings.push(
|
||||
`Name "${state.generatedName}" exists at project level - existing subagent will take precedence`,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle errors in warning checks
|
||||
console.warn('Error checking subagent name availability:', error);
|
||||
}
|
||||
|
||||
// Check length warnings
|
||||
if (state.generatedDescription.length > 300) {
|
||||
allWarnings.push(
|
||||
`Description is over ${state.generatedDescription.length} characters`,
|
||||
);
|
||||
}
|
||||
if (state.generatedSystemPrompt.length > 10000) {
|
||||
allWarnings.push(
|
||||
`System prompt is over ${state.generatedSystemPrompt.length} characters`,
|
||||
);
|
||||
}
|
||||
|
||||
setWarnings(allWarnings);
|
||||
};
|
||||
|
||||
checkWarnings();
|
||||
}, [
|
||||
config,
|
||||
state.generatedName,
|
||||
state.generatedDescription,
|
||||
state.generatedSystemPrompt,
|
||||
state.location,
|
||||
]);
|
||||
|
||||
const toolsDisplay = Array.isArray(state.selectedTools)
|
||||
? state.selectedTools.join(', ')
|
||||
: '*';
|
||||
|
||||
// Common method to save subagent configuration
|
||||
const saveSubagent = useCallback(async (): Promise<SubagentManager> => {
|
||||
// Create SubagentManager instance
|
||||
if (!config) {
|
||||
throw new Error('Configuration not available');
|
||||
}
|
||||
const subagentManager = config.getSubagentManager();
|
||||
|
||||
// Build subagent configuration
|
||||
const subagentConfig: SubagentConfig = {
|
||||
name: state.generatedName,
|
||||
description: state.generatedDescription,
|
||||
systemPrompt: state.generatedSystemPrompt,
|
||||
level: state.location,
|
||||
filePath: '', // Will be set by manager
|
||||
tools: Array.isArray(state.selectedTools)
|
||||
? state.selectedTools
|
||||
: undefined,
|
||||
color: state.color,
|
||||
};
|
||||
|
||||
// Create the subagent
|
||||
await subagentManager.createSubagent(subagentConfig, {
|
||||
level: state.location,
|
||||
overwrite: true,
|
||||
});
|
||||
|
||||
return subagentManager;
|
||||
}, [state, config]);
|
||||
|
||||
// Common method to show success and auto-close
|
||||
const showSuccessAndClose = useCallback(() => {
|
||||
setSaveSuccess(true);
|
||||
// Auto-close after successful save
|
||||
setTimeout(() => {
|
||||
onCancel();
|
||||
}, 2000);
|
||||
}, [onCancel]);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
setSaveError(null);
|
||||
|
||||
try {
|
||||
await saveSubagent();
|
||||
showSuccessAndClose();
|
||||
} catch (error) {
|
||||
setSaveError(
|
||||
error instanceof Error ? error.message : 'Unknown error occurred',
|
||||
);
|
||||
}
|
||||
}, [saveSubagent, showSuccessAndClose]);
|
||||
|
||||
const handleEdit = useCallback(async () => {
|
||||
// Clear any previous error messages
|
||||
setSaveError(null);
|
||||
|
||||
try {
|
||||
// Save the subagent to file first using shared logic
|
||||
const subagentManager = await saveSubagent();
|
||||
|
||||
// Get the file path of the created subagent
|
||||
const subagentFilePath = subagentManager.getSubagentPath(
|
||||
state.generatedName,
|
||||
state.location,
|
||||
);
|
||||
|
||||
// Launch editor with the actual subagent file
|
||||
await launchEditor(subagentFilePath);
|
||||
|
||||
// Show success UI and auto-close after successful edit
|
||||
showSuccessAndClose();
|
||||
} catch (error) {
|
||||
setSaveError(
|
||||
`Failed to save and edit subagent: ${error instanceof Error ? error.message : 'Unknown error'}`,
|
||||
);
|
||||
}
|
||||
}, [
|
||||
saveSubagent,
|
||||
showSuccessAndClose,
|
||||
state.generatedName,
|
||||
state.location,
|
||||
launchEditor,
|
||||
]);
|
||||
|
||||
// Handle keyboard input
|
||||
useInput((input, key) => {
|
||||
if (saveSuccess) return;
|
||||
|
||||
if (key.return || input === 's') {
|
||||
handleSave();
|
||||
return;
|
||||
}
|
||||
|
||||
if (input === 'e') {
|
||||
handleEdit();
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (saveSuccess) {
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box>
|
||||
<Text bold color={theme.status.success}>
|
||||
✅ Subagent Created Successfully!
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>
|
||||
Subagent "{state.generatedName}" has been saved to{' '}
|
||||
{state.location} level.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box flexDirection="column">
|
||||
<Box>
|
||||
<Text bold>Name: </Text>
|
||||
<Text>{state.generatedName}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text bold>Location: </Text>
|
||||
<Text>
|
||||
{state.location === 'project'
|
||||
? 'Project Level (.qwen/agents/)'
|
||||
: 'User Level (~/.qwen/agents/)'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text bold>Tools: </Text>
|
||||
<Text>{toolsDisplay}</Text>
|
||||
</Box>
|
||||
|
||||
{shouldShowColor(state.color) && (
|
||||
<Box>
|
||||
<Text bold>Color: </Text>
|
||||
<Text
|
||||
color={getColorForDisplay(state.color)}
|
||||
>{` ${state.generatedName} `}</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text bold>Description:</Text>
|
||||
</Box>
|
||||
<Box padding={1} paddingBottom={0}>
|
||||
<Text wrap="wrap">
|
||||
{truncateText(state.generatedDescription, 250)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text bold>System Prompt:</Text>
|
||||
</Box>
|
||||
<Box padding={1} paddingBottom={0}>
|
||||
<Text wrap="wrap">
|
||||
{truncateText(state.generatedSystemPrompt, 250)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{saveError && (
|
||||
<Box flexDirection="column">
|
||||
<Text bold color={theme.status.error}>
|
||||
❌ Error saving subagent:
|
||||
</Text>
|
||||
<Box flexDirection="column" padding={1} paddingBottom={0}>
|
||||
<Text color={theme.status.error} wrap="wrap">
|
||||
{saveError}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{warnings.length > 0 && (
|
||||
<Box flexDirection="column">
|
||||
<Text bold color={theme.status.warning}>
|
||||
Warnings:
|
||||
</Text>
|
||||
<Box flexDirection="column" padding={1} paddingBottom={0}>
|
||||
{warnings.map((warning, index) => (
|
||||
<Text key={index} color={theme.status.warning} wrap="wrap">
|
||||
• {warning}
|
||||
</Text>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,315 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { WizardStepProps, WizardAction } from '../types.js';
|
||||
import { sanitizeInput } from '../utils.js';
|
||||
import { Config, subagentGenerator } from '@qwen-code/qwen-code-core';
|
||||
import { useTextBuffer } from '../../shared/text-buffer.js';
|
||||
import { useKeypress, Key } from '../../../hooks/useKeypress.js';
|
||||
import { keyMatchers, Command } from '../../../keyMatchers.js';
|
||||
import { theme } from '../../../semantic-colors.js';
|
||||
import { cpSlice, cpLen } from '../../../utils/textUtils.js';
|
||||
import chalk from 'chalk';
|
||||
import stringWidth from 'string-width';
|
||||
import { Colors } from '../../../colors.js';
|
||||
|
||||
/**
|
||||
* Step 3: Description input with LLM generation.
|
||||
*/
|
||||
export function DescriptionInput({
|
||||
state,
|
||||
dispatch,
|
||||
onNext,
|
||||
config,
|
||||
}: WizardStepProps) {
|
||||
const [inputWidth] = useState(80); // Fixed width for now
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
|
||||
const handleTextChange = useCallback(
|
||||
(text: string) => {
|
||||
const sanitized = sanitizeInput(text);
|
||||
dispatch({
|
||||
type: 'SET_USER_DESCRIPTION',
|
||||
description: sanitized,
|
||||
});
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
const buffer = useTextBuffer({
|
||||
initialText: state.userDescription || '',
|
||||
viewport: { height: 10, width: inputWidth },
|
||||
isValidPath: () => false, // For subagent description, we don't need file path validation
|
||||
onChange: handleTextChange,
|
||||
});
|
||||
|
||||
const handleGenerate = useCallback(
|
||||
async (
|
||||
userDescription: string,
|
||||
dispatch: (action: WizardAction) => void,
|
||||
config: Config,
|
||||
): Promise<void> => {
|
||||
const abortController = new AbortController();
|
||||
abortControllerRef.current = abortController;
|
||||
|
||||
try {
|
||||
const generated = await subagentGenerator(
|
||||
userDescription,
|
||||
config.getGeminiClient(),
|
||||
abortController.signal,
|
||||
);
|
||||
|
||||
// Only dispatch if not aborted
|
||||
if (!abortController.signal.aborted) {
|
||||
dispatch({
|
||||
type: 'SET_GENERATED_CONTENT',
|
||||
name: generated.name,
|
||||
description: generated.description,
|
||||
systemPrompt: generated.systemPrompt,
|
||||
});
|
||||
onNext();
|
||||
}
|
||||
} finally {
|
||||
abortControllerRef.current = null;
|
||||
}
|
||||
},
|
||||
[onNext],
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (!state.canProceed || state.isGenerating || !buffer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const inputValue = buffer.text.trim();
|
||||
if (!inputValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Start LLM generation
|
||||
dispatch({ type: 'SET_GENERATING', isGenerating: true });
|
||||
|
||||
try {
|
||||
if (!config) {
|
||||
throw new Error('Configuration not available');
|
||||
}
|
||||
|
||||
// Use real LLM integration
|
||||
await handleGenerate(inputValue, dispatch, config);
|
||||
} catch (error) {
|
||||
dispatch({ type: 'SET_GENERATING', isGenerating: false });
|
||||
|
||||
// Don't show error if it was cancelled by user
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'SET_VALIDATION_ERRORS',
|
||||
errors: [
|
||||
`Failed to generate subagent: ${error instanceof Error ? error.message : 'Unknown error'}`,
|
||||
],
|
||||
});
|
||||
}
|
||||
}, [
|
||||
state.canProceed,
|
||||
state.isGenerating,
|
||||
buffer,
|
||||
dispatch,
|
||||
config,
|
||||
handleGenerate,
|
||||
]);
|
||||
|
||||
// Handle keyboard input during generation
|
||||
const handleGenerationKeypress = useCallback(
|
||||
(key: Key) => {
|
||||
if (keyMatchers[Command.ESCAPE](key)) {
|
||||
if (abortControllerRef.current) {
|
||||
// Cancel the ongoing generation
|
||||
abortControllerRef.current.abort();
|
||||
dispatch({ type: 'SET_GENERATING', isGenerating: false });
|
||||
}
|
||||
}
|
||||
},
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
// Handle keyboard input for text editing
|
||||
const handleInput = useCallback(
|
||||
(key: Key) => {
|
||||
if (!buffer) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyMatchers[Command.SUBMIT](key)) {
|
||||
if (buffer.text.trim()) {
|
||||
const [row, col] = buffer.cursor;
|
||||
const line = buffer.lines[row];
|
||||
const charBefore = col > 0 ? cpSlice(line, col - 1, col) : '';
|
||||
if (charBefore === '\\') {
|
||||
buffer.backspace();
|
||||
buffer.newline();
|
||||
} else {
|
||||
handleSubmit();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Newline insertion
|
||||
if (keyMatchers[Command.NEWLINE](key)) {
|
||||
buffer.newline();
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl+A (Home) / Ctrl+E (End)
|
||||
if (keyMatchers[Command.HOME](key)) {
|
||||
buffer.move('home');
|
||||
return;
|
||||
}
|
||||
if (keyMatchers[Command.END](key)) {
|
||||
buffer.move('end');
|
||||
buffer.moveToOffset(cpLen(buffer.text));
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl+C (Clear input)
|
||||
if (keyMatchers[Command.CLEAR_INPUT](key)) {
|
||||
if (buffer.text.length > 0) {
|
||||
buffer.setText('');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Kill line commands
|
||||
if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
|
||||
buffer.killLineRight();
|
||||
return;
|
||||
}
|
||||
if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
|
||||
buffer.killLineLeft();
|
||||
return;
|
||||
}
|
||||
|
||||
// External editor
|
||||
if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
|
||||
buffer.openInExternalEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
// Fall back to the text buffer's default input handling for all other keys
|
||||
buffer.handleInput(key);
|
||||
},
|
||||
[buffer, handleSubmit],
|
||||
);
|
||||
|
||||
// Use separate keypress handlers for different states
|
||||
useKeypress(handleGenerationKeypress, {
|
||||
isActive: state.isGenerating,
|
||||
});
|
||||
|
||||
useKeypress(handleInput, {
|
||||
isActive: !state.isGenerating,
|
||||
});
|
||||
|
||||
if (!buffer) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const linesToRender = buffer.viewportVisualLines;
|
||||
const [cursorVisualRowAbsolute, cursorVisualColAbsolute] =
|
||||
buffer.visualCursor;
|
||||
const scrollVisualRow = buffer.visualScrollRow;
|
||||
const placeholder =
|
||||
'e.g., Expert code reviewer that reviews code based on best practices...';
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box>
|
||||
<Text color={Colors.Gray}>
|
||||
Describe what this subagent should do and when it should be used. (Be
|
||||
comprehensive for best results)
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{state.isGenerating ? (
|
||||
<Box>
|
||||
<Text color={theme.text.accent}>
|
||||
⏳ Generating subagent configuration...
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Box>
|
||||
<Text color={theme.text.accent}>{'> '}</Text>
|
||||
<Box flexGrow={1} flexDirection="column">
|
||||
{buffer.text.length === 0 && placeholder ? (
|
||||
<Text>
|
||||
{chalk.inverse(placeholder.slice(0, 1))}
|
||||
<Text color={Colors.Gray}>{placeholder.slice(1)}</Text>
|
||||
</Text>
|
||||
) : (
|
||||
linesToRender.map((lineText, visualIdxInRenderedSet) => {
|
||||
const cursorVisualRow =
|
||||
cursorVisualRowAbsolute - scrollVisualRow;
|
||||
let display = cpSlice(lineText, 0, inputWidth);
|
||||
const currentVisualWidth = stringWidth(display);
|
||||
if (currentVisualWidth < inputWidth) {
|
||||
display =
|
||||
display + ' '.repeat(inputWidth - currentVisualWidth);
|
||||
}
|
||||
|
||||
if (visualIdxInRenderedSet === cursorVisualRow) {
|
||||
const relativeVisualColForHighlight =
|
||||
cursorVisualColAbsolute;
|
||||
|
||||
if (relativeVisualColForHighlight >= 0) {
|
||||
if (relativeVisualColForHighlight < cpLen(display)) {
|
||||
const charToHighlight =
|
||||
cpSlice(
|
||||
display,
|
||||
relativeVisualColForHighlight,
|
||||
relativeVisualColForHighlight + 1,
|
||||
) || ' ';
|
||||
const highlighted = chalk.inverse(charToHighlight);
|
||||
display =
|
||||
cpSlice(display, 0, relativeVisualColForHighlight) +
|
||||
highlighted +
|
||||
cpSlice(display, relativeVisualColForHighlight + 1);
|
||||
} else if (
|
||||
relativeVisualColForHighlight === cpLen(display) &&
|
||||
cpLen(display) === inputWidth
|
||||
) {
|
||||
display = display + chalk.inverse(' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Text key={`line-${visualIdxInRenderedSet}`}>
|
||||
{display}
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{state.validationErrors.length > 0 && (
|
||||
<Box flexDirection="column">
|
||||
{state.validationErrors.map((error, index) => (
|
||||
<Text key={index} color={theme.status.error}>
|
||||
⚠ {error}
|
||||
</Text>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { Box } from 'ink';
|
||||
import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
|
||||
import { WizardStepProps } from '../types.js';
|
||||
|
||||
interface GenerationOption {
|
||||
label: string;
|
||||
value: 'qwen' | 'manual';
|
||||
}
|
||||
|
||||
const generationOptions: GenerationOption[] = [
|
||||
{
|
||||
label: 'Generate with Qwen Code (Recommended)',
|
||||
value: 'qwen',
|
||||
},
|
||||
{
|
||||
label: 'Manual Creation',
|
||||
value: 'manual',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Step 2: Generation method selection.
|
||||
*/
|
||||
export function GenerationMethodSelector({
|
||||
state,
|
||||
dispatch,
|
||||
onNext,
|
||||
onPrevious: _onPrevious,
|
||||
}: WizardStepProps) {
|
||||
const handleSelect = (selectedValue: string) => {
|
||||
const method = selectedValue as 'qwen' | 'manual';
|
||||
dispatch({ type: 'SET_GENERATION_METHOD', method });
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<RadioButtonSelect
|
||||
items={generationOptions.map((option) => ({
|
||||
label: option.label,
|
||||
value: option.value,
|
||||
}))}
|
||||
initialIndex={generationOptions.findIndex(
|
||||
(opt) => opt.value === state.generationMethod,
|
||||
)}
|
||||
onSelect={handleSelect}
|
||||
isFocused={true}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { Box } from 'ink';
|
||||
import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
|
||||
import { WizardStepProps } from '../types.js';
|
||||
|
||||
interface LocationOption {
|
||||
label: string;
|
||||
value: 'project' | 'user';
|
||||
}
|
||||
|
||||
const locationOptions: LocationOption[] = [
|
||||
{
|
||||
label: 'Project Level (.qwen/agents/)',
|
||||
value: 'project',
|
||||
},
|
||||
{
|
||||
label: 'User Level (~/.qwen/agents/)',
|
||||
value: 'user',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Step 1: Location selection for subagent storage.
|
||||
*/
|
||||
export function LocationSelector({ state, dispatch, onNext }: WizardStepProps) {
|
||||
const handleSelect = (selectedValue: string) => {
|
||||
const location = selectedValue as 'project' | 'user';
|
||||
dispatch({ type: 'SET_LOCATION', location });
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<RadioButtonSelect
|
||||
items={locationOptions.map((option) => ({
|
||||
label: option.label,
|
||||
value: option.value,
|
||||
}))}
|
||||
initialIndex={locationOptions.findIndex(
|
||||
(opt) => opt.value === state.location,
|
||||
)}
|
||||
onSelect={handleSelect}
|
||||
isFocused={true}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
249
packages/cli/src/ui/components/subagents/create/ToolSelector.tsx
Normal file
249
packages/cli/src/ui/components/subagents/create/ToolSelector.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { RadioButtonSelect } from '../../shared/RadioButtonSelect.js';
|
||||
import { ToolCategory } from '../types.js';
|
||||
import { Kind, Config } from '@qwen-code/qwen-code-core';
|
||||
import { Colors } from '../../../colors.js';
|
||||
|
||||
interface ToolOption {
|
||||
label: string;
|
||||
value: string;
|
||||
category: ToolCategory;
|
||||
}
|
||||
|
||||
interface ToolSelectorProps {
|
||||
tools?: string[];
|
||||
onSelect: (tools: string[]) => void;
|
||||
config: Config | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tool selection with categories.
|
||||
*/
|
||||
export function ToolSelector({
|
||||
tools = [],
|
||||
onSelect,
|
||||
config,
|
||||
}: ToolSelectorProps) {
|
||||
// Generate tool categories from actual tool registry
|
||||
const {
|
||||
toolCategories,
|
||||
readTools,
|
||||
editTools,
|
||||
executeTools,
|
||||
initialCategory,
|
||||
} = useMemo(() => {
|
||||
if (!config) {
|
||||
// Fallback categories if config not available
|
||||
return {
|
||||
toolCategories: [
|
||||
{
|
||||
id: 'all',
|
||||
name: 'All Tools (Default)',
|
||||
tools: [],
|
||||
},
|
||||
],
|
||||
readTools: [],
|
||||
editTools: [],
|
||||
executeTools: [],
|
||||
initialCategory: 'all',
|
||||
};
|
||||
}
|
||||
|
||||
const toolRegistry = config.getToolRegistry();
|
||||
const allTools = toolRegistry.getAllTools();
|
||||
|
||||
// Categorize tools by Kind
|
||||
const readTools = allTools
|
||||
.filter(
|
||||
(tool) =>
|
||||
tool.kind === Kind.Read ||
|
||||
tool.kind === Kind.Search ||
|
||||
tool.kind === Kind.Fetch ||
|
||||
tool.kind === Kind.Think,
|
||||
)
|
||||
.map((tool) => tool.displayName)
|
||||
.sort();
|
||||
|
||||
const editTools = allTools
|
||||
.filter(
|
||||
(tool) =>
|
||||
tool.kind === Kind.Edit ||
|
||||
tool.kind === Kind.Delete ||
|
||||
tool.kind === Kind.Move,
|
||||
)
|
||||
.map((tool) => tool.displayName)
|
||||
.sort();
|
||||
|
||||
const executeTools = allTools
|
||||
.filter((tool) => tool.kind === Kind.Execute)
|
||||
.map((tool) => tool.displayName)
|
||||
.sort();
|
||||
|
||||
const toolCategories = [
|
||||
{
|
||||
id: 'all',
|
||||
name: 'All Tools',
|
||||
tools: [],
|
||||
},
|
||||
{
|
||||
id: 'read',
|
||||
name: 'Read-only Tools',
|
||||
tools: readTools,
|
||||
},
|
||||
{
|
||||
id: 'edit',
|
||||
name: 'Read & Edit Tools',
|
||||
tools: [...readTools, ...editTools],
|
||||
},
|
||||
{
|
||||
id: 'execute',
|
||||
name: 'Read & Edit & Execution Tools',
|
||||
tools: [...readTools, ...editTools, ...executeTools],
|
||||
},
|
||||
].filter((category) => category.id === 'all' || category.tools.length > 0);
|
||||
|
||||
// Determine initial category based on tools prop
|
||||
let initialCategory = 'all'; // default to first option
|
||||
|
||||
if (tools.length === 0) {
|
||||
// Empty array represents all tools
|
||||
initialCategory = 'all';
|
||||
} else {
|
||||
// Try to match tools array to a category
|
||||
const matchingCategory = toolCategories.find((category) => {
|
||||
if (category.id === 'all') return false;
|
||||
|
||||
// Check if the tools array exactly matches this category's tools
|
||||
const categoryToolsSet = new Set(category.tools);
|
||||
const inputToolsSet = new Set(tools);
|
||||
|
||||
return (
|
||||
categoryToolsSet.size === inputToolsSet.size &&
|
||||
[...categoryToolsSet].every((tool) => inputToolsSet.has(tool))
|
||||
);
|
||||
});
|
||||
|
||||
if (matchingCategory) {
|
||||
initialCategory = matchingCategory.id;
|
||||
}
|
||||
// If no exact match found, keep default 'all'
|
||||
}
|
||||
|
||||
return {
|
||||
toolCategories,
|
||||
readTools,
|
||||
editTools,
|
||||
executeTools,
|
||||
initialCategory,
|
||||
};
|
||||
}, [config, tools]);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] =
|
||||
useState<string>(initialCategory);
|
||||
|
||||
// Update selected category when initialCategory changes (when tools prop changes)
|
||||
useEffect(() => {
|
||||
setSelectedCategory(initialCategory);
|
||||
}, [initialCategory]);
|
||||
|
||||
const toolOptions: ToolOption[] = toolCategories.map((category) => ({
|
||||
label: category.name,
|
||||
value: category.id,
|
||||
category,
|
||||
}));
|
||||
|
||||
const handleHighlight = (selectedValue: string) => {
|
||||
setSelectedCategory(selectedValue);
|
||||
};
|
||||
|
||||
const handleSelect = (selectedValue: string) => {
|
||||
const category = toolCategories.find((cat) => cat.id === selectedValue);
|
||||
if (category) {
|
||||
if (category.id === 'all') {
|
||||
onSelect([]); // Empty array for 'all'
|
||||
} else {
|
||||
onSelect(category.tools);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Get the currently selected category for displaying tools
|
||||
const currentCategory = toolCategories.find(
|
||||
(cat) => cat.id === selectedCategory,
|
||||
);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Box flexDirection="column">
|
||||
<RadioButtonSelect
|
||||
items={toolOptions.map((option) => ({
|
||||
label: option.label,
|
||||
value: option.value,
|
||||
}))}
|
||||
initialIndex={toolOptions.findIndex(
|
||||
(opt) => opt.value === selectedCategory,
|
||||
)}
|
||||
onSelect={handleSelect}
|
||||
onHighlight={handleHighlight}
|
||||
isFocused={true}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Show help information or tools for selected category */}
|
||||
{currentCategory && (
|
||||
<Box flexDirection="column">
|
||||
{currentCategory.id === 'all' ? (
|
||||
<Text color={Colors.Gray}>
|
||||
All tools selected, including MCP tools
|
||||
</Text>
|
||||
) : currentCategory.tools.length > 0 ? (
|
||||
<>
|
||||
<Text color={Colors.Gray}>Selected tools:</Text>
|
||||
<Box flexDirection="column" marginLeft={2}>
|
||||
{(() => {
|
||||
// Filter the already categorized tools to show only those in current category
|
||||
const categoryReadTools = currentCategory.tools.filter(
|
||||
(tool) => readTools.includes(tool),
|
||||
);
|
||||
const categoryEditTools = currentCategory.tools.filter(
|
||||
(tool) => editTools.includes(tool),
|
||||
);
|
||||
const categoryExecuteTools = currentCategory.tools.filter(
|
||||
(tool) => executeTools.includes(tool),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{categoryReadTools.length > 0 && (
|
||||
<Text color={Colors.Gray}>
|
||||
• Read-only tools: {categoryReadTools.join(', ')}
|
||||
</Text>
|
||||
)}
|
||||
{categoryEditTools.length > 0 && (
|
||||
<Text color={Colors.Gray}>
|
||||
• Edit tools: {categoryEditTools.join(', ')}
|
||||
</Text>
|
||||
)}
|
||||
{categoryExecuteTools.length > 0 && (
|
||||
<Text color={Colors.Gray}>
|
||||
• Execution tools: {categoryExecuteTools.join(', ')}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</Box>
|
||||
</>
|
||||
) : null}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user