feat: subagent runtime & CLI display - wip

packages/cli/src/ui/components/messages/ToolMessage.test.tsx

@@ -39,6 +39,19 @@ vi.mock('../../utils/MarkdownDisplay.js', () => ({
     return <Text>MockMarkdown:{text}</Text>;
   },
 }));
+vi.mock('../subagents/index.js', () => ({
+  SubagentExecutionDisplay: function MockSubagentExecutionDisplay({
+    data,
+  }: {
+    data: { subagentName: string; taskDescription: string };
+  }) {
+    return (
+      <Text>
+        🤖 {data.subagentName} • Task: {data.taskDescription}
+      </Text>
+    );
+  },
+}));
 
 // Helper to render with context
 const renderWithContext = (
@@ -180,4 +193,33 @@ describe('<ToolMessage />', () => {
     // We can at least ensure it doesn't have the high emphasis indicator.
     expect(lowEmphasisFrame()).not.toContain('←');
   });
+
+  it('shows subagent execution display for task tool with proper result display', () => {
+    const subagentResultDisplay = {
+      type: 'subagent_execution' as const,
+      subagentName: 'file-search',
+      taskDescription: 'Search for files matching pattern',
+      status: 'running' as const,
+    };
+
+    const props: ToolMessageProps = {
+      name: 'task',
+      description: 'Delegate task to subagent',
+      resultDisplay: subagentResultDisplay,
+      status: ToolCallStatus.Executing,
+      terminalWidth: 80,
+      callId: 'test-call-id-2',
+      confirmationDetails: undefined,
+    };
+
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...props} />,
+      StreamingState.Responding,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('🤖'); // Subagent execution display should show
+    expect(output).toContain('file-search'); // Actual subagent name
+    expect(output).toContain('Search for files matching pattern'); // Actual task description
+  });
 });

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -13,7 +13,11 @@ import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
 import { TodoDisplay } from '../TodoDisplay.js';
-import { TodoResultDisplay } from '@qwen-code/qwen-code-core';
+import {
+  TodoResultDisplay,
+  TaskResultDisplay,
+} from '@qwen-code/qwen-code-core';
+import { SubagentExecutionDisplay } from '../subagents/index.js';
 
 const STATIC_HEIGHT = 1;
 const RESERVED_LINE_COUNT = 5; // for tool name, status, padding etc.
@@ -29,7 +33,8 @@ type DisplayRendererResult =
   | { type: 'none' }
   | { type: 'todo'; data: TodoResultDisplay }
   | { type: 'string'; data: string }
-  | { type: 'diff'; data: { fileDiff: string; fileName: string } };
+  | { type: 'diff'; data: { fileDiff: string; fileName: string } }
+  | { type: 'subagent_execution'; data: TaskResultDisplay };
 
 /**
  * Custom hook to determine the type of result display and return appropriate rendering info
@@ -55,6 +60,19 @@ const useResultDisplayRenderer = (
       };
     }
 
+    // Check for SubagentExecutionResultDisplay (for non-task tools)
+    if (
+      typeof resultDisplay === 'object' &&
+      resultDisplay !== null &&
+      'type' in resultDisplay &&
+      resultDisplay.type === 'subagent_execution'
+    ) {
+      return {
+        type: 'subagent_execution',
+        data: resultDisplay as TaskResultDisplay,
+      };
+    }
+
     // Check for FileDiff
     if (
       typeof resultDisplay === 'object' &&
@@ -81,6 +99,15 @@ const TodoResultRenderer: React.FC<{ data: TodoResultDisplay }> = ({
   data,
 }) => <TodoDisplay todos={data.todos} />;
 
+/**
+ * Component to render subagent execution results
+ */
+const SubagentExecutionRenderer: React.FC<{
+  data: TaskResultDisplay;
+  availableHeight?: number;
+  childWidth: number;
+}> = ({ data }) => <SubagentExecutionDisplay data={data} />;
+
 /**
  * Component to render string results (markdown or plain text)
  */
@@ -189,6 +216,13 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
             {displayRenderer.type === 'todo' && (
               <TodoResultRenderer data={displayRenderer.data} />
             )}
+            {displayRenderer.type === 'subagent_execution' && (
+              <SubagentExecutionRenderer
+                data={displayRenderer.data}
+                availableHeight={availableHeight}
+                childWidth={childWidth}
+              />
+            )}
             {displayRenderer.type === 'string' && (
               <StringResultRenderer
                 data={displayRenderer.data}

packages/cli/src/ui/components/subagents/SubagentExecutionDisplay.tsx

@@ -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>
+);

packages/cli/src/ui/components/subagents/index.ts

@@ -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,

packages/cli/src/ui/types.ts

@@ -46,7 +46,7 @@ export interface IndividualToolCallDisplay {
   callId: string;
   name: string;
   description: string;
-  resultDisplay: ToolResultDisplay | undefined;
+  resultDisplay: ToolResultDisplay | string | object | undefined;
   status: ToolCallStatus;
   confirmationDetails: ToolCallConfirmationDetails | undefined;
   renderOutputAsMarkdown?: boolean;