mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-20 16:57:46 +00:00
feat: subagent runtime & CLI display - wip
This commit is contained in:
tanzhenxin
@@ -0,0 +1,381 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { Colors } from '../../colors.js';
|
||||
import { TaskResultDisplay } from '@qwen-code/qwen-code-core';
|
||||
|
||||
export interface SubagentExecutionDisplayProps {
|
||||
data: TaskResultDisplay;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to display subagent execution progress and results.
|
||||
* This is now a pure component that renders the provided SubagentExecutionResultDisplay data.
|
||||
* Real-time updates are handled by the parent component updating the data prop.
|
||||
*/
|
||||
export const SubagentExecutionDisplay: React.FC<
|
||||
SubagentExecutionDisplayProps
|
||||
> = ({ data }) => (
|
||||
<Box flexDirection="column" paddingX={1}>
|
||||
{/* Header with subagent name and status */}
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<StatusDot status={data.status} />
|
||||
<Text bold color={Colors.AccentBlue}>
|
||||
{data.subagentName}
|
||||
</Text>
|
||||
<Text color={Colors.Gray}> • </Text>
|
||||
<StatusIndicator status={data.status} />
|
||||
</Box>
|
||||
|
||||
{/* Task description */}
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text color={Colors.Gray}>Task: </Text>
|
||||
<Text wrap="wrap">{data.taskDescription}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Progress section for running tasks */}
|
||||
{data.status === 'running' && (
|
||||
<ProgressSection progress={data.progress || { toolCalls: [] }} />
|
||||
)}
|
||||
|
||||
{/* Results section for completed/failed tasks */}
|
||||
{(data.status === 'completed' || data.status === 'failed') && (
|
||||
<ResultsSection data={data} />
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
/**
|
||||
* Status dot component with similar height as text
|
||||
*/
|
||||
const StatusDot: React.FC<{
|
||||
status: TaskResultDisplay['status'];
|
||||
}> = ({ status }) => {
|
||||
const color = React.useMemo(() => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return Colors.AccentYellow;
|
||||
case 'completed':
|
||||
return Colors.AccentGreen;
|
||||
case 'failed':
|
||||
return Colors.AccentRed;
|
||||
default:
|
||||
return Colors.Gray;
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<Box marginRight={1}>
|
||||
<Text color={color}>●</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Status indicator component
|
||||
*/
|
||||
const StatusIndicator: React.FC<{
|
||||
status: TaskResultDisplay['status'];
|
||||
}> = ({ status }) => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return <Text color={Colors.AccentYellow}>Running</Text>;
|
||||
case 'completed':
|
||||
return <Text color={Colors.AccentGreen}>Completed</Text>;
|
||||
case 'failed':
|
||||
return <Text color={Colors.AccentRed}>Failed</Text>;
|
||||
default:
|
||||
return <Text color={Colors.Gray}>Unknown</Text>;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Progress section for running executions
|
||||
*/
|
||||
const ProgressSection: React.FC<{
|
||||
progress: {
|
||||
toolCalls?: Array<{
|
||||
name: string;
|
||||
status: 'executing' | 'success' | 'failed';
|
||||
error?: string;
|
||||
args?: Record<string, unknown>;
|
||||
result?: string;
|
||||
returnDisplay?: string;
|
||||
}>;
|
||||
};
|
||||
}> = ({ progress }) => (
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
{progress.toolCalls && progress.toolCalls.length > 0 && (
|
||||
<CleanToolCallsList toolCalls={progress.toolCalls} />
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
/**
|
||||
* Clean tool calls list - format consistent with ToolInfo in ToolMessage.tsx
|
||||
*/
|
||||
const CleanToolCallsList: React.FC<{
|
||||
toolCalls: Array<{
|
||||
name: string;
|
||||
status: 'executing' | 'success' | 'failed';
|
||||
error?: string;
|
||||
args?: Record<string, unknown>;
|
||||
result?: string;
|
||||
returnDisplay?: string;
|
||||
}>;
|
||||
}> = ({ toolCalls }) => (
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text bold>Tools:</Text>
|
||||
</Box>
|
||||
{toolCalls.map((toolCall, index) => (
|
||||
<CleanToolCallItem
|
||||
key={`${toolCall.name}-${index}`}
|
||||
toolCall={toolCall}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
|
||||
/**
|
||||
* Individual tool call item - consistent with ToolInfo format
|
||||
*/
|
||||
const CleanToolCallItem: React.FC<{
|
||||
toolCall: {
|
||||
name: string;
|
||||
status: 'executing' | 'success' | 'failed';
|
||||
error?: string;
|
||||
args?: Record<string, unknown>;
|
||||
result?: string;
|
||||
returnDisplay?: string;
|
||||
};
|
||||
}> = ({ toolCall }) => {
|
||||
const STATUS_INDICATOR_WIDTH = 3;
|
||||
|
||||
// Map subagent status to ToolCallStatus-like display
|
||||
const statusIcon = React.useMemo(() => {
|
||||
switch (toolCall.status) {
|
||||
case 'executing':
|
||||
return <Text color={Colors.AccentYellow}>⊷</Text>; // Using same as ToolMessage
|
||||
case 'success':
|
||||
return <Text color={Colors.AccentGreen}>✔</Text>;
|
||||
case 'failed':
|
||||
return (
|
||||
<Text color={Colors.AccentRed} bold>
|
||||
x
|
||||
</Text>
|
||||
);
|
||||
default:
|
||||
return <Text color={Colors.Gray}>o</Text>;
|
||||
}
|
||||
}, [toolCall.status]);
|
||||
|
||||
const description = getToolDescription(toolCall);
|
||||
|
||||
// Get first line of returnDisplay for truncated output
|
||||
const truncatedOutput = React.useMemo(() => {
|
||||
if (!toolCall.returnDisplay) return '';
|
||||
const firstLine = toolCall.returnDisplay.split('\n')[0];
|
||||
return firstLine.length > 80
|
||||
? firstLine.substring(0, 80) + '...'
|
||||
: firstLine;
|
||||
}, [toolCall.returnDisplay]);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" paddingLeft={1} marginBottom={0}>
|
||||
{/* First line: status icon + tool name + description (consistent with ToolInfo) */}
|
||||
<Box flexDirection="row">
|
||||
<Box minWidth={STATUS_INDICATOR_WIDTH}>{statusIcon}</Box>
|
||||
<Text wrap="truncate-end">
|
||||
<Text color={Colors.Foreground} bold>
|
||||
{toolCall.name}
|
||||
</Text>{' '}
|
||||
<Text color={Colors.Gray}>{description}</Text>
|
||||
{toolCall.error && (
|
||||
<Text color={Colors.AccentRed}> - {toolCall.error}</Text>
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Second line: truncated returnDisplay output */}
|
||||
{truncatedOutput && (
|
||||
<Box flexDirection="row" paddingLeft={STATUS_INDICATOR_WIDTH}>
|
||||
<Text color={Colors.Gray}>{truncatedOutput}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper function to get tool description from args
|
||||
*/
|
||||
const getToolDescription = (toolCall: {
|
||||
name: string;
|
||||
args?: Record<string, unknown>;
|
||||
}): string => {
|
||||
if (!toolCall.args) return '';
|
||||
|
||||
// Handle common tool patterns
|
||||
if (toolCall.name === 'Glob' && toolCall.args['glob_pattern']) {
|
||||
return `"${toolCall.args['glob_pattern']}"`;
|
||||
}
|
||||
if (toolCall.name === 'ReadFile' && toolCall.args['target_file']) {
|
||||
const path = toolCall.args['target_file'] as string;
|
||||
return path.split('/').pop() || path;
|
||||
}
|
||||
if (toolCall.name === 'SearchFileContent' && toolCall.args['pattern']) {
|
||||
return `"${toolCall.args['pattern']}"`;
|
||||
}
|
||||
|
||||
// Generic fallback
|
||||
const firstArg = Object.values(toolCall.args)[0];
|
||||
if (typeof firstArg === 'string' && firstArg.length < 50) {
|
||||
return firstArg;
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Execution summary details component
|
||||
*/
|
||||
const ExecutionSummaryDetails: React.FC<{
|
||||
data: TaskResultDisplay;
|
||||
}> = ({ data }) => {
|
||||
// Parse execution summary for structured data
|
||||
const summaryData = React.useMemo(() => {
|
||||
if (!data.executionSummary) return null;
|
||||
|
||||
// Try to extract structured data from execution summary
|
||||
const durationMatch = data.executionSummary.match(/Duration:\s*([^\n]+)/i);
|
||||
const roundsMatch = data.executionSummary.match(/Rounds:\s*(\d+)/i);
|
||||
const tokensMatch = data.executionSummary.match(/Tokens:\s*([\d,]+)/i);
|
||||
|
||||
return {
|
||||
duration: durationMatch?.[1] || 'N/A',
|
||||
rounds: roundsMatch?.[1] || 'N/A',
|
||||
tokens: tokensMatch?.[1] || 'N/A',
|
||||
};
|
||||
}, [data.executionSummary]);
|
||||
|
||||
if (!summaryData) {
|
||||
return (
|
||||
<Box flexDirection="column" paddingLeft={1}>
|
||||
<Text color={Colors.Gray}>• No summary available</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" paddingLeft={1}>
|
||||
<Text>
|
||||
• <Text bold>Duration:</Text> {summaryData.duration}
|
||||
</Text>
|
||||
<Text>
|
||||
• <Text bold>Rounds:</Text> {summaryData.rounds}
|
||||
</Text>
|
||||
<Text>
|
||||
• <Text bold>Tokens:</Text> {summaryData.tokens}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Tool usage statistics component
|
||||
*/
|
||||
const ToolUsageStats: React.FC<{
|
||||
toolCalls: Array<{
|
||||
name: string;
|
||||
status: 'executing' | 'success' | 'failed';
|
||||
error?: string;
|
||||
args?: Record<string, unknown>;
|
||||
result?: string;
|
||||
returnDisplay?: string;
|
||||
}>;
|
||||
}> = ({ toolCalls }) => {
|
||||
const stats = React.useMemo(() => {
|
||||
const total = toolCalls.length;
|
||||
const successful = toolCalls.filter(
|
||||
(call) => call.status === 'success',
|
||||
).length;
|
||||
const failed = toolCalls.filter((call) => call.status === 'failed').length;
|
||||
const successRate =
|
||||
total > 0 ? ((successful / total) * 100).toFixed(1) : '0.0';
|
||||
|
||||
return { total, successful, failed, successRate };
|
||||
}, [toolCalls]);
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" paddingLeft={1}>
|
||||
<Text>
|
||||
• <Text bold>Total Calls:</Text> {stats.total}
|
||||
</Text>
|
||||
<Text>
|
||||
• <Text bold>Success Rate:</Text>{' '}
|
||||
<Text color={Colors.AccentGreen}>{stats.successRate}%</Text> (
|
||||
<Text color={Colors.AccentGreen}>{stats.successful} success</Text>,{' '}
|
||||
<Text color={Colors.AccentRed}>{stats.failed} failed</Text>)
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Results section for completed executions - matches the clean layout from the image
|
||||
*/
|
||||
const ResultsSection: React.FC<{
|
||||
data: TaskResultDisplay;
|
||||
}> = ({ data }) => (
|
||||
<Box flexDirection="column">
|
||||
{/* Tool calls section - clean list format */}
|
||||
{data.progress?.toolCalls && data.progress.toolCalls.length > 0 && (
|
||||
<CleanToolCallsList toolCalls={data.progress.toolCalls} />
|
||||
)}
|
||||
|
||||
{/* Task Completed section */}
|
||||
<Box flexDirection="row" marginTop={1} marginBottom={1}>
|
||||
<Text>📄 </Text>
|
||||
<Text bold>Task Completed: </Text>
|
||||
<Text>{data.taskDescription}</Text>
|
||||
</Box>
|
||||
|
||||
{/* Execution Summary section */}
|
||||
<Box flexDirection="column" marginBottom={1}>
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text>📊 </Text>
|
||||
<Text bold color={Colors.AccentBlue}>
|
||||
Execution Summary:
|
||||
</Text>
|
||||
</Box>
|
||||
<ExecutionSummaryDetails data={data} />
|
||||
</Box>
|
||||
|
||||
{/* Tool Usage section */}
|
||||
{data.progress?.toolCalls && data.progress.toolCalls.length > 0 && (
|
||||
<Box flexDirection="column">
|
||||
<Box flexDirection="row" marginBottom={1}>
|
||||
<Text>🔧 </Text>
|
||||
<Text bold color={Colors.AccentBlue}>
|
||||
Tool Usage:
|
||||
</Text>
|
||||
</Box>
|
||||
<ToolUsageStats toolCalls={data.progress.toolCalls} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Error reason for failed tasks */}
|
||||
{data.status === 'failed' && data.terminateReason && (
|
||||
<Box flexDirection="row" marginTop={1}>
|
||||
<Text color={Colors.AccentRed}>❌ Failed: </Text>
|
||||
<Text color={Colors.Gray}>{data.terminateReason}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
@@ -20,6 +20,9 @@ export { ActionSelectionStep } from './ActionSelectionStep.js';
|
||||
export { AgentViewerStep } from './AgentViewerStep.js';
|
||||
export { AgentDeleteStep } from './AgentDeleteStep.js';
|
||||
|
||||
// Execution Display Components
|
||||
export { SubagentExecutionDisplay } from './SubagentExecutionDisplay.js';
|
||||
|
||||
// Creation Wizard Types and State
|
||||
export type {
|
||||
CreationWizardState,
|
||||
|
||||
Reference in New Issue
Block a user